Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 332
Shamoon Avatar asked Nov 06 '22 08:11

Shamoon


1 Answers

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}

like image 133
André Ferrari Moukarzel Avatar answered Nov 13 '22 02:11

André Ferrari Moukarzel