CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Shashika Virajh
Shashika Virajh

Reputation: 9467

React navigation nested navigation doesn't work

Im creating a sample react native app. Here I use react navigation. This is my code.

app.tsx

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";

const Stack = createStackNavigator();

import StackOne from "./appNavOne";

const MainStack = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="stackOne" component={StackOne} />
  </Stack.Navigator>
);

const App = () => (
  <NavigationContainer>
    <MainStack />
  </NavigationContainer>
);

export default App;

appNavOne screen

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

import StackTwo from './appNavTwo';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Profile' onPress={() => navigation.navigate('Profile')} />
  </View>
);

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Settings' onPress={() => navigation.navigate(StackTwo)} />
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const StackOne = () => (
  <Stack.Navigator headerMode='none' initialRouteName='Home'>
    <Stack.Screen name='Home' component={HomeScreen} />
    <Stack.Screen name='Profile' component={ProfileScreen} />
  </Stack.Navigator>
);

export default StackOne;

appNavTwo screen

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

const Stack = createStackNavigator();

const SettingsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go to Settings' onPress={() => navigation.navigate('Settings')} />
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const NotificationsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button title='Go back' onPress={() => navigation.goBack()} />
  </View>
);

const StackTwo = () => (
  <Stack.Navigator initialRouteName='Settings'>
    <Stack.Screen name='Settings' component={SettingsScreen} />
    <Stack.Screen name='Notifications' component={NotificationsScreen} />
  </Stack.Navigator>
);

export default StackTwo;

This line on appNavOne screen, give me an error saying The action 'NAVIGATE' with payload undefined was not handled by any navigators.

<Button title='Go to Settings' onPress={() => navigation.navigate(StackTwo)} />

What am I doing wrong here?

Upvotes: 2

Views: 2494

Answers (1)

SuleymanSah
SuleymanSah

Reputation: 17858

You didn't used StackTwo in any navigator.

1-) add StackTwo to the MainStack:

const MainStack = () => (
  <Stack.Navigator headerMode="none">
    <Stack.Screen name="stackOne" component={StackOne} />
    <Stack.Screen name="stackTwo" component={StackTwo} />
  </Stack.Navigator>
);

2-) Change the navigation.navigate like this in Profile:

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button
      title="Go to Settings"
      onPress={() => navigation.navigate('stackTwo', { screen: 'Settings' })}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);

Also to understand if navigation occurred, change some text inside the Settings component.

const SettingsScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>HERE GOES SETTINGS!!!</Text>
    <Button
      title="Go to Settings"
      onPress={() => navigation.navigate('Settings')}
    />
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
);

Upvotes: 3

Related Questions