CODEWITHSUNDEEP
reactjsreact-native
GrapeJam
GrapeJam

Reputation: 181

React Native: Navigating between nested navigators from different components

I am building an app with one main tab navigator, and then several nested stack navigators within it. All of my navigators are written within the App.js file. The main tab navigator is working fine, however when I attempt to navigate into one of the nested stack navigators I get a TypeError: undefined is not an object (evaluating _this.props.navigation) error.

Here is an example of my code below:

App.js File

    import React from 'react;
    import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import Home from './src/screens/Home';
    import Settings from './src/screens/Settings';
    import Privacy from './src/screens/Privacy';

    const PrivacyStack = createStackNavigator();
    const SettingsStack = createStackNavigator();
const AuthStack = createStackNavigator();
const MainStack = createStackNavigator();
    const Tabs = createMaterialBottomTabNavigator();

    const TabNavigator = () => {
     return (
    <Tabs.Navigator
    initialRouteName="Home"
    <Tabs.Screen
    name="Home"
    component={HomeStack}
    />
    Tabs.Screen
    name="Settings"
    component={SettingsStack}
    children={this.SettingsStack}
    </Tabs.Navigator>
    )
    }

const AuthStack = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="Auth"
      component={Auth}
    />
  </AuthStack.Navigator>
);


    const SettingsStackScreen = () => (
      <SettingsStack.Navigator>
        <SettingsStack.Screen
          name="Settings"
          component={Settings}
        />
        <SettingsStack.Screen
          name="Privacy"
          component={PrivacyStack}

        />
      </SettingsStack.Navigator>
    );

    const PrivacyStack = () => (
      <PrivacyStack.Navigator>
        <PrivacyStack.Screen
          name="Privacy"
          component={Privacy}
        />
        <PrivacyStack.Screen
          name="Notifications"
          component={Notifications}

        />
      </PrivacyStack.Navigator>
    );

const App = () => {
return (
    <NavigationContainer ref={navigationRef}>
      <MainStack.Navigator>
        <MainStack.Screen name="Tabs" component={TabNavigator} />
        <MainStack.Screen
          name="Auth"
          component={AuthStack}
          options={{gestureEnabled: false}}
        />
      </MainStack.Navigator>
    </NavigationContainer>
)
}

Settings.js File

import React from 'react';
import {TouchableOpacity} from 'react-native;

const Settings = (navigation, props) => {
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('PrivacyStack', {screen: 'Privacy'}
)
}
</TouchableOpacity>

export default Settings

Privacy.js File

import React from 'react';
import {TouchableOpacity} from 'react-native;

const Privacy = (navigation, props) => {
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('Notifications'
)
}
</TouchableOpacity>

export default Privacy

After the user has passed auth, they are taken to the MainStack which has a bottom tab navigator with a Home screen option, and a Settings screen option. This part is all currently working fine. However once I click the <TouchableOpacity> on the Settings screen I get the error.

I suspect it must be an issue with the way I am using this.props.navigation however I have not managed to figure out the problem through my own troubleshooting. Any help would be hugely appreciated.

Upvotes: 0

Views: 87

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You are using functional component so you can use the navigation like below

const Settings = (props) => {
return (
<TouchableOpacity onPress={() => props.navigation.navigate('PrivacyStack',

'navigation' is passed as a prop and will reside inside props argument.

Upvotes: 1

Related Questions