CODEWITHSUNDEEP
react-native
Boidurja Talukdar
Boidurja Talukdar

Reputation: 696

How do I navigate to another screen from a screen opened by drawer in react native?

I want to navigate like this (it was working fine when I had not made the drawer):

<Button onPress={() => this.props.navigation.navigate('Projects')}></Button>

But after adding the drawer, and on pressing button I am getting an error like this:

console.error: The action 'NAVIGATE' with payload '{"name":"Projects"}' was not handled by any navigator.

This is my drawer code: 

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={AccountantScreen} />
      <Drawer.Screen name="My Account" component={MyAccountScreen} />
    </Drawer.Navigator>
  );
}

export default function DrawerLeft() {
  return (

    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>

  );
}

This is my App.js: 

import ProjectsScreen from './screens/Accountant/ProjectsScreen';

import { createSwitchNavigator, createAppContainer } from 'react-navigation';

const FirstNavGroup = createSwitchNavigator({
    Projects: {
       screen: ProjectsScreen
    },

export default createAppContainer(FirstNavGroup)

How do I navigate to the Projects page?

Upvotes: 0

Views: 681

Answers (2)

AmarH
AmarH

Reputation: 1

You are mixing v4 and v5 of React-Navigation.

createAppContainer is from v4 NavigationContainer is from v5

I would suggest you to fully switch to v5. It should fix your problem.

I don't understand why you need switch navigator. In your situation, you can use stack navigator.

Here's the example: https://reactnavigation.org/docs/stack-navigator

Upvotes: 0

MBach
MBach

Reputation: 1645

You cannot mix react-navigation v4 with v5:

Drawer.Navigator is using v5 syntax, and createSwitchNavigator does not exist anymore.

Upvotes: 1

Related Questions