2

I'm trying to pass some data between two screens in my app. I'm using for this route.params from react-navigation (here is the docs https://reactnavigation.org/docs/params/).

In the first component - home.js - I have an array with some data and FlatList component. Home.js displays data in my app correctly.

In the second component - reviewsDetails.js- I'm trying to display data /item.title/ from home.js but I have this error: "TypeError: Cannot read properties of undefined (reading 'item')".

I am looking for a solution to this problem

Here is my code:

home.js

import React, { useState } from 'react';
import {StyleSheet, View, Text, FlatList,TouchableOpacity} from 'react-native'


function Home({navigation}) {
    const [reviews, setReviews] = useState(
        [
            {title:"Zelda", rating:1, body:'lorem ipsum', key:1},
            {title:"Cruella", rating:1, body:'lorem ipsum', key:2},
            {title:"Voldemort", rating:1, body:'lorem ipsum', key:3},

        ]
    )


    return (
        <View style={styles.container}>
<FlatList
data={reviews}
renderItem={({item})=>(
<TouchableOpacity onPress={()=> navigation.navigate("reviewDetails", item)}> 

    <Text>{item.title}</Text>
  
</TouchableOpacity>

)}

/>

        </View>
    );
}

export default Home;

reviewDetails.js

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


export default function ReviewDetails({ route, navigation }) {
  const { item } = route.params;

  return (
    <View style={globalStyles.container}>
      <Text>{item.title}</Text>
    </View>
  );
}

And here is the error image

Codesandbox with source code: link

I will be grateful for any advice

EDIT.

Additional info :)

Here is also my navigation.js:

mport { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from 'react';

import about from '../screens/about'
import home from '../screens/home'
import reviewDetails from '../screens/reviewDetails'



const Tab= createBottomTabNavigator();

const AppNavigator=()=>(

    <Tab.Navigator>

        <Tab.Screen name="about" component={about}></Tab.Screen>
        <Tab.Screen name="home" component={home}></Tab.Screen>
        <Tab.Screen name="reviewDetails" component={reviewDetails}></Tab.Screen>

    </Tab.Navigator>
) 

export default AppNavigator;

and app.js

import React from 'react';
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import AppNavigator from "./navigation/navigation.js"

export default function App(){

return(

  <NavigationContainer>

<AppNavigator>
  </AppNavigator>  </NavigationContainer>
)

}

If its helpfull - I use version 6.0.2 of react-navigation/native and 6.0.7 of react-navigation/stack

MartynBrzoz
  • 101
  • 4
  • 11
  • How is ReviewDetails screen registered in the navigator? Also, I wouldn't expect the property `item` to exist on the params you are sending. Maybe you meant `navigation.navigate("reviewDetails", {item})` – windowsill Sep 17 '21 at 01:35
  • @windowsill, here is how I register my reviewDetailsScreen in my navigation.js : const Tab= createBottomTabNavigator(); const AppNavigator=()=>( This is how app.js looks: – MartynBrzoz Sep 17 '21 at 01:51
  • I was trying with this option which you suggest: navigation.navigate("reviewDetails", {item}), but still I have the same error in reviewDetails.js. If it helps, I use version 6.0.2 of react-navigation/native and 6.0.7 of react-navigation/stack – MartynBrzoz Sep 17 '21 at 01:53
  • Try this syntax instead `navigate({routeName, params, action, key})` – windowsill Sep 17 '21 at 02:05
  • Still the same error in reviewDetails: cannot read properties of undefined 'item' – MartynBrzoz Sep 17 '21 at 02:17
  • I edited my question and I completed it with navigation.js and app.js code. I Hope, now everything is more accurate – MartynBrzoz Sep 17 '21 at 03:55
  • Can you show the updated navigate call? Is it `navigate({routeName:"reviewDetails", params: {item}})` – windowsill Sep 17 '21 at 03:59
  • Sure, this is the update: ( navigation.navigate({routeName: "reviewDetails",params: { item }})}> – MartynBrzoz Sep 17 '21 at 04:33

1 Answers1

3

You have to pass params like this from home screen. Pass it in an object named data (This can be named as anything you want)

onPress={() => {
              navigation.navigate("reviewDetails", {
                data: item,
              });
            }}

And then get it on the next screen like this on reviewDetails screen

const { data } = route.params;
Mantu
  • 1,017
  • 1
  • 10
  • 21