CODEWITHSUNDEEP
react-nativenavigation-drawerreact-navigation
Adam Arcaro
Adam Arcaro

Reputation: 461

React Native Navigation Drawer - Open page not in drawer

I am new to React Native development, so sorry if this seems obvious.

I have a new app that uses React Navigation Drawer as its main method of navigation. How can I have an onPress function within a page that navigates to a component that is not in my Navigation Drawer?

this.props.navigation.navigate('example') only seems to work for pages defined in the drawer.

My Drawer config: 

const MyApp = createDrawerNavigator({
  Interactive: {
    screen: (props) => <Interactive {...props} 
       list={[
    { name: "First" },
    { name: "Second" },
    { name: "Third" },
    { name: "Fourth" },
    { name: "Fifth" },
    { name: "Sixth" },
    { name: "Seventh" },
    { name: "Eighth" },
  ]} />,
  },
  Settings: {
    screen: SettingsScreen,
  },
},

I am pressing a button within "Interactive" that should navigate to a component that is not include in the config above.

Upvotes: 3

Views: 2832

Answers (1)

dentemm
dentemm

Reputation: 6379

You can have multiple navigators inside your application (and usually this is the case), and actually every screen you want to navigate to should be defined inside a navigator. Every key in a navigator can be a single Screen or another navigator (Stack-, Drawer-, Tab- or SwitchNavigator). 

const DrawerRoutes = createDrawerNavigator({
  // your drawer navigator implementation ... 
});

const MyApp = createSwitchNavigator(
  {
    Drawer: DrawerRoutes,
    Example: YourScreen, // this would be the screen you want to navigator to
  },
  {
    initialRouteName: 'Drawer'
  }
);

And now you can navigate to YourScreen by simply calling this.props.navigation.navigate('Example') from within your Drawer.

In a react-navigation application it is not unusual to have a large combination of nested navigators, but there is always one root navigator.

Upvotes: 4

Related Questions