1

I have my app which has react navigation like Stack Navigators, Bottom Tab navigator. I want to use the bottom navigation of react-native-paper which looks better than react-navigation.

But the problem is that when I use paper's example bottom navigation in my App component's return function, it gives me "Rendered more hooks than the previous render." Example code:

    <PaperProvider theme={theme}>
      <NavigationContainer>
      <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
      />
        {/*
<Tab.Navigator>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Groups" component={GroupsScreen} />
          <Tab.Screen name="Rides" component={RidesScreen} />
          <Tab.Screen name="Complaints" component={ComplaintScreen} />
          <Tab.Screen name="About" component={AboutScreen} />
        </Tab.Navigator>*/}
      </NavigationContainer>
    </PaperProvider>

I am not certain what problem I am getting.

chris aimsworth
  • 15
  • 4
  • 1
    There is a BottomNavigation.Bar component in their guide, check it out. [BottomNavigation.Bar](https://callstack.github.io/react-native-paper/docs/components/BottomNavigation/BottomNavigationBar), they have an example for that. – DarkCoder Apr 17 '23 at 06:26

0 Answers0