Can't scroll with react-native-paper and @react-navigation/bottom-tabs

Question

I have:

<PaperProvider theme={theme}>
  <NavigationContainer>
    <Tab.Navigator initialRouteName="Feed">
      <Tab.Screen
        name="Home"
        component={Conversations}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="home" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Explore"
        component={Conversations}
        options={{
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="find" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Conversations}
        options={{
          tabBarLabel: "Profile",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="setting" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  </NavigationContainer>
</PaperProvider>;

And it loads fine, but I can't scroll. I'm also using react-native-web to attempt to make it web compatible.

Answer 1

It seems this is actually a problem with Expo, which I supose you are using to test your app. The problem is described in this Issue in the React Navigation repo:

https://github.com/react-navigation/react-navigation/issues/1797

Updating/Reinstalling Expo seems to fix your problem, if this is the case!

There is also an old fix for Expo's web integration that had this problem too, as described in this issue:

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

Theorically it is fixed, but if you are using an old version of React Navigation... Well, it seems you can fix this by setting the cardStyle property to {flex: 1}