React Native Tutorial #22 - Passing Data Between Screens
Vložit
- čas přidán 19. 12. 2019
- 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/iamshaunjp/react-n...
🐱💻 🐱💻 Other Related Courses:
+ Complete React Tutorial - • Complete React Tutoria...
+ React Hooks & Context Tutorial - • React Context & Hooks ...
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...
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
Everytime I have to learn something, one of your tutorials saves the day
this is one of the best channel on youtube. keep it up
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
the best video tutorial i have ever watched !!
Really good work.. And the way of explanation.. Amazing
Smash the like button. He really deserves.
Thanks Pari :)
Thank you so much , really appreciate your work
Thank you so much for these videos, help me a lot!
Really good videos, this is exactly what i wanted,many thanks
Nice, This helped me in my project, thanks alot.
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!
Great Job. My problem is resolved. Thanks!!!
Superb content as always ❤
traversy media and net ninja you are the best !!!!!!!! fantastic men !
this is mind blowing
Please do a series on React navigation 5.x.
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?
Thank you so much!
omg thank you very much, i love u so much
No problem Raphael, hope it was helpful! 😊
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??
amazing tutorial
Great videos, I will translate this tut to my language later if you allowed that, Thanks man 😊
you are awesome!
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.
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
Awesome
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
Your voice is really like Dr. James Grime from Numberphile channel.
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
thank you
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}
)
}
Thank you soo much
But if i want to send whole array of object then what we need to do?
More of a Angular Guy, but this series is just great..
Hey, when you want to do a flatlist, followed by another flatlist after chosing a item, how do you do that?
🔥🔥🔥
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
I didn't know Owen Jones was a web developer also! :D
wooooo 😍😍
So powerfull...
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".
I am using "@react-navigation/native": "^5.9.4" and "react-navigation-stack": "^2.10.4" and it works fine. route.params doesnt work
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
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
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.
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
can i use navigate.getParam when i pass data between screens in drawer? cuz it doesn't work for me...!
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!!
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?
I want to pass data through a drawer but this method doesn't work (using navigation.getParam() ) ! What should I do ?
Is there a way to pass those values using react navigation v6.x?
Co-asking, I have been stuck
how can we do same thing if we want to fetch data from database.??
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:)
😁😁😁😁
How to call function using different parms
this doesnt work anymore with react navigation v6
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}
);
}
facing error get.Param is not a function?
hi, How to pass the data between screens using Button ?
Literally shown in the video
*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)}
);
}
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
How can I pass lat to a screen from below json results
geometry:{location:{lat:"11.1",lng:"72.11"}}
Plss anybody 🙏😩😩
How to pass Images between screens using params route. react native
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') }
)
}
Why get.Param is not working? Showing error like "get.Param is not a function" and get.Param is undefined? thanks before hand
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
Can you pass a function?
If anyone is getting undefined error : reactnavigation.org/docs/params/
I am getting "navigation.getParam is not a function" error. How to fix it? Thanks
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 CZcams homepage :)
www.patreon.com/thenetninja
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 }
)
}
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()}