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

Question

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.

question from:https://stackoverflow.com/questions/66046203/how-to-navigate-to-a-another-screen-in-class-component-in-react-native

Answer 1

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>>")