React Native: Navigating between nested navigators from different components - reactjs

Question

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.

Answer 1

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.