Im trying to add nested navigation to my react native project

Question

Im following a react native app tutorial that has stack navigation only but I'm trying to also add nested navigation so I have a tab bar at the bottom that leads to additional pages I'm building but can't seem to figure out how to implement in my current code. Here is my code so far not sure if i'm on the right track or way off

    {
        DashBoard: DashBoardScreen,
        Articles: ArticlesScreen,
        Article: ArticleScreen,
        Search: SearchScreen
    },
    {
        initialRouteName: 'DashBoard',
        defaultNavigationOptions: ({navigation}) => ({
            headerStyle, headerTitleStyle,
            headerRight: (<SearchBtn onPress={() => navigation.navigate('Search')}/>)
        })
    }
);

const Tab = createBottomTabNavigator();
const TabNavigator = () => (
    <Tab.Navigator>
        <Tab.Screen name="News" component={DashBoard}/>
        <Tab.Screen name="Game" component={Game}/>
    </Tab.Navigator>
)```

From your code your are mixing two versions of navigators, follow the documentation for v5 here https://reactnavigation.org/docs/nesting-navigators/ — Guruparan Giritharan, Nov 17 '20 at 12:35

score 0 · Answer 1 · answered Nov 17 '20 at 14:05

Here's how you can achieve this:

const BottomTab = createBottomTabNavigator();
const Stack = createStackNavigator();

const AppStack = () => {
  return (
    <BottomTab.Navigator>
      <BottomTab.Screen name="Screen1" component={Screen1} />
      <BottomTab.Screen name="Screen2" component={Screen2} />
    </BottomTab.Navigator>
  );
};

const MainStack = () => {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen name="App" component={AppStack} />
      <Stack.Screen name="Auth" component={AuthStack} />
    </Stack.Navigator>
  );
};

Im trying to add nested navigation to my react native project

1 Answers1