How to use StackNavigator with DrawerNavigator (ReactNavigation v5)? I'm using classes for every screen

Question

P.S: Most of the Youtube videos or articles on the web aren't using ReactNavigation v5, they are using older versions. Can someone show a dummy project when user can click button to navigate to a different screen (using StackNavigator) and DrawerNavigator as well to navigate between screens. The screens must have a class and a simple text, thats it. Thanks!

Regalia

Maybe this tutorial will help: youtube.com/watch?v=nQVCkqvU1uE – Danedanegeld

Answer 1

You can have a basic setup like this where you have Home,Profile and Notification screens. Home and Profile are under a stack and notifications is a separate screen. Both the stack and the notification are placed under the drawer navigation.

Here I've used class components as thats your requirement but functional components are preferred as there are hooks like useNavigation provided by Navigation5 but there are workarounds to use these as well.

You can see the code below.

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Notifications')}
          title="Go to notifications"
        />

        <Button
          onPress={() => this.props.navigation.navigate('Profile')}
          title="Go to Profile"
        />
      </View>
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
        <Button
          onPress={() => this.props.navigation.navigate('Notifications')}
          title="Go to notifications"
        />
      </View>
    );
  }
}

class NotificationsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Notifications Screen</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Go back home"
        />
      </View>
    );
  }
}

const Stack = createStackNavigator();
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

const Drawer = createDrawerNavigator();
export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeStack} />
          <Drawer.Screen name="Notifications" component={NotificationsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

You can try out the code in the below snack as well. https://snack.expo.io/@guruparan/navsample

Kipton