victory-native touch interrupted while interacting with chart in Stack Navigator and Tab View on iOS

[lostbeta]

Describe the bug
Unable to interact continuously with VictoryCursorContainer on iOS when the chart is inside a React Native Tab View which is inside a Stack Navigator. As the user drags their finger across the chart, the horizontal and vertical lines generated by the cursor container should follow the user's finger. In reality, they only do so while the user's finger is very close to the initial touch position. Once the finger is dragged further away the cursor disappears as if the touch is interrupted. This happens only on iOS, only with the Stack Navigator (works fine with bottom tab navigator or even native stack navigator), and only if the chart is inside a React Native Tab View. Similar behavior is observed with VictoryVoronoiContainer.

Victory version
36.6.11

To Reproduce

1. Init a new app: npx react-native@latest init AwesomeProject
2. cd AwesomeProject/
3. Add packages for navigation, tab view, victory and relevant dependencies:
   yarn add @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-pager-view react-native-safe-area-context react-native-screens react-native-svg react-native-tab-view victory-native
4. cd ios && pod install && cd ..
5. Update App.tsx with the following contents:

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {useWindowDimensions, View} from 'react-native';
import {SceneMap, TabView} from 'react-native-tab-view';
import {
  VictoryChart,
  VictoryCursorContainer,
  VictoryLine,
} from 'victory-native';

function Screen(): JSX.Element {
  const data = [
    {x: 1, y: 2},
    {x: 2, y: 3},
    {x: 3, y: 5},
    {x: 4, y: 4},
    {x: 5, y: 7},
  ];

  const layout = useWindowDimensions();
  const FirstRoute = () => (
    <VictoryChart containerComponent={<VictoryCursorContainer />}>
      <VictoryLine data={data} />
    </VictoryChart>
  );
  const renderScene = SceneMap({
    first: FirstRoute,
  });
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([{key: 'first', title: 'First'}]);

  return (
    <View style={{flex: 1}}>
      <TabView
        navigationState={{index, routes}}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={{width: layout.width}}
        swipeEnabled={false}
      />
    </View>
  );
}

const Stack = createStackNavigator();
function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{gestureEnabled: false}}>
        <Stack.Screen name="Screen" component={Screen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

6. yarn ios

Screenshots

Smartphone (please complete the following information)

• Device: iOS simulator (iPhone SE 3, iPhone 14)
• OS: iOS 16.4

Additional information
package.json dependencies:

"dependencies": {
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-gesture-handler": "^2.12.0",
    "react-native-pager-view": "^6.2.0",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.22.1",
    "react-native-svg": "^13.10.0",
    "react-native-tab-view": "^3.5.2",
    "victory-native": "^36.6.11"
  }

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.