React Native Tutorial #22 - Passing Data Between Screens

Key Takeaways

okay then gang so we've seen now how to navigate between two different screens and in this video what I'd like to do is actually start to pass data between that navigation so from the home screen to the review detail screen now the first thing I've already done is I've got rid of the button and the on press Handler up here which we just used in the last video to take us to the other screen the review detail screen and I've also deleted the button and the unpress handle up from this as well because we're not going to use those buttons anymore this time what we're going to do is use some data which I've already pasted in as a bit of state and I've already imported you stay up here and we're going to cycle through that data output a list and then we're going to attach some kind of on press handler to each item in that list when we click on that it passes that review data through to the review details screen okay so this data right here Const reviews and set reviews is equal to use state which is an array of objects each object is a single review and each object has a title prop which is the review title a rating which is an integer a body which is the review details not much in it but that doesn't really matter and also a key which is a string remember when we use a flat list it's automatically going to look for that key property so that's what we are going to do now a flat list now we have our view which has this style of container and inside that I'm actually going to delete this text because we don't want that home screen actually to be there for real so I'm going to delete that and now create a flat list instead so we need to import a few things first of all I'm gonna get rid of this button we don't need that anymore and we do need flat list we're also going to be using touchable opacity in this as well so that we can click on each item so let me import that switchable opacity and I think that's it okay so let's go down here and do this flat list so flat list like so and remember we need a couple of different props on this flat list the first one is the data prop which specifies what data we want to cycle through and that's going to be this thing right here reviews so let's copy that dude and paste it in and then the next thing is going to be the render item function so that is going to be equal now to a function and that function is going to return some JSX now instead of these curly braces let's just put normal parentheses because at the end of the day we're just returning something here on the same line and the JSX is going to go in between those now remember we have access to the item by D structuring here so we can grab that by using curly braces then item so now every time we output something we're going to have access to the individual review via this item right here okay now inside this we want to return first of all touchable opacity component and then we're going to embed a text component inside that so the text first of all is going to say item title so we're basically taking the current item and grabbing the title property yeah and then this touchable opacity and by the way let's add some styles to this text I'm going to say style is equal to global styles and then on the global styles remember we had a title text property so we're going to use that for this now the touchable opacity right here we need to add an on press handler to that so this on press handler I'm just going to write the function inline will be an anonymous error function and inside this error function what do we want to do well we want to use this navigation object to navigate to the review details so let's say navigation dots navigate like so and then remember we pass a string in here to say where we want to navigate to that is going to be review details like so now we also want to pass some data through and what we can do is pass a second parameter into this navigate method and that second parameter is going to be an object and this object represents the different parameters or data that we to send to do review details now I could add any number of key value pairs so for example I could send a name property through and say Shawn I could also send like an age property through which could be 23 as many as I want they're all contained inside this object which represents the parameters of data we're sending to the review details page now we already have an object that we want to send to the next page and that is this thing right here item because remember the item refers to this entire object for every iteration so for every iteration we can send the item through so that when we click on the item we then go to the review detail screen and we have access to that particular item data and it's going to have all of these properties on it title rating body and key okay so that's all that done and if we save this let's just make sure we get no errors first of all over here and we don't we see these different things and if we click on one of them then it does go through to the review detail screen and we're sending that data through this item but we're not doing anything with it in this screen yep so we need a way now to accept that data and do something with it so let's now go to the review detail screen and down here we can output whatever data that we get back so instead of just outputting this we can output for example the title or the body or the rating now the way we do that is by using this navigation property up here that we get from the props so let me output some data we're going to say navigation then we use a method called get per am okay now this get per am method gets us a particular parameter from this object remember this object has different keys and values in it so we want to get one of these different parameters the title the rating the body etc so say for example we want to get the title we just say we want the title from that object and now it's going to grab that and it's going to output it right here in this text widget so if I save this now well let's have a look if this works so let's click on this one got to catch more again and we see it right there if we click on a different one then we can see it there so these all work right now instead of just showing the title let's show everything so I'm going to duplicate this and replace the title right here with body because we have a body property on this data right here and we also have a rating so let's output the rating as well so let's save that now let's see if this all works so let's click on one sell them and we can see all of the details right there click on another and all of the details are there and this one and all of the details of their awesome so this is all working now so that's how we send data when we're navigating from one screen to another we use a second argument and that argument is going to be an object the object should have different key value pairs in it and each key and value pair is a particular parameter we then grab those parameters by using the navigation object that we get from the props and we use the get parameter to get a specific parameter from that object okay simple enough now I know the design of this just not great yet but we are going to come back to that later for now what I'd like to do is customize the header options a little bit and we'll see that in the very next tutorial