Updating Expo SDK v35 to v36 - breaks PanResponder nested in a ScrollView?

Expo SDK
1

I have the following set-up (pseudo-code):

<ScrollView>
  <FlatList horizontal={true}>
    <PanResponder />
  </FlatList>
</ScrollView>

The <PanResponder> was behaving perfectly well with Expo SDK v35.

I updated to Expo SDK v36. Now when I move the <PanResponder>, the <ScrollView> vertical scroll and the <FlatList> horizontal scroll get triggered too.

I tried to fix it by:

  1. Adding to the <PanResponder>:

    onPanResponderTerminationRequest: () => false,
onStartShouldSetPanResponderCapture: () => true,

    Didn’t work.

  2. Importing the <ScrollView> from ‘react-native-gesture-handler’ instead of ‘react-native’.
    Didn’t work.

  3. Adding nestedScrollEnabled={true} on the <ScrollView> and the <FlatList> both, even though I read in the React Native docs that nested scrolling is supported by default on iOS.
    Didn’t work.

For the experiment, when I add scrollEnabled={false} to the <ScrollView> and the <FlatList> both, the <PanResponder> is back to normal - works just fine! So that’s something like a workaround. But will be extremely tedious to implement it on my side.

So my questions are:

  • Do you maybe know that changed in Expo SDK v36, which is causing this behavior?
  • Do you have any suggestions on how I can block all other interfering scroll events while the <PanResponder> gets moved?

PS: Issue present on iOS simulator and a real device both.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.