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

React navigation params object empty – React native

When i try passing the params to my review screen it comes up undefined.

I’m using "@react-navigation/native": "^6.1.3" and "@react-navigation/stack": "^6.3.12"

App.js

import 'react-native-gesture-handler';
import { StyleSheet, Text, View, Button, TouchableOpacity, FlatList } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import Stack from './routes/stack';

export default function App() {
  return (
    <NavigationContainer>
      <Stack/>
    </NavigationContainer>

  );
}

Stack.js

import {createStackNavigator} from '@react-navigation/stack';
import ReviewScreen from '../screens/Reviews';
import HomeScreen from '../screens/Home';
import AboutScreen from '../screens/About';

const stack =  createStackNavigator();

const Stack = () => {
    return(    
    <stack.Navigator>
        <stack.Screen name="Home" component={HomeScreen} />
        <stack.Screen name="Review" component={ReviewScreen} />
    </stack.Navigator>
)}

export default Stack;

HomeScreen

  <View style={{width: 100, alignItems: "center"}}>
      <TouchableOpacity style={{backgroundColor: "#333", padding: 10, borderRadius: 15, margin: 10}}
       onPress={() => navigation.navigate("Review",
       {title:"Title Name"}
       )}
       >
           <Text style={{color: "white"}}>{item.title}</Text>
      </TouchableOpacity>
  </View>

Review.js

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

export default ReviewScreen = ({ navigation, route }) => {
    console.log(route);
    const { title } = route.params;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Review Screen</Text>
        <Button 
          title="Go to Home" 
          onPress={() => navigation.goBack()}
        />
      </View>
    );
  };

When I send the object from the home page to the review screen the destructed title throws an undefined error and when I log the route object it shows that the params value is undefined.

console logged route object

{"key": "Review-xxx", "name": "Review", "params": undefined, "path": undefined}

How can I get the params to pass onto the review screen properly?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had not properly installed the @react-navigation/native and @react-navigation/stack dependencies. Find them stated here and here respectively.


  2. 0

    here is the working code see it!

    App.js

    import * as React from 'react';
import { Button, View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } 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',{ title:"Full Stack Developer"})}
      />
    </View>
  );
}

function DetailsScreen({ navigation, route }) {
    const { title } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{title}</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