Unable to scroll in the Android but works in iOS

[mohzameer]

I have implemented charts library inside react-native-modal. The issue is that we are unable to tap or scroll through the graph. works in iOS, but issue is in Android.

[xanderdeseyn]

can you create a minimal reproducible demo? You can simply adapt the demo project in the repo. The issue is probably that react-native-modal takes control of the gesturehandler

[mohzameer]

Works with plain modal, but with react navigation wrapped about the App, it doesn't work.

import Modal from 'react-native-modal';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (

      <Modal style={{flex:1}} isVisible={true}>
        <View style={{ flex: 1,backgroundColor:'#ffffff' }}>
        <Chart
        style={{ height: 200, width: '100%' }}
        data={data2}
        padding={{ left: 40, bottom: 20, right: 20, top: 20 }}
        xDomain={{ min: 0, max: 10 }}
        yDomain={{ min: 0, max: 20 }}
        viewport={{ size: { width: 5 }, initialOrigin: { x: 5 } }}
      >
        <VerticalAxis
          tickValues={[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]}
          theme={{
            axis: { stroke: { color: '#aaa', width: 2 } },
            ticks: { stroke: { color: '#aaa', width: 2 } },
            labels: { formatter: (v: number) => v.toFixed(2) },
          }}
        />
        <HorizontalAxis
          tickValues={[0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]}
          theme={{
            axis: { stroke: { color: '#aaa', width: 2 } },
            ticks: { stroke: { color: '#aaa', width: 2 } },
            labels: { label: { rotation: 50 }, formatter: (v) => v.toFixed(1) },
          }}
        />
        <Area theme={{ gradient: { from: { color: '#f39c12', opacity: 0.4 }, to: { color: '#f39c12', opacity: 0.4 } } }} smoothing="cubic-spline" />
        <Line
          theme={{
            stroke: { color: 'red', width: 2, dashArray: [5] },
          }}
          smoothing="cubic-spline"
        />
        {/* <Line smoothing="bezier" tension={0.15} theme={{ stroke: { color: 'blue', width: 2 } }} />
        <Line smoothing="cubic-spline" tension={0.3} theme={{ stroke: { color: 'green', width: 2 } }} />
        <Line tension={0.3} theme={{ stroke: { color: 'orange', width: 2 }, scatter: { default: { width: 4, height: 4 } } }} /> */}
      </Chart>
        </View>
      </Modal>

  )
}

const Stack = createStackNavigator();

const App = () => {
  const ref = React.useRef()

  return (
    <NavigationContainer>
     <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

[xanderdeseyn]

Thank you, I will have a look at it asap. I'm quite busy atm though, but I hope to do it this week.

[xanderdeseyn]

Should be fixed in 5.7.0 (GestureHandlerRootView used). Please close if this fixes your issue :)

[mohzameer]

It's still doesn't work. I tried with GestureHandlerRootView couple of days before as well, it did not work. Were you able to work it with the above reproducible demo?

[xanderdeseyn]

Ahh no, I figured it worked because I saw it in your PR. It seems like I won't have time in the next few days to look at it though, fyi.

[geethavijaya]

Same issue we are facing?. Please let us know when this issue will be fixed.

[mohzameer]

The problem was with using the chart on a modal.