React Native Tutorial #22 - Passing Data Between Screens
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- Hey gang, in this React Native tutorial we'll see how to pass data between screens when navigating from one to another (in our case from Home to Review Details).
----------------------------------------
🐱💻 🐱💻 Course Links:
Course files - github.com/iam...
🐱💻 🐱💻 Other Related Courses:
+ Complete React Tutorial - • Complete React Tutoria...
+ React Hooks & Context Tutorial - • React Context & Hooks ...
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...
![ลองสั่งของจากแอพ temu ถูกจริงหรอ?? [โกงไหมครับ ep.88 ] | DOM](http://i.ytimg.com/vi/RTcZSQTiDZw/mqdefault.jpg)
const [reviews, setReviews] = useState([
{ title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
{ title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
{ title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
]);
Thanks for this tutorial
Thanks
Great teamwork haha
thank you
The hero we needed
const [reviews, setReviews] = useState([
{ title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: 1 },
{ title: 'Gotta catch Them All(again)', rating: 4, body: 'lorem ipsum', key: 2 },
{ title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: 3 },
]);
The Key need to be a string, otherwise you'll get a warning. Or you can add this property to the Flastlist
keyExtractor={(item) => item.key.toString()}
Little update for React Navigate 5:
export default function ReviewDetails({ route, navigation }) {
const { title, rating, body } = route.params;
return(
{JSON.stringify(title)}
{JSON.stringify(rating)}
{JSON.stringify(body)}
)
}
you should pin it :) for me it says name is undefined because in my app one of the properties is name, why could this be? the rest of the code is exactly as yours and name is one of the properties :(
I don't see why you need JSON.stringify , it works fine without it
Nice, This helped me in my project, thanks alot.
Please do a series on React navigation 5.x.
import React from 'react'
import {View, Text, Button} from 'react-native'
import {globalStyles} from '../styles/global'
export default function ReviewDetails({route, navigation}){
const { title } = route.params;
const { body } = route.params;
const { rating } = route.params;
const pressHandler = () => {
navigation.goBack()
}
return(
{JSON.stringify(title)}
{JSON.stringify(body)}
{JSON.stringify(rating)}
)
}
Hey it worked but I have an error on an image. You got any solution to that.
Same here, you are using version 6 right?
Please any help is needed, I have been stuck
@@badbrother_2023 just write {route.params.title}, no need to use JSON stringify.
I am using "@react-navigation/native": "^5.9.4" and "react-navigation-stack": "^2.10.4" and it works fine. route.params doesnt work
Your voice is really like Dr. James Grime from Numberphile channel.
*Update*
getParams is not working anymore. Params will get in another variable "route".
export default function ReviewDetails({ route, navigation }) {
const item = route.params;
return (
{JSON.stringify(item.title)}
{JSON.stringify(item.body)}
{JSON.stringify(item.rating)}
);
}
Smash the like button. He really deserves.
Thanks Pari :)
There is no getParam method in "navigation" object anymore. Now you have to use props.route.params['propertyname']
What change to be done oh home.js
Thank you
traversy media and net ninja you are the best !!!!!!!! fantastic men !
For those who are working with a more updated navigation
export default function ReviewDetails({ route, navigation }) {
const { item } = route.params;
return (
{item.title}
);
}
route.params itself returns the item. No need to deconstruct it.
Thank you so much but no need to destructure item.
@bad brother_20 how did you go about yours, I'm stuck, using v6
Great Job. My problem is resolved. Thanks!!!
Great video,
Can you make a video on react native - redux - and passing data between screen/components
basically, i am stuck in my application where i have switch navigator at the beginning that is login page, after that, i have a bottom tab navigator which has 3 tabs in it and the problem is i want the username from the login screen to be passed to all 3 of the tabs in the bottom tab navigator. If you can help me out, it would be great.
this doesnt work anymore with react navigation v6
January 2022: it seems like to receive the params you now need to destructure "route" in addition to "navigation" in the ReviewDetails component, and then get the params by using something like this:
export default function ReviewDetails({ route, navigation }) {
return (
{route.params.item.title}
)
}
or else use {item} as a constant with "route.params" and then just use "item.title" to pull out the value (someone else mentioned this in another comment):
export default function ReviewDetails({ route, navigation }) {
const { item } = route.params;
return (
{item.title}
)
}
React navigation 5.
I am using the code formatter: prettier.io/
home.js
___________________________________________
import {
StyleSheet,
Text,
View,
FlatList,
TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
import { globalStyles } from "../styles/global";
export default function Home({ navigation }) {
const [reviews, setReviews] = useState([
{
title: "Zelda, Breath of Fresh Air",
rating: 5,
body: "lorem ipsum",
key: "1",
},
{
title: "Gotta Catch Them All (again)",
rating: 4,
body: "lorem ipsum",
key: "2",
},
{
title: 'Not So "Final" Fantasy',
rating: 3,
body: "lorem ipsum",
key: "3",
},
]);
return (
(
navigation.navigate("ReviewDetails", item)}
>
{item.title}
)}
/>
);
}
reviewDetails.js
___________________________________________
import {StyleSheet, Text, View, Button} from 'react-native';
import { globalStyles } from '../styles/global';
import React from 'react';
export default function ReviewDetails({ route, navigation }) {
const { title, body, rating } = route.params;
return (
{title}
{body}
{rating}
);
}
thank u very much
If anyone gets an error "Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`."
Change your item key values 1, 2, 3 to strings. So "1", "2", "3".
Superb content as always ❤
Really good videos, this is exactly what i wanted,many thanks
Great tutorial, I have a query, can we update route.params which we had received from screen 1 and then the updated (using ) one send to next screen??
How to pass Images between screens using params route. react native
Why get.Param is not working? Showing error like "get.Param is not a function" and get.Param is undefined? thanks before hand
Great videos, I will translate this tut to my language later if you allowed that, Thanks man 😊
Will this method work when both the screens are .tsx format, If not what method could I use for for the passing of data between 2 tsx files
Everytime I have to learn something, one of your tutorials saves the day
omg thank you very much, i love u so much
No problem Raphael, hope it was helpful! 😊
After clicking an item it shows an exception like this:
undefined is not an object (evaluating navigation.navigate)
I have the same problem, how did you resolve it? please let me know:)
this is one of the best channel on youtube. keep it up
this is mind blowing
Really good work.. And the way of explanation.. Amazing
Hey man, Thank you for this tutorial. Helped a lot..!
I request all viewers to support the video that helps you in any way. There are more viewers who might need to see these videos.
Best Regards..!
Cheers to all devs
For anyone who is watching this video after the v5 upgrade, use props.route.params.title etc. works the same
What change to be done oh home.js
import React from
import { StyleSheet, View, Text, Button } from 'react-native';
react';
import { globalStyles } from '../styles/global';
export default function ReviewDetails({ navigation }) {
return (
{ navigation.getParam('title') }
{ navigation.getParam('body') }
{ navigation.getParam('rating') }
)
}
Hi,
I am using react navigation 4.3.9. I have a setup where I have to pass data between a page containing react class component to a page containing functional component. I am using stack navigator for navigation. I am able to navigate to the second page using the command: that.props.navigation.navigate("Home", {title: 'text'}) but in the second screen when i try to access the passed data using the codes in the video I am getting undefined value for title. Can u please help me with this issue?
did you find a solution?
same error
I am experiencing slow performance issue when I pass large amounts of data. How could I still keep the amount of data transfer, but improve the slow performance?
Thank you so much , really appreciate your work
Is there a way to pass those values using react navigation v6.x?
Co-asking, I have been stuck
How can i pass just an id to do some fetch from an api every time i navigate to detailView? My id from route.params dosent update. So i make the.call to same endpoint every time, help!!
the best video tutorial i have ever watched !!
How can I pass lat to a screen from below json results
geometry:{location:{lat:"11.1",lng:"72.11"}}
Plss anybody 🙏😩😩
Thank you soo much
But if i want to send whole array of object then what we need to do?
facing error get.Param is not a function?
can i use navigate.getParam when i pass data between screens in drawer? cuz it doesn't work for me...!
I want to pass data through a drawer but this method doesn't work (using navigation.getParam() ) ! What should I do ?
If anyone gets an error "TypeError: navigation.getParam is not a function.", destructure route into the component and use route.params.KEY instead
e.g.
export default function ReviewDetails({ route, navigation }) {
return (
{ route.params.title }
{ route.params.body }
{ route.params.rating }
)
}
Awesome
how can we do same thing if we want to fetch data from database.??
Hi, Anyone who is struggling, upwards React Native Navigation v5, getParams is not available in navigation prop, there's a new prop named 'route' and u can get the data by calling the route.params.. Cheers
return (
Review Details
{route.params.title}
{route.params.rating}
{route.params.body}
);
}
If anyone is getting undefined error : reactnavigation.org/docs/params/
This method still works with Drawer Navigation, or atleast that was the only way I found to pass params between screens. Using route.params would be "undefined" and crash the app. So thank you for this video!
Can you pass a function?
How to call function using different parms
Hey, when you want to do a flatlist, followed by another flatlist after chosing a item, how do you do that?
More of a Angular Guy, but this series is just great..
Thank you so much for these videos, help me a lot!
22/07/2021: Read...
export default function Details ({route, navigation}){
const { titleProduct, priceProduct, descriptionProduct, detailsProduct } = route.params;
Inside the braces { } after 'const' you have to use the same names that you used in Home.js inside the useState object.
return(
{titleProduct}
{priceProduct}
{descriptionProduct}
{detailsProduct}
)
}
Did you changed something in home.js? When Im trying to use it I have an error "title is undefined"
@@bluberxx do u have a repo? i can check for u, new versions of react native have a lot changes
@@challenges8010 unfortunately if I add link to my repo, my comments are deleted
. Here is my home.js:
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 (
(
navigation.navigate({
routeName: "reviewDetails",
params: { item }
})
}
>
{item.title}
)}
/>
);
}
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 (
(
navigation.navigate({
routeName: "reviewDetails",
params: { item }
})
}
>
{item.title}
)}
/>
);
}
and my reviewsDetails.js
export default function Details ({route, navigation}){
const { title } = route.params;
return(
{title}
)
}
I would be gratefull for your help
Shaun Hello! Your content is awesome =) keep up a good job! Just a lil question. Is it possible in near future u will make an updated Angular content?
I didn't know Owen Jones was a web developer also! :D
I don't see a link to your Patreon. Dude, just shut up and take my money!
Haha, thanks so much dude, it's on the Net Ninja TH-cam homepage :)
www.patreon.com/thenetninja
🔥🔥🔥
Thank you so much!
you are awesome!
amazing tutorial
thank you
hi, How to pass the data between screens using Button ?
Literally shown in the video
So powerfull...
😁😁😁😁
wooooo 😍😍
i have an error can't find variable navigate how can i solve it
Same error :(
They have updated the command. Check this out - reactnavigation.org/docs/upgrading-from-4.x/#navigate under "No more getParam". Import "route" instead, and change it to {route.params?.title ?? 'defaultValue'} and it will work. Good luck!
@ thanks i had same error but i was able to get rid of it with your help. The next issue I'm having is the next screen doesn't display the titles it just displays the defaultValue. can you help me?
@André Persson i just figured everything out ..solved my issues . thanks alot
@ how and where do you import it? please let me know
I am getting "navigation.getParam is not a function" error. How to fix it? Thanks