Question 294304 in React native Question posted in
The official React Native documentation can be found here.

I can't use an item in another screen in React Native

I’m trying to use a selected element from a dropdown in another screen, but when I access the other screen where I expect the selected element to be rendered, it gives me undefined:

This is the screen (Screen1) where I select the item:

<TouchableOpacity
onPress={() => {
navigation.navigate('Screen2', { fieldName: selectedField.name });
}}
>

I want after clicking to navigate to the other screen and display the selectedField.name value there.

Here is the other screen – Screen2:

const Screen2 = ({ route }) => {
const navigation = useNavigation();
const { params } = route;
const fieldName = params.fieldName;
console.log('Params:', params);
return (
<View>
  <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
    Selected field: {fieldName}
  </Text>
  <Button onPress={() => navigation.goBack()} title="Go back" color="#662044" />
</View>
);
};

I get the following error: "TypeError: Cannot read property ‘fieldName’ of undefined"
In Screen1 through console log I get the value of the selected field successfully, but in Screen2 it doesn’t work – gives me that the parameter is undefined

I can’t use an item in another screen in React Native

Tags:

2

Answers


  1. 0

    You can achieve this by updating your Screen2 like below:

    import { useRoute } from "@react-navigation/native";

const Screen2 = () => {
const route = useRoute();
const navigation = useNavigation();

return (
<View>
  <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
    Selected field: {route.params.fieldName}
  </Text>
  <Button onPress={() => navigation.goBack()} title="Go back" color="#662044" />
</View>
);
};
    Login or Signup to reply.
  2. 0

    Use useRoute hook instead of passed parameter, here is an example

    import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer, useRoute } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', {fieldName: '123!1'})}
      />
    </View>
  );
}

function DetailsScreen() {
  const route = useRoute()
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>{route.params.fieldName}</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search