javascriptreactjsreact-nativereact-navigationstack-navigator

React navigation params object empty


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?


Solution

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