1

Pushing a screen of a React Navigation Stack with a FlatList will break the scrolling support on Web.

Tried several suggested solutions - none of these worked:

  • Including a parent View with flex property style={{flex: 1}}
  • Replacing FlatList with a ScrollView

What worked for me was adding a flex property to cardStyle in screenOptions of the React Navigation stack navigator:

<Stack.Navigator mode="card" screenOptions={{ cardStyle: { flex: 1 } }}>
  <Stack.Screen name="MyScreen" component={MyScreen} />
</Stack.Navigator>
mirkokiefer
  • 3,347
  • 4
  • 20
  • 25

2 Answers2

2

What worked for me was adding a flex property to cardStyle in screenOptions of the React Navigation stack navigator:

<Stack.Navigator mode="card" screenOptions={{ cardStyle: { flex: 1 } }}>
  <Stack.Screen name="MyScreen" component={MyScreen} />
</Stack.Navigator>

See also: https://github.com/react-navigation/react-navigation/issues/6165

mirkokiefer
  • 3,347
  • 4
  • 20
  • 25
0

I had this error and spent an age trying to find the source. I had a FlatList which assumed was the to blame... but the error remained even after commenting out.... after much cache flushing... I traced the problem to having a native base Select inside a native base Modal.

Abi B
  • 21
  • 1
  • 6