Horizontal FlatList inside ScrollView is not scrolling

Question

I have a screen with many horizontal FlatLists inside a ScrollView, the structure is likes this:

<ScrollView>
  <View>
    <FlatList horizontal={true} .../>
  </View>
  <View>
    <FlatList horizontal={true} .../>
  </View>
  <View>
    <FlatList horizontal={true} .../>
  </View>
</ScrollView>

Horizontal scrolling on each FlatList sometimes work, but most of the times happens a swipe to the next screen:

Am using react native 0.61.2, react-navigation 4.0.10. Previously on react native 0.60.x works good. It only happens on android.

I already tried:

• put nestedScrollEnabled={true} on <ScrollView>
• put ScrollView inside a <View> with flex:1
• put nestedScrollEnabled={true} on <ScrollView> and on each FlatList

but it's not working, What more else can I do? Thanks in advance

Answer 1

You can write your code like this:

<ScrollView>
  <View>
    <FlatList horizontal .../>
  </View>
  <View>
    <FlatList horizontal .../>
  </View>
  <View>
    <FlatList horizontal .../>
  </View>
</ScrollView>

just pass horizontal props in Components. It will work.

Answer 2

Have you used flatlist imported from react native gesture handler? Usually it happens that people import flatlist from react native and that cause that issue. When you work with react navigation it is mandatory to use flatlist from react-native-gesture-handler library in order to properly manage handlers interactions