FlatList and ScrollView not scrolling with React Native Web when using React Navigation

Question

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 · Accepted Answer · 2021-09-28 05:29:03Z

6

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

answered Sep 28, 2021 at 5:29

mirkokiefer

3,5974 gold badges24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The1993 Over a year ago

Thank you for this question and answer, been searching for the solution for ages

Abi B · Accepted Answer · 2023-07-25 22:06:07Z

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.

answered Jul 25, 2023 at 22:06

Abi B

1012 silver badges7 bronze badges

Comments

Vadim Isakov · Accepted Answer · 2024-11-25 01:26:49Z

0

This solution works for me. We limit the view's height by using flexGrow: 1 and enabling overflow.

<Stack.Navigator
  screenOptions={{
    contentStyle: ((Platform.OS === 'web') ? {
      flexGrow: 1,
      overflow: 'scroll'
    } : {}),
  }}
>

answered Nov 25, 2024 at 1:26

Vadim Isakov

511 silver badge3 bronze badges

Collectives™ on Stack Overflow

FlatList and ScrollView not scrolling with React Native Web when using React Navigation

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related