CODEWITHSUNDEEP
react-nativereact-navigation
sumanta.k
sumanta.k

Reputation: 527

How to navigate to a another screen in class component in react native

App.js code:

function firstScreenStack({ navigation }) {
  return (
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen
          name="Login"
          component={Login}
          options={{
            title: 'Login', //Set Header Title
            headerLeft: ()=>
              <NavigationDrawerStructure
                navigationProps={navigation}
              />,
            headerStyle: {
              backgroundColor: '#CA2C68', //Set Header color
            },
            headerTintColor: '#fff', //Set Header text color
            headerTitleStyle: {
              fontWeight: 'bold', //Set Header text style
            },
          }}
        />
      </Stack.Navigator>
  );
}

function secondScreenStack({ navigation }) {
  return (
    <Stack.Navigator
      initialRouteName="Browse"
      screenOptions={{
        headerLeft: ()=>
          <NavigationDrawerStructure
            navigationProps={navigation}
          />,
        headerStyle: {
          backgroundColor: '#CA2C68', //Set Header color
        },
        headerTintColor: '#fff', //Set Header text color
        headerTitleStyle: {
          fontWeight: 'bold', //Set Header text style
        }
      }}>
      <Stack.Screen
        name="Browse"
        component={Browse}
        options={{
          title: 'Browse', //Set Header Title
          
        }}/>
      <Stack.Screen
        name="Profile"
        component={Profile}
        options={{
          title: 'Profile', //Set Header Title
        }}/>
    </Stack.Navigator>
  );
}

export default App function has below code:

<NavigationContainer>
        <Drawer.Navigator
        initialRouteName = {Login}
          drawerContentOptions={{
            activeTintColor: '#CA2C68',
            itemStyle: { marginVertical: 5 },
          }}>
          <Drawer.Screen
            name="Login"
            options={{ drawerLabel: 'Login' }}
            component={firstScreenStack} />
          <Drawer.Screen
            name="Browse"
            options={{ drawerLabel: 'Browse' }}
            component={secondScreenStack} />
            <Drawer.Screen
            
            name="Profile"
            options={{ drawerLabel: 'Profile' }}
            component={profileScreenStack} />
        </Drawer.Navigator>
      </NavigationContainer>

I am using stack and drawer navigation both.

I want navigation.navigate("Profile");

Now how can I get navigation props into my class components? I am new in react native and navigation. Its bit complicated to understand for me. If you can help me out it will be better. Thanks.

Upvotes: 0

Views: 722

Answers (2)

Jignesh Mayani
Jignesh Mayani

Reputation: 7193

If we are supposed to navigate from the screen of the first stack navigator to another navigator then we have to access the parent of the first navigator's screen, which mean we have to get the navigation prop of the first stack navigator as we have created a drawer based on the multiple screens.

fox ex. if you want to navigate from the Browse screen of firstScreenStack to another drawer screen navigator then have a try with the below code:

if using Class Component:

this.props.navigation.dangerouslyGetParent()?.navigate("<<ANOTHER_DRAWER_SCREEN>>")

if using Functional Component:

props.navigation.dangerouslyGetParent()?.navigate("<<ANOTHER_DRAWER_SCREEN>>")

Upvotes: 1

Irfan wani
Irfan wani

Reputation: 5075

Navigation is accessible in stack routes only i.e, those classes or components which are used as routes in different navigators.

Now if i got your question, you want to access it in all components irrespective of whether it is a route or not. You can do that by passing props to it from a component which is a route.

E.g,

Let main be a route and child be another component but not a route.

Inside the main;

<child new_navigation={this.props.navigation} />

Now you can access the new_navigation inside the child.

Inside the child;

this.props.new_navigation.navigate('some_route') //you can now use all the other methods also like push, replace etc.

Upvotes: 1

Related Questions