Accessing navigation parameters Expo-Go

user_12871760 0
Viewed 272

I have got "Screen1" where I create a string "blabla". According to the documentation, I can set it as a navigation parameter:

export default function Screen1() {
  const navigation = useNavigation();
  navigation.navigate("Screen2", { item: "blalbla" });
  return (
    <View>
      <Text>Render some stuff</Text>
    </View>
  );
}

On Screen2 I should be able to access it with:

export default function Screen2({ route, navigation }) {
  const { item } = route.params;
  console.log(item);
  return (
    <View>
      <Text>Render some stuff</Text>
    </View>
  );
}

Now, this returns:

TypeError: undefined is not an object (evaluating 'route.params.item')]

I also tried some other examples without success.

Referring to React-Native documentation: https://reactnavigation.org/docs/params/

react-navigation expo react-native reactjs
2 Answers

I've created a Snack. Check this out.

Follow below steps to solve your problem

Create a Folder called navigation where your App.js is located.

Then inside this folder create a file called AppNavigator.js

Inside AppNavigator.js paste this

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

import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
    </Stack.Navigator>
  );
}

export default AppNavigator;

Now create another folder called screens where your App.js is located

Inside this folder create your two files Screen1.js and Screen2.js

They should look like this

Screen1.js -

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

function Screen1({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Screen 1</Text>
      <Text onPress={() => navigation.navigate('Screen2', { item: 'blalbla' })}>
        Press ME
      </Text>
    </View>
  );
}

export default Screen1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Screen2.js -

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

function Screen2({ route, navigation }) {
  const { item } = route.params;
  return (
    <View style={styles.container}>
      <Text>Screen 2</Text>
      <Text onPress={() => navigation.navigate('Screen1')}>{item}</Text>
      <Text onPress={() => navigation.navigate('Screen1')}>Press ME</Text>
    </View>
  );
}

export default Screen2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Now you should see route parameters inside Screen2

user_131706360

navigation object is probably not present in the screen

change Screen1({ navigation }) to Screen1(props) and do console.log(props) to check if you see a navigation object there

user_144125050
Related