Creating our profile modal screen & adding back button with React Native

A free video tutorial from Rusty Zone
Experienced full stack web & mobile developer
Rating: 4.2 out of 5Instructor rating
5 courses
13,318 students
Creating our profile modal screen & adding back button

Learn more from the full course

Build the original Instagram with React Native & Firebase

React Native User Authorisation & Database with Firebase

06:33:27 of on-demand video • Updated December 2018

Make an app ready to be published onto app stores
Understand how you use Firebase with React Native
Upload photos in React Native to Firebase Storage
Build apps that require user authorisation
English [Auto]
Welcome back. So now we're ready to start adding in the extra screens for showing the profile. Just here when you click on the H photos user and the comments. So if you click the more comments you will open up a modal Just head to V and the comment threads just hate. So why didn't these new pages need to change the way we have just file structure just a little bit. So to start with we're going to go up here to avoid importing the tab navigator from re-act navigation to actually import a stack Navigator as well. So we do this by typing in create stack navigator should have spelled correctly so this will import the stack navigation options as well. So what we need to do is change this name here from main stack to tab stack. So this would be tab icons down here. So you don't want this to change. We're going to add a new section to have the actual main stack. Just make sure you spell this again so it will add another Konst as main stack and this would be a call to create stack navigator and then inside here we're going to set all of our screens so we need a homescreen to be half stack. So this will be the page that is the user is taking too straight away. So that is exactly the same as what we used for the type navigator we just say home. And then the screen tab stack. So actually passing through this whole tab navigates that we've created just here as the screen and what we also do is create a user screen. So this will be worth sharing. If you tap onto these users profiles so this will be call this user profile out there. In a moment. And import this file to create a page for this. And also comments this we screen comments so we're almost done we just have to add in a few settings just here. So we need to set an initial rate. So this is the page name that the app opened up onto us. So for us this will be home. So we're going to tap that. We also need to set a mode. So there are a couple of moments built into react navigation. And the one we want to use is Modu. You can check out all of the different options on re-act navigation so you can find all of the options on here in API reference. You can see everything in the stack navigate you look up you can see the different modes and there's cart or model slightly different. We're going to be using Modu for this. So he's talking mode which is. And then the head in my head. We're going to be creating a header inside you guys so we don't need to worry about that at the moment. This would be the pop showing on the top here. We want to actually create headers inside of our actual files themselves. We don't want to say it doesn't work to say none. So we're almost done here. We just have to create these files. So for each of these files just copy and paste the line up here. So this would be user profile and comments. So we have user profile on here and comments just to. So first you create the user profile. Now what we're going to do is just duplicate the profile on screen. And we're going to make a couple of changes to it. So if we just look into hey right click duplicate and then we say user profiles make sure this matches the file name in here. So use a profile. That's correct. And then for the Comins file and now we're just going to copy and duplicate the upload file. So we just change this to comments and close this and close these two files. Now certainly interesting Christian says just make sure that we have these files here available. So as you can see here because we've changed our main stack and tabs stack down here we were actually calling the main stacks that we were using before we don't actually have to make any more changes because it's already linked up. So if we go ahead and say this now everything should look the same. So we have a profile page upload page and F-8 what we're going to do now is actually make a make this text into a button so it can open up the user profile. Now at the moment it's going to be just the same screen. Hey So once we see this I open up with and make a few changes here's what actually fixes that uses the tiles. So it's going to have B.J. X-File and find this line a case what we're looking for is the item or the component just to test component. So that going to Nesle this inside of a touch for pasty. I first need to check do we have this important which we don't add this up here just say that take us back and get some scroll back down that line we're working on that we're going to at such a pace too just to be sure to close this off so just indented slightly then we say in here it's all press the same as we did before in the previous video. So Curly brackets bottom ones create a function in here that we're going to call this prop's navigation and navigates user. And then we actually want to pass through the user id so that we can use this in this page. But for now we're going to leave it at that and just save it. So if we tap on this now because it opens up this profile one problem we have straightaways is no way of actually getting back. We could swipe down which or move it but we need to create a much clearer way of adding the button just to the user can go back to changing the design slightly because we can edit someone else's profile. So going to make a few changes next. But at the moment we want to have a way of actually passing through the user ID through to the screen. So to do this me to go up to a function where we're fetching to users details just here. And just here where we're sending back the users using I'm going to add a new attribute just to the code or for ID. I mean literally going to pass in the user ID that we are using up here. So if we add this just to and then go back down. So when we say navigate where it says use it just to have to come up open up high curly brackets. This will allow us to parse in some parameters through to the next page. So we're going to say a user ID is item offer ID so that you'd be able to use this data in this profile page that we've created. So if we just open this here so we have to use this data inside this page we can go fetch that users profile information. So that's how we proceed through just to see where it says user just to explain this little bit more. This user navigation don't navigate a person to use it just this correlates to the name user just it. So that's why we go to this screen rather than the screen. So if we make changes on this page we show when the user clicks here. So first let's just change this design a little bit and go back to Boston. First of all let's just say if this file check this was still. So it's it's working. We're passing this data through so we can actually start to use this on the profile page. So the first thing we want to change is remove this log in check. In the States just to say loaded and this will still be false to begin with. We have removed all of this code just to add the checks the if the user is locked in on all or most I will soon be creating a new function just to check the parameters. So this will be looking to see what data has been sent through just here. So this is what is a function of a useful interest here. I don't want to create another function to fetch the information of this user so that profile picture that user name and that name. So we're passing a user right to each said of them around this function. In a moment I would also want to check the parameters as well. So what we need to do in the component at Mount is we can move this picture to literally say this check perhaps because what we're going to be doing is making the code to this function once we that she fetched the user id and this function just to. So now just a couple of changes to the actual UI itself. So we can start by removing this check just to so we don't need to worry about if you're not or not. So can get rid of this and we can get rid of this just to I'm actually going to add a new check to see if the actual user data has been loaded yet. So it works exactly the same way. I will say this state loaded is false. Then we want to say send a message on the screen so the page is loading just a simple message like this and then if it's not so if the page if state on moated is true would display a profile. And again we want to remove these buttons just to like this. So if we say this to begin with because we're not actually changing the logo state it should just stay on loading So as you can see here we haven't sent this text or anything yet. So it's just us and loaded and it's not changing. That's what we want. Now what we're going to do next is actually write out these functions just to start with her work on the premises function. So what we're going to be typing in here is a check to the navigation prop just head to fetch the states that we're sending to the page. So I stop by say creating a new variable called parameters or parameters and it be this dog prompts navigation stay perhaps and then we'll first check if this exists. And then we would check if the actual user id just exists as well. So like that's And if that exists we can now set the user id into our states and then run the set to use the info function. So this just means we can reduce it further down the page if we need to. OK so what we're doing first is actually add in and I'm just here so we can see what is actually being Basri. So if we say this and top on this pattern again we should get an alert telling us this uses ID that we ask this ID here. Let's check if it looks up with this photo in the database. So if we check in here we have our photo ID and the author here is this user ID. So we're looking to users. There again is that user ID and has this information. So remember the security rules before we were allowed to access the profile picture the name and the user name. So in effect to use the info function we're going to actually get this information and then play it on this page. So we'll start first by creating a reference to this like we did in the previous file. So we're saved. That's because this is so we can use that throughout this function without worrying about if we have reference to the actual object on them. So we start by coding the database wrath uses and that we actually say child user id just too which is why we need this POS 3. And then we're going to get the actual user name we want this once just to update each time. It once and then we'll set this to be of the value of a snapshot. Create a function and then wait for the callback. So again I was did in theory the fate page when we fetched the dates up pay for first check if they still exist so Konst exists. It's a snapshot of you. So we first check if this is empty and if it exists data it could snapshot. So from here we can assume that this data does exist and it's a call to data which is spelled that correctly. So if we indent this fine just here we can now set. So we that's because we set this reference just to set stakes using name equals data. One more thing before we're finished with this block of code to fetch the user name. We just need to make sure we're checking for any errors. So to do this we go down here just before this closing section here. It's a catch. Ira concer lock error just so we have a understanding of anything that could be going wrong still in development. It's another way of writing this. We're going to copy this and paste it and paste it again because we need to use this for the name and profile picture. So we just change these as well. And on this last one we just going say load it is true. So this means this data is now fetched and we can use it inside out. Now in this example we're making three separate calls to the database. Now normally we wouldn't be doing this but because of the way we are structured our profile here what the profile and more the security roles we have to actually fetched it fetch the data like this. Otherwise it will come back in with an error because we can't fetch the whole user object unless we are that user. So it's just more work around just effectless data. And I've done it this way just to show you the different ways that the security rules work. So normally when you're building an app you would have the users object and the user and then maybe you would have the private data or just outside it like this and then an object in here called public and then the name and other data in here. So you can just say for such Puplick then fetched that all in one go. But in this example we've just kept it simple and we have data like this. So again back to this function. This function is all it needs to do. So down here now we actually use these user name name and picture of a downhere. So we're start this just get us simulate Tabac. So I start by first changing the name would be the name that we now have from the States. So this does state dog name. And again the same thing to use name. Those states don't use name and then for the actual profile picture just to just say this state have it's all. So it's that simple. We say this now and click on a button over here or touch flip pasty and it opens up with the information from the database. Now we have two symbols just here. So these name in the database must yet it has one already. Now these profile pictures what you notice is each time we open up the picture they should be different each time. So you click it there and they say it changes. Now this is just because of the image API we're using his example profile picture. But what we're show later wrong is actually uploading images and saving them to our own storage by firebase So this is how we act. I use a profile. So one more thing before the end of this video we're just going to add a button just for the music to get back out and just wipe down like this. So let's get back to our just too. And there's a few ways you can do this but probably one of the easier ways is to create another touchable or pasty in here. And inside this book it had a text component which was saying go back and then it would say on Chris similar again to what we've done in other pages. So I cut the brackets create function and then we'll call this Propst navigation for this code. We don't call navigate we just say go back like this. So if we say this we haven't done the design yet if we say this and have a quick look we haven't closed this software so we missed this some reload. If we open up the profile you can see it has got back. If we click on that it closes it down. But let's just adjust this dialing a little bit more so that we have to go back in the left over head and we can even create space in the right if we want to add something as well so let's adjust this because that looks a bit jumbled up in my SO to start with we're going to add some more styling in here. So where we have a line item says fine but we also want to say justified content space between. This works well to us have abdomens pushed. I decide to stay. So we have one on the left one in the middle and one on the right. Just in case you want to add another button or something like that here in the future so we go in here. I just had another text component just here but in a question mark. Now let's just make sure that the weights of the one on the left and the one on the right are the same. So I just copied this for the touchpad a pasty as well. So we save this and have a quick look. So you can see it is happening here is the flex direction default for this the compound interest here is to set everything in a column where we wanted to change this to appear in a right. So we just type in Flex direction. Right. So if we say this now. So we have a flex direction we have justified content which aligned swings in a in right like this across and everything is centered. So we have a quick look you can see it's position now like this. So at the moment we don't actually want this item here to have any information at all to get rid of that. And let's just make this bottom stand out a little bit like some styling to this element. So I have a full size 12 font weight of boat and just a little bit of padding on the left hand side because going up against the edge of the screen. I say 10 putting left. So if we say face and open up there we go. This looks a little bit better now. So you can easily click this button and it stands out because it's Globus smaller text but it's bold. And then we could easily add other buttons and things over here as well. So in the next video will look to add comment screen which recreated the file for audio and also create a button here to actually open up. So his comments as well.