Skip to main content

Nested Navigation across multiple pages frok

We need to follow the below steps strictly in order to navigate across multiple pages in a newly added tab.  Firstly we need  to make a separate folder for the new tab . Then we Add all the required pages in the same folder. Suppose From Page 1 of the new tab, we want to navigate to Page 2 of the new tab. We have to use below function on the button : 

onPress={() => {
navigation.navigate('PAGE 2', { any data you want to pass to PAGE 2});
}}

In PAGE 2, You have to take the data in the following manner (in other words Plug in the data u got from PAGE 1) : 

const { params } = useRoute<RouteProp<'PAGE 2 FUNCTION NAME'>>();
const selectedMasjidId = params.selectedMasjidId;  // destructure to get the data out from params

Now we will move on to the Next step which is to construct a navigator for this Tab. I will put an example below to generalize the implementation of the navigator ( we will call this "Alpha-navigator" for now).  Below is a generalization of how to create  Alpha-navigator for our screens so that we can navigate across them flawlesly : 


import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';


import PAGE A from '@/screens/home/PAGE-A;  //Here i am giving the location of the pages , you can give it accordingly
import PAGE B from '@/screens/home/PAGE-B';
import PAGE C from '@/screens/home/PAGE-C';


export type AlphaStackParamList = {
PAGE A : undefined;
PAGE B : undefined;
PAGE C {alphaData :number};  //  Here we are are passing the alphaData because in the actual pages data is passed from one page to another. Note it is not required if no data is passed from one page to another.
};
// THE ABOVE Alphastackparamlist is feeded to the stack below

const Stack = createNativeStackNavigator<AlphaStackParamList>();


export const AlphaNavigator = () => {
return (
<Stack.Navigator>
<Stack.Group>
<Stack.Screen name="PAGE A" component={PAGE A} />
<Stack.Screen name="PAGE B" component={PAGE B} />
<Stack.Screen name="PAGE C" component={PAGE C} />
</Stack.Group>
</Stack.Navigator>
);
};

So after the alphaNavigator is successfully built , Below is the important step we must not forget.  Now we need to plug this alphaNavigator into the tab-navigator. Below text shown in Red colour and italics is to be followed :  We need to go to tab-navigator. Then Look for TabsInfo . Then Put our AlphaNavigator at our desired position(Note the navigators put there display  First Put First Display Manner (in other words, the navigators put at first place will be the first navigator to display it's pages/screens) on our mobiles as they are put in TabsInfo). Then Finally there is another important Step , we must not forget else Our navigator wont work. Below are the steps ;  We need to go to >> navigation folder and hover to >>  types.tsx . Then in RootStackParamList , we need to do the following :  Put this "& alphaStackParamList" at the end of other already defined paramLists. Here is an example :  export type RootStackParamList = AuthStackParamList & FeedStackParamList & HomeStackParamList & AlphaStackParamList;

Back to top