Build the original Instagram with React Native & Firebase | Rusty Zone | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build the original Instagram with React Native & Firebase

teacher avatar Rusty Zone, Experienced full stack web & mobile dev

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

52 Lessons (6h 31m)
    • 1. Intro

    • 2. Setup Firebase project

    • 3. Setup React Native app

    • 4. Connect firebase project to react app

    • 5. Intro to firebase auth

    • 6. Using email and pass to register user

    • 7. Check if user is logged in and how to sign out

    • 8. Using Facebook login

    • 9. Using email and pass login with TextInput

    • 10. Intro to firebase database

    • 11. How to set, update and delete data in firebase

    • 12. Fetch data from the database

    • 13. Firebase security rules

    • 14. Structure Firebase database

    • 15. Intro to firebase storage

    • 16. Intro to firebase storage securty rules

    • 17. Create and setup app from the command line

    • 18. Adding base components to each screen

    • 19. Starting to setup the feed screen

    • 20. Adding a FlatList to the feed screen

    • 21. Adding some styling to our FlatList

    • 22. Create Firebase project and connect to our app

    • 23. Structure database for project

    • 24. Begin to make calls to the database to fetch information

    • 25. Update our FlatList to user data from our database

    • 26. Add security rules to app (part one)

    • 27. Add security rules to app (part two)

    • 28. Check if user is logged in

    • 29. Make sure user is logged in whilst creating Profile UI

    • 30. Building out Profile UI

    • 31. Creating our profile modal screen & adding back button

    • 32. Adjust comment file & add button to open comment screen

    • 33. Building the upload screen part one

    • 34. Building the upload screen part two

    • 35. Building the upload screen part three

    • 36. Building the upload screen part four

    • 37. Building the upload screen part five

    • 38. Create function to process photo and add to feed

    • 39. Update FlatList to display uploaded photos

    • 40. Create component to show list of photos across different screens

    • 41. Building comments screen part 1

    • 42. Building comments screne part 2

    • 43. Building comments screen part 3

    • 44. Building comments screen part 4

    • 45. Profile to fetch details from database

    • 46. Add edit profile form to profile page

    • 47. Create save profile function

    • 48. New component to contain login and sign up

    • 49. Add login and signup buttons to component

    • 50. Create login and signup functions

    • 51. Create user object and test signup function

    • 52. Final adjustments to the app

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course you we cover all the steps from creating an app in the command line all the way through to build an app very similar to the original Instagram.

  • We will start by quickly looking at how to use Firebase User Authorisation. Using email and password or Facebook login.

  • From here we will then cover the Firebase realtime database and look at how to set, update and delete data.

  • Next we look at fetching data from the database and look into the Firebase security rules and how to structure your firebase database, before we look into firebase storage.

  • Now it is time to start building a real app with these techniques. We will build an app based on the idea of the original Instagram, the next sections of the course will cover each step to create this app.

At Rusty Courses we regularly  update our courses with new & updated content to keep things fresh.

Enroll now and get started on your journey to build mobile app for both Android and iOS today!

Meet Your Teacher

Teacher Profile Image

Rusty Zone

Experienced full stack web & mobile dev


RustyZone - Learn how to develop websites, blog and apps with RustyZone.

Our aim is to help create courses anyone can follow to enable them to start a career in app or website development.

We are always happy to help with any course suggestions and try to answer as many questions as we can for you.

Get started with one of our classes today!

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Intro: Hello and thank you for enrolling on this brand new rustic courses. Course on React native with firebase. In this course, we're going to be building an app that's very similar to the original Instagram, so users can upload photos on. Actually make comments on these photos as well, along with looking into how you can actually do log in and registration using fire base with Red Native. So this course would take you old away from having a basic knowledge off. Right native all the way through to building an app will be very similar to the original instable. If you have any questions throughout the course, please take a look at the Q and A Section Western one. What. I've already asked this question or feel free to send me a message, and I'll actually look to respond as soon as I can to help you on this. Thanks again for enrolling in this course. Andi. Let's get started with the first module 2. Setup Firebase project: welcome to this new module. So in this module, we're gonna be first setting up firebase Project on. We're also gonna be creating our react native project in the command line that will use this firebase absolutely set up on the actual A. P I details that we need. So first, you just want to go to firebase dot google dot com and you'll find the landing page off the fire base service. So just has details, but all of the different features that fire base has to offer. But we don't need to know about any of this at the moment. He's one scroll to the top and look for the in the right hand corner. If you're logged in already with your Google account, it will say, Go to console. And if no, it would just give you an option to log in. So you just click on the console button in the top right corner at your Google details or set up a Google account if you don't already have one and then once you're logged in, you just click on Go to Console and you'll open your projects page. So if you don't have any projects That's fine. You just want to click on add project just here, which should be the first button on the page. So once you click on to here, it would just ask you for your project name. So in here, we're just gonna call this my first project. And it would add in a unique I d for you there. So once you're ready, just have to accept the terms and conditions off fire base. Once you've clicked that it will allow you to create your project. You can also change the location off your your server. But it's really doesn't make too much of a difference, especially for your your test project, which is gonna be So for now, that's all you need to set up and then just click on Create Project. That's what has taken moment, Teoh load and set everything up. I know. Then redirect us to a project page once we click. Continue. Okay, so this is the dashboard off fire base. So, as you see at the moment, it's saying what plan we're on now. This spark plan is free plan. You can find more details about what each plan actually gets you down here by clicking upgrade, but again, at the moment you don't need to worry about any. Any of thes details swept the moment. We want to actually find settings for all of the different A P I keys for each of the settings. So for logging into a database, adding new users and things like this. So as you can see, when you click on this settings to go up here, it'll give us a project settings. If we click on this, he then want to scroll down to where it says your naps on cook on this thing. Here it says, add five ways to your Web app. So even though we're actually gonna be created an app for IOS or enjoyed right at this time because we using React native is based on JavaScript. So if we click on add fire based your Web app, you open up this snippet of code just here, which has all of the different keys and domains that were going to be using. So if we just copy this for now, this is what we're going to be needing for the next steps in the next videos. So this copy this now and you'll be ready to continue 3. Setup React Native app: So now that we have firebase AP, I settings that we need to continue in this video, we're going to actually creating the project in the command line that will allow us to actually start testing the different ways we can log in with fire base. So first, which will navigate to a folder where we're gonna be creating this project So you can do this by using the CD command in the terminal. So I'm using the hyper terminal here. You can use any terminal stuff what you want. So here I've navigated into the folder that I keep all of my projects. So over I'm gonna do now is creating new directory, which use em Que D I r in the directory name. So, for this, I'm just gonna type in react Fire base. Uh, so just like this on, as you can see, it's made a and me project just here and then going to use CD, which moved into this folder, type in the photo name, and then check him inside this directory. This is how we just created a new folder. Andi moved into it. The next we need to do is actually used the react Native Command line utility to actually create an app in here. You can find this on the official react native docks. So I so you can see you can get started. So in this page you'll find all of the details you need to start using this commode line utility. So if you haven't got it installed already, he just need to run this command first. But as I've already got it installed, I can go ahead on straight way. Use this command. So it's the command itself is create react native app and then you type in the name of your project. So if we go back to the terminal, will using and paste in this command I'm just gonna change this to react five base and then press enter. This will basically set up all of the dependencies. We need to start a new project. Okay, so once this is completed, you're see output similar to this. So on your screen. If you haven't got yon installed, it will say npm. So NPM start MPM run on things like this, but I am beyond is basically the same thing as MPM is just slightly slightly faster for May , but it might be different for you. So all you need to do now is actually move into the actual project directory. As you can see here, it's suggesting that we type thes commands. First, you can actually copy these and paste them, and it start to open our project straightaway. What? You may notice there were some of these commands, depending on how you installed um, mpm or node to begin with that the permissions might not be correct. So we need to do to change this. It's run this command again with pseudo in front. This makes you run it as every user. So that would just ask to the past where to use to log into your computer when you type that in and then run normally. And that should now have the correct commissions to start this project. So once the project has started, you'll see a QR code appear on the screen on all of the details. You need to actually run this app in the simulator, so if I wanted to, I could press I and it will open this in an IRA simulator right away. But we'll start looking into these in the next to start the next module. So for now, all you need is toe Have the settings the FBI settings that firebase gave you when you created your project. And this new project that we've created on the command line have reacted a rag native project that we can use to stop building out on testing firebase with red native. 4. Connect firebase project to react app: Now that we have a project ap I details and we have created react up in the command line, ready to actually put the two of these together. So before we actually use these FBI details, we need to actually install the fire base dependencies for using in react. So, as you can see, I mean, Expo docks here, and they have a guide on how to actually use violates. So the only thing we actually need from this page is this command just here. So what this actually do is install the fire base dependencies into our project so we can actually use them in our project. So if we go to the command line now, So here I am inside the directory off this project. So if we paste this command, okay, So once this command has been run well at all of the necessary dependencies, we need to use fire base inside our project. So, as you can see, it's installed all of these different packages for using an art project. So now if we jump into the co editor, I'm using atom here. Onda just opened up the project on this is the root file off our project here app dot Js What we can actually start to do is use the fire base. Dependencies were just installed to connect app to a firebase project. Now, to do this, we need to first, uh, create a new folder in here. So we're gonna call this folder Kontic, and then inside this this photo, we're going to create new file. Unnecessary is called conflict dot Js. So what we're going to be doing in this file, it's actually connect app to the firebase. Ap I details. We've been provided from fire base. So what we're gonna do is say import five ace from five base, Then we just need to provide the FBI details. So paste them in here in a moment, then would actually pass the come pick very public. In a sense, to this function just here. Let's jump over to fire base again, dashboard and find thes settings. So here they are. So if we copy this, we'll jump back into the editor. So if we pace, he's just here, and we're gonna actually change this to a constant. So now we have all of the details we need to actually set up and connect, uh, react native project to a firebase project. There's just one more thing we need to do that before this will work. And this is to actually connect up each part off the each of the five base features to a different variable for us to use throughout. So we're gonna be doing is just because the age of the things we need, such as the database apple for ization on storage. So what this actually allow us to do issues each of thes different variables now, which will access these range of features from firebase in a new for files we need. So we could actually use this. So say, for example, once who saved this Now, if we're in our own file down here actually could use actress as an example. So in here, we could just add, So if we add a line like this electric, allow us to access the overall firebase object the off functions on the database just throughout this page Now, because we've imported it from the conflict file, we've just set up. So this is a great way to start using the, uh, the five base features inside you up 5. Intro to firebase auth: So now let's quickly just test that the connection to fire base with a conflict file is working. So just to follow him from the last video, just make sure you have spelled initialize up correctly just like this, Andi. Now we can actually run the app on test in the simulator. One thing we need to check, though, is up here. I've put forward slash AP on actually, this shouldn't be. It should just be straight away. Four slash conflict. So if we check the simulator, there's pro gonna be an issue with this. Yeah, As you can see, it can't find the file because we're looking first inside the APP folder, which doesn't exist. So if we remove this Andi, test this again, we should see yet. So here is the default app. Ready and working. So in this video, we're gonna quickly be looking over the different types of Loggins that you can use for authorization with five base. So again, this is the Firebase dashboard. And if you click on the authentication tab over here on, we'll find all of the users off. Your app would be displayed just here, but what you need to do first is set up a sign in method. So these are the different types of log in you can use with fire base. Now, with Expo, only a few of these can actually be used on, but more been added all the time. This is just because of the way of react native works. But we're going to cover email and password and Facebook log in first and we may cover more of the others later on in the course. But we're gonna first cover email and passwords and then Facebook. So in the next video, we're gonna be setting up the email and password signing providers so we can get started using this authentication method without test. 6. Using email and pass to register user: Okay, so now we're ready to actually configure the email and password sign and provider with five base. So first we just click enable just here and save because we don't want to have passed wordless signing at the moment. This is an option you can look into. There's documentation about this, but for now, we just want to click enabled just here and then save. No, this is up. We can actually go straight back, Teoh a coded start and actually start to configure this. And as you can see here because we've set up our first method, it will show you to straight away. But now we're already to begin, actually set up our first user to create new users. We're going to create a brand new function inside this app called Registered User. So this will just take in an email and a passport on what we'll actually do to check that this is a working is look these out to the console. And obviously we want to do this in a life app because you want to try and keep passwords and email. A secure is possible, but for testing purposes, this is This is ok and then we're just gonna call the orthe variable that is imported at the top here. And then we just want toe call. This function here, which has create create user with email and password on all you actually do then is pass in the email. I'm password off this user. So this will send this strict of 5/8 and it will register this new user. So then we need to add a call back. So we know when this has been processed to this. We type in then and then we wait for it to be ready, since if we were going to set the user objects that's created when this function is called . And then we were Just look this to the console as well, then just called the email, look, the email and password again. And then this new user object. You can change this to anything you want, so it could just be user object. That is, to make it a bit more clear that that is all you need there. And then we need to actually add a check in case there was an error or if anything went wrong. So do this. You had a daughter again, the same as we did for then. But then instead of putting, then you say catch. And then we set the the variable name of this. So let's just call this era. And then we just sent set a return just here. So what would it look? Any era that's made I just need to put quotes around. This is this is text says we just show there's an error logging in and then we'll just play the error message. So this is all you need to actually register a user. So what we'll do is at a constructive function to this screen on make this red shoes a function be called when we first load up app. So, as you can see, we've just created the constructor function here that runs when this class is initiated. We just passed through the props and super like you normally would. And then we're calling. I read it to you to function here with this temporary email address and a fake password. So if we save this Andi, we're on this in the simulator, we'll open up the terminal a swell to check what the console is logging So if we open up the app now so just need to make sure you call this start register user as its insight, this parent class. So if we now check the terminal, you can see that this new use it has been created. So there's the email address we used in the password, and it's looking again here to show the result. And then it's created this brand new user object. So to check this further, let's go back to the fire base dashboard and see if and new user is appearing. So here is this is three user identifier here. It shows the provider we've used. This is the email and password provide a type, the date that the account was created in the last time they signed in. And also we have this user I D. So this will be really useful for us later in the course when we start to look at the the database options and how we can create profiles for users and things like this, and you also have the option to reset the password, disable and delete their accounts. Eso This is how easy it is to actually create a user using this. Reggie's a function which is created, so the next thing we need to do is look at how we can actually log users in Zain users out on actually check if a user is logged in or out. So these functions of the same across all different providers. So no matter if you use and Facebook log in or email and password, you still need to be able to log. Uses. L on check if someone's actually logged in or not, is that we're gonna look into next. 7. Check if user is logged in and how to sign out: to check if the user is logged in, we're going to create a new line of code in our constructive function just here. So to begin, if we're gonna coming out this register user function we were using in the last video and we're gonna actually make a check to see if the user is logged in or not when we open up the app. So to do this, we're gonna access the, um, f variable just here. Which, as we saw, um, previously is the overall fire base functions. So to access it. So just type in F like this. They want access, the off functions inside of that, and we're gonna make a a cool to listen for the on off state changed function. So inside of dysfunction, we now want to check to see if this user variable here is actually set or not. And this will tell us if the user is logged in or if they're locked out. So now that we have this here that's actually run this, But just before we do, we're gonna add a console log to actually see what the response off this function is. If we run it right now. So here we are in the simulator. And if we now check the terminal just here has actually just reload this so we can see at the response better. So just realized this bundle. And as you can see, we're locked in and this is the object off the user just here. Now, the reason this is logged in or that was having to actually use a log in function is that when we run the registered user function that we did previously, this actually logs to use a rain straightaway as well. So it registers and then dogs to use Aaron. So now that we know that the user is logged in, let's actually see how it would look a user out. So it is very similar to what we've been doing previously, but instead off running a function like create user, we just use both again because we've imported the top, we can use it. Then we just simply say, sign out now, actually, gonna add a cool back here as well. This is again where Jews, then and then in here is the function on. We're gonna cool to show that this event has been successful and then, as we did before, we also want to add a check to see if there was an error. So we just say catch. And then we sat name to our error message, and then we can log this to the console as well. So if we run this now, let's actually coming out this line for a moment. Se on, Run this again. You can see the message here is now locked out. And if we switch this back and now coming out, be sign out function they should. Now when we load the app your check to see if the user is logged in or locked out. And this time it should say locked out. So as you can see, it's already run. Let's just run against weaken weaken. See this? So, as you can see, this is working correctly. So what we've learned in this video is house a check if the user is logged in or logged out . And we've also been looking at the sign out function to see how to actually log uses out if they're actually locked in. So in the next video, we're going to start looking into Facebook. Log in and how this could be used in your naps. We're gonna be creating the Facebook Facebook app in the Facebook developer dashboard on. We're going to connect this in to our react native projects. We can actually log in with Facebook after this will look actually creating input field so that we can have a use name and passwords similar to what we're doing with Registered User . We're going to actually create a form that we can use on absolute later here to actually run these functions without having to just run it through the constructor like this. So by the end of this module will have a strong understanding of how to use Facebook. Log in. Also using the email and password logging options will be looking into these next 8. Using Facebook login: in this video, we're going to be adding Facebook. Log in to our app. But before we can do this, we need to register app with Facebook. So first need to go to developers dot facebook dot com and create a new app i d. So we're gonna use the same display name we've been using with a on five base. Or just call this my first project. Then he disk click on create APP. I d make sure invented your email address in in this box as well. So first click create app I d just complete a security check and then submit the case. Has anyone looked down for Facebook? Log in, Which should be I hear is near the top, so just click set up. Okay, So once you've added Facebook organ, you'll see this page just here. Now you don't need to worry about any of this right now because we're using react native. So first weaken, jump over to the settings button just here. So when you're on to this page, you want to scroll down to the bottom and click on add platform on. Then we want to click on IOS. Andi android. Now because at the moment and whilst we're testing, were using the Expo simulator. This is both for the expo up on the simulator. And if you're testing this on your phone, we need to make sure that we have the correct bundle. I d for IOS on the correct key hash enjoyed to link up with Expo. So to get this, we just need to go to the expo docks on This explains three different details you need for each type of pap. So first for IOS, we just have to add this as the bundle I d. So you just copy it here. I'll add a link to this in the resources so we just paste this in just here and then the same again for the key hash for Android. So once you've added this, we just need to save these changes and then we can actually make a note of that up. I d on d app secret because we'll need thes as we get further along. So now that we've created Facebook up and we've made a note of that up i d and R AP secret and we've added in the bundle I D on the key hash for Android. We can actually now go back to our co editor. It's now back in I co editor. We're going to actually create a function that will allow us to log in with Facebook. So we'll move down here a little bit. Let's just remove this code. We come into doubt for signing uses out. Just take it out here. I will just pace it again. Just on the bottom. Here. Don't you just make sure it's just before the surrender function. Just a credit. A bit more space. We're gonna make this fun little bit bigger, asshole. Just so it's easy to see. So now that we've got a bit more space and it's clear to see we're going to stop typing out this new code So this function is first going to be a sink. So it is gonna name this function. Look in with Facebook. You can call this wherever you want, but this is just easiest to keep track off at the moment. So you want to then set a constant with type and token, and then we're gonna say await expo expo dot Facebook, Logan, the capital. I just hear log in with read permissions. I think so. Now we need that app. I d. So we'll get this from Facebook in a moment, and then we just want to set the permissions that we're going to be needing so to begin, if we're just gonna be accessing the public profile. So now we just need to check if there's any errors with this. So we're going to say if type is a success, we now want to actually get the token or the credentials that Facebook returns and used these to log in with fire base. So, as you can see here, we're just accessing the f function that we were using previously and were then calling off . And then we're accessing Facebook or provider, and then we're gonna access and send in the credentials. This was changed it from a Facebook token. Two credentials we can actually used to log in with fire base. So now we just add a catch just in case there's an error. But if this works, we should now actually see the on state change function will run when this user has logged in and we should see their user details when they're logging in, so just tidy this up. We need to actually add app I d into here. So if we go back to Facebook ap just here we can scroll up to app I d. And copy this we can just place to end. So if we save this, we're almost ready to test this. We just first have to enable, um this provider inside firebase. So again you click enable just here the pace in your app I d And you also need to add the app secret so you can get this just here. Can you just click, show copy it and paste in? Then you disconnect save. And this is now a naval dis option inside five base Just before we test this, we need to make one more change on, but it's gonna remove this word function just here. Just remove this space. So if we run this code now, you can see we have the default app again here. But we're going to add a button just at the bottom here that when someone taps it, it will cool. This'll organ of facebook function. So first we need to import a touchable. A touch will highlight from react native, This would just be a button. So if we just test this now, you can see we have this button just here. And now we're just gonna add a tap event that will listen to see if this touchable highlight has been touched. And then it will call this function. So to do this, we're just gonna bring this down into a new line just under where it says touchable. Highlight here will add on press. And then we will cool the function. Just here it's This will be this. Dogs log in with Facebook. So it's a simple is that and then we'll just click save. So as we click this now, it should call this function. It's just open up the command lines. We can see what running here. Now there's one more part we need to set up, but just let's just first check this and see what happens when we click log into Facebook. So it's opening up a motel here, and it says here, Logan, if your Facebook account to connect to my first project. So I just jump in my details quickly here and see what it's showing to us. So It's just asking for my permissions to continue and noggin to this app. And here we go is taking us back on it said here it can't find the variable. So if we just check this line Sources line 31. Okay, you can see what the issue is here. We've put credentials here with s of the end and hear of only put credential. So if we just fix this on run the up again looking name of Facebook, it's my details again. So just say it's already here. Noticed that we've logged him before. So it says you wanna log in again? So here we go. It's shown all of my details just here. So my Facebook details actually use your i d picture photo euro when you use your i d. So they should now have correctly created a new user in at firebase database. So if we jump over to a project again, look for our users on a fresh you can see here that is added a new user. I d just it now, As you can see, it hasn't added an email address here because we didn't ask for the email permissions inside just here. We just asked a public profile. So if we add email just here, Andi, do this check again. So if we look into Facebook again, no, it's saying, Do allow this app to access your email address. So what's that? Yes, and continue. So now it should, if I actually delete this first and run this check again. So for now, go back. Just change one line to rerun the up You can see here. We're locked out if we look in now, so it's asking for me just to confirm these permissions again. Okay, so now it has passed. Three. My email, My display name in some cases, phone number, photo, euro on It's also noted provider I D is Facebook. So if we now look back on a fresh, you can see it saved My email address is updated the provider and provided us with a brand new user I D. So if we now refresh this app again here and see if it's still log in the user in. So if we just shake again on re like the bundle, you can see it's remembered who I am, and it's kept me locked in so that is how easy it is to get started to a Facebook Blufgan and to use your app, obviously your style. It's slightly different to this, but it shows how have just created a synchronous function just here that's connected to our app, i d. We've set the permissions as public and email with then used Expo to log in with these permissions. Well, then listen for the credentials and send these 25 base to actually change the East credentials we can use to log in on. We just called Asylum of credential function on, and the Logan is then completed. The actual print to the console that we're doing here that shows that the user is logged in is done by this function up here because it's listening to see if the state changes. If you use your Islam, you know, and that's where we then can access to use object. So this is where in your APs you may switch the screen that it's on to then go from a log in screen to actually go inside your app to see user profiles or like commissions that only logged in users can see this is what we're gonna look into later in the course when we actually build an app that you just can't have their own profiles and change settings and things like this. But for now, you can see how Facebook logging can be used inside a firebase project. 9. Using email and pass login with TextInput: Welcome back in this video we're going to continue on for if left off before on Look at how we can use the email and password log in features we've made before and actually create a log in form we can use with the log in functions. So to start with this, we're gonna actually import another element from react. Native, this is gonna be text input. This is what we're gonna be using to actually build our log. Inform along with this, we're also gonna add estate. So this is how we're going to check if the user is actually logged in or not. So when we used this on all state function of were using before, we're gonna actually update the state from within here so we can use this each time the user locks in or out risk. I mean, we can update what we're gonna display down here, depending on if the user is locked in or locked out. So again, we're just gonna add in a simple variable name up here, so we'll start by saying that they're not locked in, and this is all we need at the moment. So we'll continue working on this on off state function first. So because this function is gonna be run independent, this is in a separate thread. Eso we actually have to set a separate variable. We can access and change the state. So all we do is great. A new variable. We could call it anything, but we're just gonna call this that we're going to set this as this, which is the actual all of the functions within this glass, including the state. So that means now that we're down here, we can say that set state, and then we'll just say it looked in is true. This is all we need to actually show that when the user the state has changed in the injuries logged in, we're going to actually update the state to reflect this as well. And we'll do the same thing down here for these is that are logged out. But we're just say false instead. So this is what we're gonna be using later on when we actually start to change the display off the why and create a log in form. But for now, this is a we need. So we're gonna actually do next is create a function that we can call. We want to log a user in, so we'll start again. It's like betting on you function. This is gonna be a sink, and it's going to take in the email on the password. So in this function, we just first want Teoh make a check to ensure that the email and the password actually exists so that we're not passing in any empty details to the firebase function. So to do this will just say, you know, if the email is no empty and the password is no empty, we'll run. That echoed in here. And then we'll just say else this will be if they are empty. So this is if the email is empty or if the password is empty, we're just going to say missing email or password. So obviously, in a production app, you'll probably have a message that would be different so we can add a further check inside here to see if it was to email that was missing or the password. But for now, this is good practice to get into, to make sure, making some checks to see the types of data we're sending to this function. So that means we now know that if the email and password both are no empty, we can continue in here. And actually look this user in for this function. So to do this, we're gonna put this inside a try block. This will catch any errors that occur. So we're gonna assigned the user to a weight off again. We can use off because we've imported it from the conflict fire we set in the previous videos. And then the function we want to check it is sign in with email and possible it, and then this will take in the email and the password. So again, this is a similar style of function to what we've seen with the other firebase authorization functions. So at this point, we can say, Well, actually, have the object of the use of justice. We can lock us to the console, and then we're just gonna add a check here if there was any areas. So I will say, catch era on because we're using a try block here. We can actually catch any errors that have occurred. Well, just look this out. Just we can see what is happening This is what we need here to actually lock of user in. Now we've made our log in function. Let's start to actually build out the user interface that we want to show. So what we're gonna do is update this a little bit so that we can have different content displayed if the user is logged in or if the user is locked out and will also add a log out button So it would actually change this sign out code we created and just moved this and to its own function. So we'll stop by just saying sign, use that out is a function that we just enclosed all of this inside this function. So we just saved this now on DSO So far, we've added what we've converted this sign out code into actually a sign out function on. We've created a brand new function to allow users to log in. I mean, also set a default state on imported the text input. So it is everything we actually need to start updating interface down here. So first let's actually remove a couple of these lines is removed this line here on just change this like so just so we can distinguish between the different parts off the interface. So if we just make sure this is running and we'll check how this is looking so far so as you can see now, this is now saying I popped out dress. This is the same as before. We've now got these dashes and in the log in with Facebook button that we had before. This is what we're gonna be starting with. But now we want to make sure that this log in with Facebook button only appears if the user is logged out. So to do this, we're gonna make some checks inside surrender function. So we're going to check the very boys set up here in the state to see if the user is logged in. So if it's true or if it's false so as you can see, this is how you make it. Ah, check in here. So this means this any code inside here will be run and rendered. If this variable is true with this question mark just here, system it if it's true, and then this is if it's not true. So if it's false, we're gonna wrote run code inside here. This is where I want to. This is we want to display log in with Facebook button, and we also need to add a view in here. Just so anything inside this statement is actually inside its own view. This is the same for done here as well. That's just in dentist greatly. Okay, so if we save this now, let's see what we have. So as you saw there for a brief second, it showed the initial log in with Facebook button because when the page opens up, it's it's false. And then, as the on off state change function fully loaded, it updated to show that we actually are locked in. But now that we have this part working, that's actually improve this fervor on, add a button that will allow users to actually log out. So if this we can add another touchable highlight, I voted for the actual log in button and we're just say on press sign user out. We had a little bit of styling here, a swell just so we can see, uh, the exact size off this button. There we go. We can see this log out button disappeared on the page. It's just fix this just here. So if we click this button now, it should log the use out and then display the log in button again. There we go. We're starting to see some dynamic elements to you. Why now? But so far, users can only log in with Facebook. We want to change this so they can actually log in using this new logging user function we made so they can look into their email and passed foot. So for us to do this, we're gonna utilize the text input import we've made up here from react native and actually allow the user toe add in on type their email address and their password. So this is gonna happen down here, but we have the the check to see a future is logged in or not, So don't Here. This is if the user is not locked in, we're gonna add a button down here to actually ask the easy if they want to log in with their email and password. So what we're gonna do is use a similar, But until we've made just here. So just copy and paste this. We're gonna change the logging of Facebook text to say, log in with email and down here we're going to set the states. So we're just gonna say email log in, you changes to tree. So what this would do? We're gonna add a new view up here that will only show if this button has been pressed. So we're gonna take this variable here, make a new check, and we'll save this state. Log in in my log. In view, if this is true, we're going to show a new view up here, which is probably going to contain the email and password fields where the users can type out their email and password. So first will set, ate a piece of text to say email, and then we'll actually create a text input just here. It's This works very similar to the other elements we've made. So as we're touchable, highlight, we're going to be actually listening to see when the user is actually adding text in here as we need to save it somewhere So we can use this to process when they click log in. So we're say on change text. And then when the Texas changed actually going to set the state. So apostasy three. So this is basically going to change this email variable in the state with the text has been entered into the input field. And then we're going to do exactly the same thing for the password field, except just fix the indentations here. Except we just changed this to passwords. An extra prop we're going to add for this component. So this is called secure text entry. This is what makes sure that the password isn't visible when the user is typing in. So if we saved this now, isn't it a question mark just here? And we need to actually close this off down here. So you can just at this if you're working with IOS only, but for Android is actually cause an error. So what will basically do is just create a new area just here. We just had to have an empty view inside this. So again, this looks okay now. So if we cook on Logan of email, this makes this new view. We've created a peer, but we're just missing one thing, which is actually a log in butter. So we're gonna add this just now. I'm actually going to copy the touchable highlight with made up here just to save some time . So they changed the text here to say, log in and then the function Nicole is going to pay log in, user. Then we're gonna pass in the email and password that these air has entered here. So this will now send the email in the past word that these has typed in to the logging news a function which up here we've created. So the first check to see if they existed then it will actually post Proceed on. We're on this function. So if we save this now, we're ready to actually test. This is a working. So if we just scroll up, we can see the user details we used in the earlier video of weekly logging of email. And if we enter this email address and the password, so if we know click log in, Just see here. We need toe type in email and password. So if we try again now, just fix this on a log in. Okay? Again, we can see that every here is that we were using the incorrect variable name. So if we just remove this and run it again. So we're now copy, uh, email just here. Click on logging of email and well paced in our email address and just type in that password. So now we'll organ and you can see it is working on is taking us straight into a new user area. And if we could look out, it takes us back here. We're looking again and so on. So in this video with learned how to actually create a very, very simple interface using text input on buttons, using these checks to see the state to see if we logged in or not. And then we're just playing different elements. Different view elements to see if the user is logged in. We're gonna say, Johnson Ogle, You could also just play user information in here a swell and then if the user is not logged in displaying two buttons, not gentrify the email with Facebook. So just to test this will also log out and then log in with Facebook, and then it will again check to see if you want to allow this'll up access and the processes. And there we are. We locked in. So this is how quickly you can put interfaces like this together 10. Intro to firebase database: welcome to this new module. Now, in this module, we're going to be looking at the data base that you can use in fire base. So to get started, you don't have to click onto the database tab in the fire base dashboard. Okay, so there are two types of database that firebase provides. There's the cloud Fire store. Andi, the real time data base in this first part of this module gonna be looking at the real time database, as this currently is the only fully supported version. As the crowd fire store is in beta, we're gonna be adding more videos for this in the future when it's fully supported. But right now, we're going to be using the real time data base. So to get started of this, just click on create database and we want to start in test mode. The difference here is in the level of security that you have when you first start your database. Now, this could all be changed and will be looking into this in one of the next couple of videos . But to begin with, we want to click on start in test vote, Then we just click on enable. Okay, so now you can see here. It's saying, as security rules are public, this means anyone can see the data off our database. If they go to this, your Oh, and they're also logged in to their Google account. But don't worry about that for now, because, uh, we were gonna be changing its very soon. You can control these security rules from the rules tap over here, which will be looking into in more detail later on. You can also configure backups, uh, for your database just here. And you can also see the usage details off your database over here. So it shows how many people using the database at the same time how large your databases on the bandwidth that have currently been using This is all we need to know to begin with. So to start with, we just have to have this blank database that we're gonna be starting to use in the next video 11. How to set, update and delete data in firebase: welcome back. So now that we have our database set up, we can actually move back to the coordinator and start to look at how we can interact with the database. So let's start by looking at some simple examples of first how to set data update data and then delete data. And next, we'll look at how to actually call data on be able to iterating over different types of data may have in your database. So to begin with, let's actually look at how you can set data. So let's actually just come in these to out the way the database works in react native with fire base, is we're gonna be using this database. Variable that in the same way that we were doing in the previous modules we're importing it appear from the come pick. So this has already configured and ready for us to use. So because of the conflict set up we've done before, we can actually start to use the database right away. So again, in here, this is what we have to do. So we first get this database from the database variable, Then we set a path. So this is the reference. So in here you can type in any part for set the data of any actual attributes that you want . So if we change this to if we change this to something simple, such as ref name, and if we save this of actually really set up, uh, the simulator is a free open the simulator. Now, what we should find is the Okay, So the APN opened up so that in the database, which was previously empty, you can see that this reference we have this values. We can actually click on this on DSI This data in more detail but we could actually do is we could have as many child elements inside here as we wished. So if we go back to Adam and actually put forward slash child ref like this, for example with estimated to run which it has, you can see now this has changed to show age old referent here rather than just a value at this actual reference. So you can have as many different refs in here as you wish. So we could change this to a child ref to for example, and you can save added here already so another way we can interact with data is by updating things. So as you can see down here, if we just coming this company's help so done here we have a slightly different style off using this database and breath to update certain elements off our database. So, as you can see here, this is very similar talk using before, except this reference is empty. So what we're doing, we're creating an array here off different path. We want to update so we can use as many as we wouldn't hear squeaker. Just copy and paste this line on Say so up here we had ref name, forward slash child breath. We're going to change just a database and we could actually set a new one. So another f name when Jay says to and you can also not only do you have to use strings, you can use numbers as well. So if we just change us to a number five So as we saved this and run this, your noticed that these were all run at the same time. This is a much more efficient way of updating data with this method would have had to have a number of different database schools with the ref and then finally setting the value, which would be a number of different cools on. Http requests for the actual back end to make doing it this way. It's just all done through one batch request. So if we save this now, I moved over to here. What? You're notices that the numbers interview here is shown without these quotations. So this is actually a number the weekend news. We can pull this in straight into a trap. We don't have to change this into a number, so you can actually set different types of data and the data types on the fly, which is completely different to other types of databases. You may have worked with Mayor Factory before, so if we go back here, finally, we're gonna look at deleting data. So if we come in this out now, So when it comes to deleting data, you want to be very careful with this, But it's very similar to when you set data. So you have the database, then the reference we're going to set a path here, and then we just simply save remove. So let's test this, uh with numbers reference here. So if we change this to numbers, save this. It is run already and they can see it's got red and it's removed this actual database dashboard to update live. So so long as you don't have thousands and thousands of records, you can see the changes reflect straight away. So this is just a quick introduction to the fire based real time data base. In the next video, we're gonna look at security rules so we can start to secure app on, actually and validation as well, so only certain users can enter certain types of data in different places. So we'll take a close look at security rules and how these can be used in fire base. 12. Fetch data from the database: before we start to look at the security rules, we're going to first take a look at how to retreat and fetch data from our database. Now, there are a number of ways to new list. You can either effect just a single value affection. Tire objects at a time which can take slightly longer on, take up a bit more bandwidth. But this is only really an issue at scale. So if we have a look at some examples of this, so in this example here we affecting data once I'll explain more about this in a moment. So we are actually fetching. First are based reference. Here is ref name and then you can add in a child reference here. So we're saying gold ref, which if we check this in the data base, you can see we have ref name and then the child ref just here. So this should fetch a database value. And then what we're basically doing is inside this object. This will take a moment to actually making http request and then send the return for this into this area just here. So the first checking, if any data actually exists when this response is made, and then we're so here. We check if this data exists, and then we're setting our data to the value off this snapshot, which is the variable we're setting up here for this function. So in this example, within logging this to the console with the just a string here to say, single value in the data. This is one way of fetching data. Also a firebase. You can actually have data update life. So down here in this example were saying on value. So this will mean if any new data is added or data has changed, I would actually run dysfunction here for anything at this path. This could be really useful to have absolute life update live on show changes onto the screen. So let's first just have a quick look at how these both of these commands will look inside when run insider app will look at the actual console. Look, to see what this data is returning. Okay? So as we can see here, these are the two types off requests we've made. So we have on value, which is showing database and single value, which is showing database now just to emphasize the difference between these between these two options. If we go Teoh chrome here and change this value right here, get the side by side. So if we change this here, you can see that this is updating straightaways about the up changing. So any changes made here will be reflected straight way into this database. Where is the single value? One only runs once, which is still useful. If you want to maybe have a reload button on your app that can infect this data again. There are a number of other way to confess. Data live a swell. So as you can see in this example, we were using Teoh make updates live whenever the value is changed. Don't. Hey, we're looking at different ways. You can check on make live updates as well. So in this example, we actually have to make a slight change. We can add an event here called on child added. Now what this would do is call this function whenever a new child is added to this reference. So if we remove this path name just here, what this will do is fire an event just here. If a new child is added to this reference name. Let's have a look at how this will be reflected in the database. So if we saved this on open database and just have a look, So here is our reference just here. And we have a number of child elements in here already. So if we run this in our simulator, so if we add a new element, just we should see this log to the screen. Let's test this now, So we're gonna make a new reference on. We'll add a special string into this value so we can see what this is. And then if we add this now, you can see this is appeared just here. Now, along with this, you can also make a listen for data being removed. So in this example, it's exactly the same as we have up here. You can see we're checking this reference on child at it. And then this is why this is appearing here. But don't here this is saying child removed, and it's going to say on value removed. So if we save this week for the app to appear in the simulator and we have the logging running again here. So if we now remove this reference here, you can say this is look to the screen. What you need to watch out for when you're using this in a live app is that these on child added events are actually run with it at first opens up a swell. So you need to make sure that you're not making duplicate requests to the same place, but they work out really well when you want to add live data into your 13. Firebase security rules: in this video, we're going to be looking at the firebase security rules and how you can start to secure your data in your five a state base. So first to me to look at what the different types of rules are that you can actually use on your database now these include read, write, validate and index on. Know what this basically means is read commissions allows users to actually access and find data from your database. The right commission allows users to actually set an update data into a database. Validate is useful to actually control the types of data that users can enter into different areas and references Reference path to your database on index is useful to help query Andi sort data when you need to retrieve it later on, there's a number of variables you can use to actually help create your rules. This includes the current time, the route path of the database, and you can actually add further references to this so you can check different paths against each other. You can actually query the new data that's being posted in whether that's just one view. If there's actually one value or if there's a whole object has been set into the database. You can actually query this as well, and you can actually check make checks against the current data. That's at this reference point as well. Along with this, you can get the off objects off the user that's currently authenticated. If the person has looked in, which is normally the case, and you can access things like their user, i d. On their normal profile information. So their name, email address, user token and things like this. Now he's just a really quick example that shows how the rules will look inside off your inside the rules tab in the dashboard. So in this example here, the first thing we're looking for is the users reference point. Now, inside this, there will be a number of rows in this database with different user ID's. So what we're doing here is we're actually, instead of putting in an explicit path, we're using a variable just here. So that means, say, this user was four slash users board slash Russell. You can see that the only person will be able to read and write on actually access and use the database upon this path would be someone who is logged in with the same user I d. That matches this user, I d variable. So in this example, we would have to be Russell. It's the user. I d. This is a really quick example that shows how these rules can be put together. So just to expand on this Onda give a better example If we look into our database at the moment, see how we have this ref name variable. Just hear this ref name path just here. If we open the rules up and actually open a database in a new tab, we contest this so again, you can see here we have a dangerous public's. We're gonna change this now and just remove these two elements here. So again, this would mean if we tried toe make any changes to a database. Now, if they wouldn't work, users will be able to access data or set data. As you can see an assimilated here, we can actually make checks against the database as we are running it. So you can say is a user authenticated or not? And if they are, you can actually set their user. I D. This is really useful to test all of the rules you're creating before you publish them. So it's going make a couple of simple checks now. So if we add in some rules for our database that we have at the moment, so again, this is the data we have here. So if we copy this ref name just here, we're gonna use this in our example. This is the path we're gonna be working under, and we're going to say right, his folks read his tree. Now, if we publish this, we can make some checks now. So what we're going to try and do is right to this end point. As you can see, this is failed because right is false. And if we don't read to this same path and that was allowed, this is a really, really quick example of how you can use the simulator to check different permissions. Now, let's make it a little bit more of a real life example. So as you can see the data in here at the moment, there's a number of child elements in here. But this fairly here says database, What we're gonna do is allow users to change these elements done here so they can actually make right commands if their user I d matches the name off this child. So to provide an example here, we're going to say we're going to create a new reference path inside here. This is gonna be okay. So as you can see here, this isn't actually completed yet. Okay, so what we're looking for now is we can actually make a right to ref name forward slash Well, six on point here, child. Ref. So to give an example here, we're going to try and set this value in here, but at the moment, this was denied because a user i d does not match this child bar. But if we change our user, i d. So now we're authenticated daughter showing up, for example. Okay, that was tonight as well. But we're trying to access this child. Ref, just here. If we change user, I d done here. So it actually is child breath and they'll try and run this. You can see that this right this'll method was actually allowed because our rules match with the off I d on the variable of this path name. Now, as we move on with this course, we're gonna create an actual app that will utilise the rules in amore Real world example. But this video should give you a quick understanding of how rules can be used to actually secure your firebase database. Now, they're extremely powerful when it's stormy, different combinations you can use. If we look at these variables you can use again, you can see how many different ways you can actually referenced the different aspects off your database. The important thing to remember is that any rules you set high up in your database or anything up here will ensure that anything further down can actually be will follow these same commissions so fast to publish here on. And if I set this to force, if I wanted to read the same helmet down here because it is this this rule, the top is overriding everything else. So you need to try on to be a specific as possible and not set any rules high up in your in your rules tree to make sure that you really are being specific for these commands. But again, we look at this fervor in the later modules of this course 14. Structure Firebase database: Hey, welcome back in this video, we're going to have a quick look at how to best structure your database in fire base. So in the fire based real time database, all data is in Jason. So it's essentially a tree of Jason objects. So because of this, we need to structure a database in a certain way. Now, in this guide on the official firebase docks, they really do a good job of explaining exactly how you want to structure your data. So just run through as quickly and provide a link so you can really take a close look at this yourself. But you want to make sure your data is as flat as possible. So you want to avoid too many nest ings like this. As you can see what we have different types of child elements inside one another. This makes it really difficult to pull out certain types of data that you might need. Andi, when you consider there's look, there could be lots of users using your app that would really increase the bandwidth databases using So by structuring your data nice and neatly Onda very flattened out like this. You can see that if we wanted to access certain messages, we could just call messages for slash one and access all the date. We need it rather than having to, rather than having to up here access all of the's elements inside the same A list of messages, and it could take a long, long time to process. So it's important to look through this page. I provide a link to this as well, so you can really carefully structure out your databases now again in the later modules we're gonna be creating. Example are sure exactly how I go about structuring databases in fire base as well. But it's important to bear in mind the types of queries you're going to be using so that you're thinking ahead before you just create your database. 15. Intro to firebase storage: Welcome back. Now in this module, we're going to be taking a look at storage. This is how you can upload photos and videos to use these in your app and gives your users new ways they can interact. So to get started to first click here Andi, you'll be shown this information about security rules that you'll be using when you first open up your app. Now we have to say, has got it and we'll be looking into these actual rules and how you can secure all of the up loads on features when it comes to storage in a separate video. So for now, you just have to click. Got it. We'll then be redirected to this page just here, which is the dashboard off all of your uploaded files so you'll see a lot of different directories and files on the details of those files they have uploaded, so you can make folders, upload files. Andi view the different buckets you have in this plan. Along with this, you'll see these different tabs on the top, which is similar to the other features we've looked already. Now there's the rules. The security rules for storage is slightly different to the ones used in the data base, which will begin covering at later on and is also usage, so you can see how much storage you're currently taking up. How many different objects there are on the total band with this could be useful when you're looking to scale up and seeing if there's any files, the bigger or take up more space than you think or we need to do. To get started is to jump back into Atom Onda. As with the database elements were using before to storage, really need to make sure import storage of the top here, which again is configured already from a conflict file. And then from here, you ready to get started by using this storage. And then you also set a ref a swell, but we're looking to help to actually use and storage commands at later on 16. Intro to firebase storage securty rules: in this video, we're gonna take a look at security rules in firebase storage now in storage, the rules are similar but slightly different to the ones used in the database. Now, this is an example off what the rules would look like. These are actually the default rules that you are given when you first start using storage . So essentially here. We're checking to see if the service is firebase storage. We're looking to see which buckets were in. This is the default bucket for this project, and then you make a check for the actual path that the files are located in. This is the same as the reference is inside the databases. And then inside here, you can choose whether users can be allowed to read so to access the files or if they can, right? So if they can upload and add new files. So in this example, we're just checking if the user is actually looked in. So if they're unauthorized user, they can read or write files on any path. Now, as we saw in the data base, there was a number of different ways on objects you can access, such as the users user, i d the new data you want to add in and this is the same for five A storage, but the objects used to actually quite different. So everything is contained within this request. Object here. So if we move over to the docks, you can see the different types of information you can get for in this example. It is for the actual resource that's being uploaded. So to access any of these parameters, he would say request and then adat resource, don't any of these, uh, actually was just here. You can also access thes perimeters also under request so you could say request dot orth and then use your i D or token and then aching Say request stop path and see the path that they're trying to access. So as you can see in here, we're trying to see request dot off and then we're just seeing if this exists. So down here I have another example he can use. So in this example, we have the same checks from making the top here. You can actually have one of thes top level checks. Everything needs to be contained within this. This'd statement send down Hey, we're making a check to see if the path is forced out. User four Stash user I D. And then anything inside that any files inside that directory? The permissions we're providing here is to allow anyone to read. But we allow right access. If the user i d so she can see. See here. Request off dot user I d u I d. As we saw in Thea. The types you can use here and then we're checking if this equals use ready. So we're setting this variable from Thea Curly brackets we have around the user I d shown in the path just here. So this means you can actually have lots of different F statements. Teoh create different rules for different areas inside your storage buckets. So again, if we look at some more examples, you can see down here. So again you can be as detailed as she wants. So you could go down to the actual file names. They could say Ford stash images and profile photos. You could check for other conditions as well and really create anything you need. So when you take a look at these combinations, you can see how you can really customize this to ensure that your app is a secure as you need to be 17. Create and setup app from the command line: welcome back. So we're now ready to start creating app that we're gonna be working within this module. So to start with, let's go into the command line and moved to the directory that you want. Teoh. Store this up inside and we start by creating app using, create, react native up. So we start just by typing this commanded and the name of this app is going to be photo feed. So we just wait for this to process and just sell all of our default dependencies. Okay, so that is that created of all off the dependencies. We need to get started. But before we move into a code editor to start actually working on app, we're going to add one more dependency. This is going to be react Navigation. This will allow us to have a tab are so we can switch between different screens. So I'm averse to using yon adhere on our show, a command you can also use, which is if you're using NPM, which is the default packager. So this command will be NPM installed Dash, dash, save reacting navigation. So again, I'm gonna change this back because I'm using young. We just talked this in and then press enter. Stay at this will add the other package that we need to use. Okay, so now we have all the dependencies we need to get started. So now we're just gonna open our new project inside Atom. So just find the folder. It's now we have a new project opened up inside atoms. So what we're gonna do now is actually create a new folder inside here, so it's gonna be ford slash ap four slash screens and then inside here, we're going to create three new files. It's these files will be feed dot Js upload, doctor. Yes, and profile Doctor. Yes. We're going to leave these files blank for now. I'm a gun and then open app. Dodge s in the root of our photo feet directory. So to start things off, we're going to actually create the navigation for up and then we'll move on to actually creating a each of the separate screens were going to be using. So first, we're just going to import react navigation. So you do that just like this, And now we want to actually create a stack that we're going to be using two. Instead of this code here, we're gonna actually call Main Stack. So we do this by first defining main stack. It's This is a constant which is going to pay. I knew Create bottom tap Navigator. So you just do that by calling it like this. And then inside here, we want to open up a new curly bracket like this and then inside here, we're going to add each of the screens that we have for this project. So that is Feed does have an empty object for now, uploads on profile. What? So that's what we need here so far. So we just saved this just to keep her progress. And now we're going to move into the feed file and just stop adding a default display for this screen. So to begin with, we're just going to import react, and then we're going to import a number off different components from react native as well . So then we're just going to stop a screen. So you do this by defining class than the name off our screens. This is going to be feet. This extends react component, and then down here, we need to actually make sure that we are exporting this class name just here so that we can use this inside off the app Js when we actually important file. So you just type in exports default and then the name off their class. So in this example, it's feet. So if announced sort, this is all we need. I'm just going to save this and then copy and paste this code for upload and profile. We're just gonna make one change, which is this part just here. So we're gonna change it from feed into profile for the profile screen and then upload for the upload screen. So now we just need to actually change this display just here to use the main stack and then we're going to import each of these new screens we've just created so that we can use them just here inside our main stack. It's that will be a feed, uploads and profile again. So let's just run this to see what we have so far. Just after quickly adding in the correct elements justice that would be screen and in the name off the import up here this again will be feed. Then we'll just copy this to use this again done here, just making sure that we update each of these to say upload and profile. Now it is going to run this in a simulator to see what we have so far. You just need to make sure it's well that when you added react navigation earlier you actually inside the photo feed directory that we created for this project. So once you've done this, you should be able to rerun the project again. So starting it with either MPM or young and you should be ready to actually test this out. Okay, so now that we have app running, we can see that there's an error here, but that's fine. The reason for this error is because in each off screens, we haven't actually said anything to return here. But that's OK for now. So in the next video, we're gonna look at actually building out each of these greens and then getting ready to actually connect everything up and set up the database that we're gonna be using for this app. 18. Adding base components to each screen: welcome back. So in this video, we're going to start to actually build out these screens and first removed this little error message that we have here. So the first step is to go into the feed Doctor es file and we're going to first at in a constructor. So we're just gonna cool super with the props variable just here. And then we're just gonna add in a simple render function. It's just going to return a basic view for us right now. So we're just going to add the render function here like this, and then say return then inside here, which is gonna have a basic view with the text that would just say which page this is. So for this one, its feet. So then we can copy this code inside here, which has saved this page first. But we gonna copy this to upload on the profile screen. So first, just gonna change this text just here on upload to say upload and profile to say profile. So as you can see now, this era has gone and you can see that we have the tab are on the bottom here with feed, upload and profile that the moment the text is hidden up in the corner here. So let's just quickly fix this. So to do that, we're gonna add in some in line styling to the view element. So at a flex of one, and then we'll put justify content center Andi a line items center. Then we'll just copy this for the other screens as well. So you can see this is just a quick video so you can get the app appearing on a simulator here before we start to really build out these screens and test things further. 19. Starting to setup the feed screen: Now that we have all of our files set up with some basic display options and the text centered so that we can quickly see which page we're on, we're going to focus on the feed page and start to really build this out. So the first thing we're going to do is change thes dialing we have here. So we're going to change this styling first. Just to remove everything apart from Flex as this view now is going to be a parent view of this entire screen inside here. We're going to add another view which is going to act as a title bar for this screen. So I'm going to add some starting to this right now. So we want Teoh, our first set of heights of 70 petting top off 30 A background color of white, a border color of light gray, A border bottom width of 0.5. Andi, we're gonna justify content center on the line items send to us. Well, so if we just save this, you can see a feat element now is centered on now has a nicer appearance at the top of the screen here. So next we're going to actually work out the display off the photos within a photo feet. So to start this, we're just gonna go down here and create another view on inside this view, we're going to actually start to plan out how we want our photos to appear. So inside this view, we need another view, and this will contain to text components. Which one of them will show the time that each photo was posted. So her for now would just say time ago, just here. And then this element will actually show the user that posted this photo. So just for now, say, at Rusty. So if we save this, it won't look like much for now. But with start to style, this as we move along. So now I want to add another view, and this is actually going toe hold with the actual image itself. So what type of the actual source we're going to be used in in here as well. So whilst we are in development, we're just going to use some random images from special. So to do this, we just type in you are I and then the your l That going to be referencing. So as we want to have a different image each time we're going to be calling this you're a number of times, so we just need to make sure that each time is hopefully unique. So do this. We're gonna add a random number to the end of this. So when you put forward slash rent after the end of random, put forward slash this lets you actually selected image size. So we're going to make sure it is between 500 pixels by either 500 or 800. So around a number between this. So in order to get this number, we simply add math, Doc random And then we times this by 800 plus 500. Then just make sure you closed our so this should give us a random number between 805 100 to go with the 500 just here. So just to finish this off, you just need to add an ex just after this 500 just here. So underneath we just need to have some basic styling for this image. So we're gonna add a resize mode of cover a width of 100% on the heights off 275. If we just close this off, we should now be able to see if this is working. So there's just one problem just here just before we call math, not random. Need to actually called math dot floor. Andi, enclose this in brackets as well, so you can see it should look like this. I just fix this little problem. Here are images now appearance. So we're almost done with the building out this element. We just need to have one more view component. And in here we want to more text components again. Just fix that. So this is going to contain the caption. That would be where the caption goes. And then down here is going to be whether you too, can click to actually view the comments that are attached to this image. Okay, so this is how it's looking right now in the next video, we're going to style this, if in fervor, to make thes elements appear side by side on the same down here. And then we'll start to move on to change this to appear first as a flat list, and we'll just set a simple array up here. That confection number of images at a time before, well, actually move on to connecting up the database on really build out the APP. 20. Adding a FlatList to the feed screen: it's another. We have a display off feed page. Time to look a little bit better. Let's start to really build on this now. So the next step we're going to do is add state. So all we want for now is a simple array that we can use for our feet. This will be photo underscore feet. I'm just gonna pass in a simple array, so just be one s 0 to 4. So five elements in this and then we want Teoh or so at refresh. And we're gonna set this, uh, to default as false. And then we actually want to create a function done here as well. That's gonna be called. Whenever we pull to refresh the flat list, we're gonna be adding next. So we're going to call this function load new on just to follow a good practice before we actually use natural database for this, we're gonna set the state the state in here twice. It's the first time we're just going to change. I refresh destroyed that it's true, says his whilst we're loading and then normally would actually call the database in here, so there would be a natural, slight delay so you would have refresh first been set to true. And then when the database vectors made, he would set it to false. But in this example, just whilst were in development. We're going Teoh said the state again without actually called in the database. So we're gonna call photo feed again on set A different array this time will go from the numbers 5 to 9 like this and then we'll reset Fresh refresh to be fills again, That's how load new function. So now we're gonna actually add in the flat list, so we're gonna add it just down here, and then we're gonna add in some props straight to wait this as well. So the 1st 1 will be refreshing. We're gonna set this to this dot state dot Refresh that we set up here and then the next probably want to use it on a fresh. This will be the this'll owed new function. So I said, this is well, that's like me. And then we actually want to set the data off the that list, which will be this photo feet array just here. That's everything we need just there. We're also going to set a key extractor so that each different part of the array can have its own unique keys. So I set this now as well. So you do this by again, has no more in the curly brackets, and then inside here what? I put up more brackets and you'll add item color index. Then we'll literally cool this to be index, just to make sure that it's always gonna be unique. But in order for this to work correctly, we have to use this as a strength. So we just convert this number into a string like this one final thing. We're also gonna set some default styling to the actual flat list component as well. And this way, flecks of one and a background color, which will just be eighth. No. So just the hex code of a And then we're gonna actually render this elements off data as well. So we do this by just talking render item. And then I opened curly brackets again. The normal brackets, naturally, curly brackets again, and we want to call item on index, as we did before. And then we just want to open up brackets just hit. So strong is inside Here is where we're going to put the components you want to display for each element inside of our data. So for us, it's will be each of the elements in array up here. So if we're going to be using the components we made in the previous videos so we're just directed from there and paste it into here, So we're almost ready now, we just need to actually add the key into the apparent view off the off the components here . So to do this, we're just type in key equals index. So if we saved this now, let's see what we've got. So one final thing, obviously it's we always were actually to close off a flat list. So you do this just by putting in fort slash and then close the same as with the Jews for the image component that we used Harris. Well, so if we just add that and then save, you can see now we have images appearing, so there should be five of thes We have 12 three full and five. And if we refresh this, this will call our load new function and images changing as well. So This is OK so far in the next video, we're going to Addis styling. We mentioned before. So for this for the time ago on the user name on the caption on the comments. And then we're gonna be ready to start actually looking into adding the connections to the database and allowing users to actually have their own profiles and finally to out to upload their images. So this is what we're gonna be looking into in the next few videos. 21. Adding some styling to our FlatList: So just before we start at the database connections, we're going to add some more styling to ah fi Js file. So let's just move this back. So we have a little bit more space, so we're going to be working with the components inside this render item just here. So the 1st 1 we want to use is this view just here. So we're gonna add a style and then the starting you want to act is, firstly a whip off 100%. We want either fly to be hidden. We're gonna add a margin bottom of five. We're gonna justify content. This is gonna be set to space between I just fix this here the space between a border bottom width of one and a border color of great. That's what we want for this element just here. Let's just fix that So safe this and then we're also going to style this element underneath just here. So again we had style the style prop every once add padding of five with again of 100%. We're gonna set the flex direction to be row and we're going to justify content again. And that will also be space between. So if we save this just at a common just after putting and then reload, okay, so you can see with this last change, it's made sure that the time ago on user name on either side of the screen. So the next time I'm gonna add is for the caption and comments down here. So as you can see, two starting applies to all of these elements. So all we want to do now is just scroll down to this text on here. So this the view component that is just above this, we're gonna have starting here a swell. So is set a padding of five. And then for each of these text elements, then for this text element down here, we're going to add style margin top of 10 and we're just gonna align text to be center. So if we just had this capital letter here, save and now have a look at what we have, So this is starting to look a little bit better now, so we have a flat list working with the unflashy AP, I just For now, we can pull to refresh to change the image. Is that shown. And then we have a display here that we need before we can continue on. This is everything we need before we can start actually adding the database interactions, setting up her firebase account on Ben, finally adding our profile and upload screens so users can actually interact and used the app, that's what we're gonna be working on the next few videos. 22. Create Firebase project and connect to our app: Now we're ready to actually create the connections to fire base so that we can set up a database and everything like this. So to get started, just gonna open up this tab at the side again and create a new folder in our directory. This photo will be called Conflict. And then inside here, we're going to create a new file called conflict dot Js the case. We can lead this file empty for now. And then we're gonna open up a browser and go to five base. I'm gonna click on Add Project on. We're going to create a new project in here, which is gonna be called photo feet. Okay, so that's where you type in here. Just take this box at the bottom and then click create project. Then we just want to click home. Continue. Then you want to go to your settings up here, project settings, and then click on this button down here that says at firebase to your web app. So this is very similar to what we did in the previous module. So I just want to copy all of this and then move into our atom again. An inside come pick daughter. Yes, we're gonna paste this on women going to make a couple of changes. So we're changed. Var appear to constant. Then at the top, we need to import fire base like So Now we just need to export a number of different variables from this conflict file. So the 1st 1 will be the overall fireplace object, and we're export. This is just the letter f. And they want to export just the database and then just the authorization functions. And then finally, just the storage. Okay, so now that we've done this, we're almost ready to be able to use fire basing at. But first, we actually have to add the firebase dependencies in the command line. So to do this, you want to navigate into your photo feet directory using a command line with the following command. This is how you install the dependencies using NPM or as I use you can use Yon on the command for Yang would be yawn at firebase. Continue. Just press enter. Okay, so now that we have all of the dependencies, we need installed on that, we have a configuration file sets up, we're ready to move on to the next step 23. Structure database for project: welcome back. So in this video, we're going to start to plan out our database and actually set up some example entries into our data base so they can actually replace flat list and use our database defect information rather than just used data from unscratched that we've hard coded in. This will replace the array we have state at the moment. So anyway, right now, we're gonna work on the structure of my data base. So I'm just gonna write some notes in here just to planets out a little bit. So the main parts of our database will be users. We will also have the photos and finally comments so the user's objects will be first. It'll actually order it by the user. I d. And then inside here we'll have an object that will include things like theaters, email, address. Let's move this along a little bit. So this will contain things like the email address. The name may be that user name and like a profile picture says an avatar, So that should do for the users object. And then for the photos, this will be very similar. We're gonna order it by the vote by the photo I d and then inside here would just use the same format for this one. So we want to look at things such as the author, I d This will be the usual idea to correspond with this Andi. Any caption that the image might have the time stamp from when the image was posted and then just your l to the image. So to begin with, if this is all we would need for the photos and then in a similar way, the comments will be quite similar to this. So would have a different object for each photo I d. And then inside here we would have a list of objects for the comments for each of the photos. So this would the format for this would be four slash photo i d. Then four slash come in i d. But then in hair, they would have options. So this would include firstly, the author. This would correspond again to the user I d. And then we would have a time stamp. Some would call this post it, and then the actual comment itself. So to begin with, database should look something like this. So now let's go into fire Base and actually structure this out and show some examples of how this referee look in the database. So we're gonna go first to our photo feed in a firebase project, click on database and then we're not going to use cloud Fire store at the moment just because it's still in beta. We're going to scroll down and used the real time database. So just click on create database. Don't worry about the security rules for now. We look at this later on, so just click start in test mode and then enable. Okay, so now we have that database created. Let's go ahead and actually start to build some example data into a database. Just we can have a look at the structure and then test yourself in the U. Y later on. So to begin with, we're going to create the users object on. Then we'll directly import a example. User like this on inside here will have each of the values that we mentioned for the user, so it just starts with name and then the user name. See how it looks just over at symbol in front Andi email and then a profile picture. Let's use a service that just can provide us a random profile picture to begin with. Okay, so let's just click on, finish it, Um, and in at example, user object. So here we go. We have three users, an example entry here and then the data for this user. So the next thing we want to create is an example photo. This will be under photos, and then inside here, we'll have a photo I d. And then again inside here will have the actual entries for our photos. So two things here was often it's less actually make this link up with that user. Then we'll have an example. Caption After this will have the time stamp that the photo was posted and then finally the girl off the image. So now I've just copied a Majoro from Splash just for this example. So here is a photo. So I've got the photos object than the photo I d and all of that data for this. Thank you. The case of the last thing we're going to create now is an example Coming object. So this will be comments and then insight here will be the photo I d and then inside here will be the first comment, and then again in here will have the actual data for each comment. So this will be offer. So this will be the usual idea we've set down here the time stamp that it was posted on finally actual comment itself. Okay, Okay. So if we click at again and just have a look at this one, we have a comment subject and then the actual object for the photos that we one of thes for each image on then the comments inside this objects here. So this is how I database is gonna be structured. Obviously, users will link up with that authentication list, so when you just country log in, But for now, this is what we need to actually go in on change app display so that we're not just just playing items from an array were actually fetching all the data from our database is that we're gonna be looking into in the next few videos 24. Begin to make calls to the database to fetch information: welcome back. So now that we have a data base structure planned out in some example, entries added in we can actually go back Teoh, co editor on the simulator and replace the hard coded elements in the flat list here, where we're using this array at the top to actually check the database and pull in the information from here. That's what we're gonna be working on in this video. So to start with, we need to import at conflict file so that we can connect and use a data base. So to import, this is the same as we did in the previous modules. So we just select the elements we exported from the conflict file. Then we just need to make sure that we get the path correct. So back to directories into the come pick photo in the comfort file. We also want to make some changes to our initial state as well. So we're gonna change this photo feed to be an empty array. We want refreshing to stay the same or freshest the same. We're gonna add another element to be loading, and it will be true. To begin with, we're also gonna add a new function which is gonna call components did mount. This is gonna be run as the app is opened up. Just check that first letter there. So in here, we want to call a new function we're gonna create just now. That would actually load the feed from a database just here. So now we're gonna create this load feed function. So the first thing we're going to do is reset the states like this on, but also going Teoh set a variable, which is gonna called that. And that's gonna be equal to this because we're gonna be making a fetched to fire base, which is when you do that, you can actually access this. We still need a way of accessing the different functions on state. Nothing like this. So that's why we're gonna be creating this very well. Just here. And then we could straight in Andi, make it cool to actually fetch the photos from the photos element in our database. So start by typing in database, which we imported appear, Let me set the ref, which is photos, and then we want to order the photos that we're going to be fetching by the date, they were posted. So we look into this more later. We have multiple photos in our database, but for now, this will work. Okay? Sensibly. Order it. We want to fetch this data once, so it won't be updating whenever a new element is at it to be in with. And then we complete the rest off. Then we compete the rest off the function here. So in here, we'll get the results off this query. So first need to check first me to check if any photos were actually found in this database . So we do this by checking that the value off the snapshot which we define here, if the value of this is not know or empty. So then we simply say if the data exists, then we set it as about as a variable we can use. And then it can continue on and use this throughout a function. It's what we're going to do next, then is actually looked through all of the photos that returned. Before we do that, we're going to actually make a connection to this photo feet part of the state just here. This is how we're gonna do that So as you can see, we're calling that here, which we defined up here and there were accessing the state as you would normally and then photo feet. So we're using this later to actually update the state with each new photo that we fetch from the database. So now we're ready to look through, so we do this by saying four photo in data. So what this would do is for every part of the data which we define just here, each element in this object that's returned, we want to define this as photo, which we can then use. So for now, this would actually set it as photo Example idea. It would run once. But if we had multiple entries insight, this part, that database, it could be photo 81 23 etcetera. As we move along three days for lead Now, there were inside here. We can actually set the data for this photo into its own object. So we do this by defining the object name, just hearsay photo object options. And then we access it by data, and then we just pass in photo. This would be the idea that we mentioned a minute ago. So now we need to actually make another database called. This will allow us to access the user information By using this author justice, this will be returned in its object. We just set. Then we can go on access further information for this user just here. So it is safe Time will copy this same command to use at the top and added just down here, be sure to close the office Well, and then we just need to change this today. The reference as users and then we don't need to order this, but we have to set a child off the offer. I d. So this is the photo object author. So that means in here will have access to the display name and use the name on a profile picture off this user. So at this stage, we can start to actually put together the different aspects off this photo and adam to a photo feet to them, be displayed inside the flat list. That so we're gonna write out next. So we're going to be using a push here which actually pushed an object onto a photo feed array. We're gonna set the I d off photo that we use up here said the Earl of the Image, the captain of the image and the Timestamp from when the image was posted and finally the offer. So here we'll use data user name. But before we can use that, we actually have to define it again. So similar to similarly to what we did up here, We'll copy this and set a check just here so that we make sure that the user data actually appears. We just need to invent this a little bit just here and then that should be all we need. Finally, we were also going to set the state. This will allow us to tell screen that. And no longer refreshing on that loading is has stopped us folks, because we've returned at least one item to a photo feet so it almost unhindered, is have a few things to tidy up, actually to check for any errors that were occurred when we make this call to the database . So we go down here to a closing this off. You can check this in atom by just clicking on the characters. Just hear and see where they correct you at the top. This means we're in the right one just here. So we're gonna go just before we close this and type in, Doc, We're actually gonna catch any errors. Just a And if there are any issues, we just look them to the console and close it off like this. And just be sure to copy this line. I'm gonna use it again for the actual enclosing check here. What? We actually pull in the photos. So we replace that there. So now that we've written this function, we're actually gonna go up to the component it mount that we used earlier and ensure that this functions being called when we load the screen. That's all for this first video. In the next video, we're going to actually save this. Andi, make sure that we're using the data that we return from the data base here to be shown enough. That list 25. Update our FlatList to user data from our database: welcome back. So the first thing we need to do before we save progress is to scroll down and find the load new function on their going to replace this with a cool to our load feed function instead. So that when we refresh, act like we did before it actually cooled, Lord fate function. So what under is copy? So cool. We made this function before and just paste it in here. Now we can save on, actually open up, up. So as you can see now, we only have one item being shown. And if we refresh this, it will update on display another item. But what you may have noticed so far is this image is different each time we refresh. Now, this is because down in the actual flat list done here, we're still using hard coded images from months Plesch, along with that experience just here. What we need to do is actually make sure that we're using the data from this item object just here. Onda, we need toe, obviously as well. Make sure we're checking to see if the loading part of the state we set up here is actually loading or not. So we're going to add in a number of checks before the flat list drugs to tell the render function what to actually display onto the screen. So now we're going to start by distracting these checks first. So the first check is just going to be a loading variable in the States. So we're going to check if loading is true on if it is true, we don't display some text just here to show the screen is loading and we're just add some basic styling. Just a center, this text on the screen. Okay on. If loading is false, we want to then display a flat list. So to do this will just move this element down here, too, underneath the flat list code just after this closing attack here. So now we're just adjust their spacing. Just here we can now save this and we should see the loading text briefly appear on the screen. So now that we have a flat list inside this loading check, we can actually update each of these pieces of information that should come from the database to be actually from the database by utilizing the item object just here. So the 1st 1 we're going to do is the image itself. So it's do this will select the Ural. We're referencing toe on Splash just to on. Instead of this, we'll just type in item. Don't you are out which links up with the object just here on the euro Parfitt just here. So the next one is the time ago just here. So we're gonna change this. So just be item Don't post it on the same thing again with the author name. This will be item Don't author on. Also the caption says that the item don't captions. So if we save this, you can see now that this information is coming straight from the database. So if we were to go to our database and change the caption like this and save it and then go back to our app in a simulator and a fresh, you can see this is updated straight away. So this would have happened live if we used the other database option we were looking at before. But as we've used the once called instead of changing it on data whenever a data he added or changed except for in the database because refused once this means that when we refresh , it will fetch the latest information for us. So I just changed this back, and then if we were fresh again, you can see it is updated. So this is Stein's look better now. It's more what we're looking for, but there's still a couple of issues that we need to solve. So if you look up here for the time ago, you can see it is just a a time stamp. We want to change this to actually display a much nicer to look at a tribute here. So something, for example, 15 minutes ago, one hour ago, a day ago, this would be easier for the user to understand. So first, what? It's gonna write out a simple function that can convert this time stamp into a more human, readable former gonna At these functions just here it's gonna be two functions we need to create. One of them will convert the time stamp into the actual time ago. On the other function would just be to detect if we need to add an s. So, for example, if it's only one minute ago, we don't Adam s but if it's two minutes ago. Burrito next to the end. Just a simple function. First to check this. So in here were literally just going to say it's it was one return. A guy this just was facing front. Andi else return? Yes, a guy. Okay. And then this will be used in its function About two right now. So this isn't recalled time converter. This will take in the time stamp, and then we're gonna add a function in here. So what we need to do first is actually a sign time to dump into a javascript date format, and then we're going to convert this date format in two seconds. So first will use a time stamp up here and convert it into a date format. And now we're going to create, uh, this We're gonna use this state format we set up here and convert this into seconds. So this will show us how many seconds ago this time stamp is from today's date right here. Listening to fix this actually should be take away. So that's what we need to do to convert this into seconds. Now that we have the number of seconds ago that the time stamp was made. Now we need to make a number of checks to see if this number of seconds is equal. Two years, days, months, and so on. So first we'll check how many years. So to do this, we'll divide seconds by the number of seconds in one year. So just make sure you talk this number incorrectly. So it's 315 36000 This variable now will tell us how many years ago the seconds were So we just now check if Interval is great to them one. And if it's well, then return the number and after a site, so that could be one year or two year. It's a really to actually check if we need to. Add s of the ends is where the plural check function comes in. And then we just pause in the interval. Just here. This could to return one year or two years. So now we need to update the interval here as we're now looking to see how many months so this number will be to 59 So 000 to check the spelling up here. And then we do exactly the same thing again. So you copy this. Pasted underneath. We want to change this from year two months. Then it's the same process again. Copy this. We paste it, We update number of seconds. So for this one, we're looking for days. So that would be 86400 So we changed this two day and then we copy again. Change this 23600 And how? And then finally we could be again based. Change it to 60 at minute. And we also want to do a final return down here. Four seconds. So if it is less than one minute, then it will get down to here. I dont be second instead, but we need to change this slightly. So I don't want to use the interval variable here or just say math floor seconds and then would also instead of passing the interval, just here would pass seconds. Okay, so let's just test this now. But just before that, we need Teoh update the post It, uh, call here to actually use this new function. So it's a that doc time converter, and then we pass in the timestamp just here, so If we save this, you can see now this is updated to say three days ago. Now you need to make sure that the posted part of the database here is actually a valid timestamp. You can find one of these by going to search Google for UNIX Timestamp and click on this UNIX timestamp dot com. And you can either type in the date and time to create one. Or you can just get the current times time just here. And if you paste this in, enter Go back to the simulator. Refresh. You can see now this is 14 seconds ago. This works really well and it's a simple function you can use to actually make your dates. And time is much more readable inside Europe. So in the next video, we're going to start Teoh, take us up even further. So we're gonna begin to add in user authentication secure database so that we actually have security rules in here and then start to move on to actually uploading photos on begin to look into comments as well 26. Add security rules to app (part one): Welcome back in this video, we're going to start to secure up app. So the first thing we need to do is move into the fire base, that board, go to database and click on rules. So at the moment, your rules will look something like this. So what we're going to do now is actually move through each of the different parts of the data in our database. So I uses our photos on the comments on we're gonna look to secure these. So the only the right users can access these when they should be granted access. So let's start by looking at the photos, so we're gonna remove all of this for now. So first we just add in a new line here called photos, wipe it up like this. Now, anyone should be able to read photos of their locked in or no, but we need to make sure that users can only post photos that will go to their own user. I d. So I'll show you what this means now. So again, for now, for the reeds, uh, permission. We're going to say trade, but we need to do more checks for who can actually post data. So we're going to make some more checks now to see if you should be able to post or right into this the path here or not. So the first thing we need to tell you is create a new object inside here on the variable off this this will be a photo, I d. So because we've made a variable, we can now use this in queries. So the first thing we're going to put in here is just as more comments and we can see what we're doing. When we look at this again in the future, we can easily reference what we've done before. This just means you can only write or read it if you are the author off this photo. So you see what I mean now. So as we put in the rights commission that we open this up, we're going to make a check to see if the user I d matches with the fourth I d off this data. So it looks something like this. So this route, very well dressed to access, is the root of the data. So if we have been a new tab here just look at the data at the same time and we look inside the photos object. So here we have the photo I d. And then it cited as the author. So back over here, we can see that would get into route than the child photos. So, again, this is the main object just here. And then we're looking for the child inside here using at variable that we've set up here. So this will be checking if it's inside this actual photo i d. But inside this, we're going to look up the author, and so I want to get the value of this. So we just access that like this, and then we check to see if this is equal to off use. Ready? So on this, on its own, this would only let you post or edit or write any data inside this path Just here. If the value off author equals your authorization, you're use right. Basically. So this would mean if I posted this on this is my use ready. I can then edit this data. That's editing, But we also need to make sure that if you're adding new information, this also matches the same query. So we do this by I think these just here, which basically means all. So if this is true or new data dot child the author Find me scroll across here. So this new data object just here This will let you query the object that you're writing to this path just here. So we can access this just as we can with the root variable just here for the group object . So what? We're making a check for its to look inside this new data, and we're looking to see if it has a child named author inside here. So we're gonna then get the value of this Onda. We just compare this against the oath use righty. So this is what we're doing just here, which thinks but a calmer at the end of this. So just to run through it again, the user can rights That's edit or post new data. If the existing author i d inside the photo I d. So for this path is equal to the user, I d off they're locked in user. Or if the author off the new data that they're posting in, it's four so equal to the user who's locked in. They used right day, so this might sound complicated, but if you break it down like that, it's It's really quite simple. So that's what should happen if they could write or edit. And so it is gonna make one more check inside here. This will be for the actual author actually itself. So make a new object just to Onda. We need to do a number commanding here called Validates on this one. We're just gonna make one check so it won't be adding in this or just here. So we're also gonna be looking a new data and then just the value and check that this is equal to the orthe use writing. So again, this sort of explains itself and it should shouldn't really be needed, but it's best to double check. So this just means at the author object. So inside photos, photo I d and then offer. This can only validate if the data being added in this So the data for the offer is equal to your use writing. So this basically means you can't host photos on behalf of somebody else. So that's photos. That's everything you need for the photos part off the security rules. The next thing we need to check for is the actual users object. So this is for all the user data. So what we want to have in here is the only person that converge you, the whole profile information. So including email addresses and things like that is yes, of the use of themselves. They can't see other people's email addresses or anything like that. So we need to check what type of data the users can actually access. So the only public information we want to share for each user is there name. They use the name on their profile picture. But if it's your own profile, you can read on right so you can edit your profile when, If you want, it's less right these out now as well. So again, raid. If both my day actually, before we do that, we need to you go inside here like we did for the photo I d. So we go into the user idea just here, create a new object, and then we're gonna make a check for read. So again, this is pretty simple and straightforward, so they're allowed to read. If they user I d equals this use ready for this path, and we're just copy and paste this for the right commission. So again you can edit your own profile. We're gonna make some more checks in here for the different aspects. We want to be publicly viewable. So this is use the name, and so for use the name read. It's true. So even if it's not your profile, you can view they use the name. Just copy and paste this for the name on the profile picture as well. Okay. On day one. Last thing we need to check for is Theo the email address. I'm just gonna again double check like we did up here, so they should only be allowed to be read by the use of themselves. But let's just write this out just to be sure. Okay, so again, this just make sure that only the email can be read by the use of the owns this profile, but the user name, name, profile picture can be read by anyone. So let's save these just for now. Onda. Uh, before we continue on, we're gonna add the comments Security as well But for now, let's just save these on and look at what this is actually done to our itself. But before we do, you just make sure you close this off. So at one more closing bracket in here, and then if you publish, it should be fine. Okay, so that's all for this video in the next video, we're going to look at houses actually changed our app. So you may see at the moment that the data isn't returned. It's just loading this because we've changed the permission here so before when we went to fetch the user able to give us all of the information. But now we need to change this just to get used name on its own. So in the next video, we'll update this Andi. Add in the security rules for the comments as well 27. Add security rules to app (part two): welcome back. So as we saw in the last video, the APP at the moment is just showing this loading text here as it's no actually fetching the data. So if we look into terminal window, we can see here that the provision we've just added have meant that we can't access the user details the way we were doing this before. So if we go into a code and just keep the simulator up here as well, and if we scroll down toe where we fetched the user details, so just here we can see that we're just trying to access the whole user object just here. As we know, we've changed a commission so it can only access, um, the user name, the profile picture on their name. So the only thing we're actually using here is the user name. So we're gonna change this right here. Died in a new line here. So, child, user name. And then if we removed this cool here to actually get the user name part of this object, we take this away and just use the whole data object itself. Fish, because we're just accessing one part of this. We can use this on its own. So if we saved this now and has updates, it's actually affection. It's from the database, and it's all working as it should be. This is just one small change that makes that database and at much more secure. The next thing we need to do is actually add in the security rules for the comments as well . So free. Just check where this closing. So as you can see, if you click on each of thes brackets just here there will be a little line underneath it, just there for the opening and for the closing. So so it just helps to navigate three. So if you just click on there, we can see it close is just here. So if we put a comma and then typing comments, we're just at this in just to secure this as well. So this will be we're not gonna be using this just yet, but over useful for future, the future reference. So we want to make sure that anyone confuse comments if they're locked in or not. So again, we want toe actually check which comment. This is so if we look in a database we can see that Cohen so organized again by the photo I d. And then we have the comment idea inside here. So as we did up here for photos, we're gonna make a new line in here. The photo I d to open this up and then directly inside here, we want to make one for the common ideas. Well, so just before this, actually, we're going, Teoh actually ensure that anyone can read comments what people say read trade. So this line we're adding in here is just to check who can write comments. So we want to make sure that you can only write or edit comments if you're the author and then very similar to what we're doing up here. They need to validate to check that you can only write comments on your own account so you can't make a comment on behalf of someone else's profile. So in here, we're going to say you're right and a very similar we did appear be roots child comments and then photo I D. And then the comment today and then again, want access the author get the value for this. So check if that is equal to the north i d So the user i d And then we want to say, or new data author body and equal total fighting. So it is very similar to what we did up here. In fact, it's basically exactly the same. Just we're also checking the comment ideas. Well, so again, you put a comma just here, and then we want to create a new line in here to check the offer. Perhaps a new object validates. Okay, So as you can see, it is very, very soon. Mitory did up here. Just fix this indentation slightly so anyone can read comments. You can only write comments. If so, only edit your own comments, and you can only create a new comment on your own behalf. So again we can publish this. And so all of the rules are updated now. So in the next video, we're going to start to fill out the you I on make the screens actually check if the user is logged in or no, before we start to actually create the upload page and then finally comments as well 28. Check if user is logged in: in this video, we're going to update the upload profile screens to check if the user is actually logged in . And then we're gonna use this to actually display different information to pan down if they're locked, you know? So first let's go to the profile screen I don't need to actually do is import the comfort file that we have over here. So just copy this pace to end. It was placed in the upload screen as well as what we need in this later on. So once we have that, we're gonna go down here underneath the constructor and create a new function here called Component Did Mount since we're gonna be entering in a data in a moment. But first, just want to set an initial state up here on the actual variable we're going to start with is logged in. This is going to be false. Okay, so now back over to our component it mount function. The first thing you want to do is set a variable called that which is going to be equal. Do you This This is similar to what we did before. We were fetching information from the database. Now it's the same process when you're dealing with authentication as well, because we're going to be making checks that take a moment to check the database. So it's up to make sure that we have a reference to Well, hey, have a reference to this whilst we make that check, that's what that is going to be full. So then we are gonna actually check if the user is logged in or not. So we do this by typing F the variable that we've imported up here on poor state changed with a capital C just so I f off on off state changed. And then we just create a cool back for this. We set a name, a variable name for the return of this function, and then we open up justice. So in here, we check if they use us that that means if this variable that's been returned exists, then the user actually is locked in. So if this exists locked in else not locked in so on its own, this doesn't actually do anything. If we actually now use this to update the states. So if we are locked in, we're gonna update the states we use this very bold of it's up here. So we still have access and reference to this to this, and then we copy it again down here and then change it to focus So on its own, that's simple enough. And it's actually update automatically if the user logs out somewhere else and it will keep everything on this screen up to date. So now we're just gonna scroll down to where we have our return at the moment. So we're gonna create a new check around the outside of this text component just here. Just open. Have bracket. Were going to say this steaks looked in equals True that. Is that a question mark in there? Open up some brackets. Let me add this Just here. This will be if they're not looked in on up here. They are loved in. So now we can displace slightly different information based on if the users actually don't you don't know. So if you know if they're logged in, will just show this. And if they're not locked in, we'll say, you know, then then it's another component like that's site. If they looked in, they'll see a screen exactly like this But if there no, it will say you are not looked in. Please look into view Your profile is that safe? This now and there's an error here. This is just because insight here in this else part of this function appear okay because we only have one element hit. But if you're in any of these areas, need to make sure only one actual component is a parent of a wealthy, so we can't have thes to on their own like this. But if we contain these with inside a parent and and save it and reload, closest off, probably you can see it is that works. I just have to make sure that whenever you are doing checks inside, the return function just hit you. Make sure that if there's two components like this that they always nestled inside of apparent component or view component like this just helps keep sold in order like that there. So now we're going to this very same code for the upload page. So if we just copy the component of Mount Function, we may just here paste this under the constructor on also copy the state that we made, but that in here. And we could even copy this code a swell just to save a bit of time. So everything from just here down to this just select upload so that would not be upload on this was say, please, looking. I upload if I tell you, fix up spilling So the safest now up. Oh, Page. We have this message here on the profile page. It shows this the next thing we're going to be doing, it's actually forcing users to log in So we can change this state just here and start to build out the interface for the profile and then finally move on to actually uploading images into here. So they're updates the state base. 29. Make sure user is logged in whilst creating Profile UI: welcome back. So to start with, we're going to continue on from where we left off in the last video by forcing the user to be locked in. So to do this, we need to first set up a sign in method. So you do that by going to your project dashboard, going to the authentication settings and clicking on set up signing method. And at the moment, we're going to be using the email and password provider. So you just click this edit button in the corner and then enable. And then you just save this on what we're going to do straight away is actually create a test user that we can work with. Walls were developing this app. So we click on the add Jews a button over here and we add a name and address. So it s a test at user dot com, and for now we use a really simple password, which will be password. So it isn't the most secure way of I wouldn't recommend it. His natural part where but for development, this is fine, as we're just gonna be testing actual your wife for the logged in user. So once this is done. Just click Jesu and you can see now that I use it has been added on a user I d has been generated So now we can go into our code. Let's find Atom open house simulator. So here's the African working on over upload, page, profile, page and feet That's what we need to do is first movinto are apt Js and scroll down to where we have this line just here. Sideline 17. And what we actually want to do is create a function toe allow I use It's a log in. We're not going to create a log in form just yet. We're gonna make some be forced log in with the email address and password were just made. So we're going to create this function down here. This will say log in. I think this is gonna be cool in the database to check that the details who provided Okay, So, again, this is what we're the right to just here. We want to force you to log in. So each time that opens, it'll make sure they're logged in already. So we do this by writing this insider's try block, so it's basically just means that any errors are court, so we can see what's happening. That's what we're doing just here. So there's any errors inside this block of coaches here. They will be caught and we can pass this through here and welcome to the console. But they're shoot gain areas. This just helps us to be sure of what's actually going on. So then we just basically say the user object will be assigned to or sign in with a male composite watch. And then all we do is actually passed through the user name, the email address and password that we've just created. That was test user dot com and possible it. So you would never do this in production. But for development onto tested theaters actually logged in. This is a useful way of just switching between locked in Andi locked out states. So now that we have this, we just go down a little bit further. We're going to create a constructive function in here as well. Here is, which would take him props just pops in three like this, and then all we need to do is just say this log in. So if we save this. Now, what we'll see is up here in our profile. We have this check here that would check if users locked in at the moment it's shown that were no, not locked in. Please look into your profiles. When we save this, he will ultimately look us in. And it should update this. That's what we view the page. Next, go to a profile. Let's just check if there's any error messages. Come find variable off. That's just double check this. This is on the line 22. Just here. Okay, this is why. So what we need to do is make sure first, that we import the functions that we used on in flight base. So if we're checking out profile page again at the top up here, you can see because we're making a check to see if you just looked in as we did in the last video. We need to just copy this. Andi have this on their AK. But when you make one change here because we're not inside the directories that were before , So I use a, uh, profile is inside the APP folder on the inside the screens boulder with the APP GS far we're working in here is in the room of this directory. So we don't need to go into go back this money directories or we need to type in is dots for slash. Come pick. So if we saved this now, check the simulator. But I profile. You can see here, we're locked in. This is the first step. Now that we locked in, we can start to actually build out the interface that we're going to be using for profile screen. 30. Building out Profile UI: now that our user is logged in and we can see the profile text on our profile page just here, as we made argue, this means that they're actually logged in. We can start to build out a simple profile interface for this screen. So we're going to start by going to the top of that page here and importing a couple of components that were going to be using for this interface. So the 1st 1 is a touchable pay city on dresses. Check. The other ones have got touch for a pasty flat list style sheet text, you and image. Okay, so this is actually just one. This is everything we need at the moment. So if we just go ahead and say that page just here distended reload, I come profile again. Okay, so now let's scroll down to Page. Just says this is what we're gonna be working with the area off the logged in user just here. So what we need to do first is just change. This'll a style up here. So where we have flex one justify content underline items. We want to change this so that we only have flex one, but We just need to make sure that the locked out user they still have the same style. Just get rid of this extra element just here. So for the main parent view, that's gonna hold all of information, we want to remove these two just here. So this is all nestled inside this element that just has sex one. So now we can go inside off the logged intact, delete this text, compare interest here and create a brand new view. It also has a flex of one Specioza close south. So inside here, we want to have a title. This we similar to our feet pay. So if you just go to the feed page appear or from your directory over here, it's grow down. And we're looking for this element just here. It says, height 70 padding top, this one just here. So just copy that and go back to your profile page. We're going to paste this in. Just change. Writes his feet to profile. It's safe now, just indebtedness. And then we'll save. Just check the the page so you can see we now have a heading. This page is his profile. This is starting to get somewhere now. So we're going to create another view underneath this one. Just again. We're gonna change this dialing slightly. So we want Teoh. I had it justify content and it will be space evenly. We also want to change a line items to be a center flex direction as road. And we're also gonna add some padding this we padding verticals, it'll affect the top on the bottom, Uh, parts of the view. So that ad panning to the top and I'm heading to the bottom. This will be 10. Just be sure to close that few office. Well, it's insight here. We won't add an image. Andi, some text so this will basically have beside each other, will have an image just here. So be a circle, which would be the profile picture. And then over here we have some text. They'll be their name and their user name. It seems to be centered within this view, just here and in a realigned either side of each other Evenly spaced. This we're gonna add now. So you start adding the image. So just at the you are all here in a moment. But first, let's just add in the styling for this. So you want to say a margin left of 10 width off 100 heights of 100 as well on a border radius. To make this image a circle needs to be half off the whip on behalf of the height sets 50. Then he just closed this off like that, also going to create three other view component that will contain the name in the user name . We're going to create this view in here, and it's just needs a styling just to add a margin right of 10. This is even with the margin left of 10 on this image. Just actually keep everything nice and space properly and sent it on the screen. So inside here, we just want to say text name will be replacing thes texts, attributes soon with the actual profile information from the database. But for now, let's just build on the interface first. Okay, so let's just save this after we type in the profile picture so again, when we actually move forward with his app, this will be fetched from the data basis Well, but for now, let's just use just a simple image a P I. You can put anything you want in here. This is just one I found that's just bright. And it will be easy to see what with used. So just hold that there a minute just so you can see what we typed in. Just make sure it's well that you close off this other view component that we've had it in a swell just to make sure that has one 23 opening and 123 closing. Then you should be all right there. Let's just go to our profile and take a look so he see the right profile image we've made just here. This is this euro on. We have the name and news name just here, So this is the first part profile next, me to add in three different buttons so these buttons will allow users to log out. One would allow them to edit. Their profile of one will just basically be a quick link that takes him straight to the upload page. Let's had those in next. So first we're going to add another view component. So let's just be double sure that we're adding once I pin and want to close and we want at styling again in here. This studying will be quite simple. It was padding bottom off 20 and a border to the bottom of this as well. A border bottom width off one. So inside here we want at touch, but a pasty that were imported the top. So what this component actually allows us to do is it makes it makes any elements or components inside of this. If you touch this the pace table Flicka slightly so you can see that the element has been interacted with. I show you a quick example. If I put some text in here and save it, If we then click onto this, you could see it just slightly goes. Expect lights up on fades back in. So this is what we're gonna be using for the buttons on this page. So this button will actually say, Look out, most copy and paste this a couple more times for other buttons, fix the indentation. So this button will say at it, profile on this bottom will say, upload new. Just a little. Plus just there. So this is how this looks without any styling. But now it's just add in some basic styling, just toe smoothing this out a little bit. So I start with the 1st 1 Well, say margin talk of 10. A margin horizontal. So it's the left, and to the right of 40. It's and padding to the top and bottom off the button. So he's putting vertical 15. We were at a board of radius as voters to put a bit of a curve on the bottom of 20 and then we'll just sit aboard a color. It would be great for now. You can put a hex color in here if you want, but for now we'll just say great and then a border wick off 1.5. So if we save this and just take a look so you can see here that we have this curved edge, we have the margin. Either side. You have the padding at the top on the bottom. So now we just need Teoh send to this text because it looks a little bit out of place like this. So you do that by actually adding the styling to the text component itself. So we just say style text the line center and save. Okay, let's just adjust this slightly. A swell Teoh make the text color the same as the border color. So we do this just by saying color great every guy. So we're going to copy and paste this same styling for the other buttons we have here. So it just first get the text and then style the touch of a pasty. For each of these as well, case is safe. That just have a quick look. There we go. But what we want to do is just make this upload new buttons, stand out just a little bit more. So we're going. Teoh, increase the padding. Vertical for this, uh, component just here. So it changes from 15 to 35. I will add a background color off gray, and we're actually change the text color to be white. So if we save this and have a look, we can see now that this button has just a little bit more focus on it than the poverty. So what we're going to do now is actually link up This upload new buttons When it's pressed , it takes us straight to the upload tap. So to do this, we go to the touch, but a pasty just here. Create a new line. Let me just say on press when you open up curly brackets and normal brackets that star function like this and we just simply say this the props navigation. So accessing the navigator that we set up just here Can I address, uh, file to say this? Stop propped up navigation another gates to a plate. So this text here is going to be this part of the up the navigator object, just it. So take us to this upload screen. So this tab that we have set up just here, So if we save this, go to a profile and click on upload new, it takes us to this tap. So it's almost finished setting up the interface for this page. Just have one small part of this page left to do. So we go underneath this view just here. We're great. One more view, not a style again, A flex of one. So it takes up all the remaining space, and we also want to say, justify content center a line items center. Let's just give this a crazy background color that really stands out Let's just say Ah, bright green so we can have a look at this space that this component takes up. So close this few off just here. Put some text inside, and for now, let's just say loading photos, even though it won't be loading anything yet. This is going to be where the user's photos will be found, such as a loading fight, eyes and safe they haven't taken See the screen. It's now filled up because we've said Flex one just here. So it takes up all the remaining space with this component just here. So in this video, we have actually started to build out the interface off this profile. In the next video, we're going Teoh, adjust the home feed toe, have a way of viewing these users profile. So if we tap on this text just here, it will open up the other users profile. Who's made this picture? And we also start to create a A page board of comments as well. So when you click on this, it will open up another page, So confuse the comments, the coming threat off each photo these things were going to be looking into in the next couple of videos 31. Creating our profile modal screen & adding back button: welcome back. So now we're ready to start adding in the extra screens for showing the profiles just here when you click on the each photos user on the comments. So if you could a few more comments you will open up a modal just here to view on the comment Threads just hit so 20 in these new pages, we need to change the way we have our app Js file structure just a little bit. So to start with, we're going to go up here toe importing the tab Navigator from react navigation to actually import a stack navigator as well. So we do this by tapping and create stack Navigator. Just check out spelt correctly. This will import the stack navigation options as well. So what we need to do is change this name here from Maine. Stack Teoh, Tab Stack. This would be at tab icons down here, so Hubble needs to change. We're going to add a new section toe, have the actual main stack. Just make sure you spell this again so we'll add another const as main stack. And this would be equal to create stack navigator and then insight here, we're going to set all of our screens. So we need a home screen, which will be at Tab Stack. So this will be the page that is easier has taken to straight away. So it's exactly the same as what we used for the tab Navigator. We just say home and then screen tab Stack. So actually passing through this whole tap navigate that we've created just here as this screen on what we also want to do is create a user's screen. This will be what showing. If you tap onto these users profiles, this will be we call this user profile will at, uh, this in a moment and importance fired and create a page for this and also comments. It's this way screen comments. So it almost done. We just have to add in a few settings just here, so we need to set on initial rates. So this is the page name that the APP will open up onto first. So for us, this will be home. So go toe tap stack. We also need to set a mode, so there are a couple of modes built into react navigation on the one we want to use is motile. You can check out all of the different options on react navigation you can find all of the options on here is in a P I reference can see everything. I think babies stack navigates you look at you can see the different Moz, there's cart or motile, so it's slightly different. But we're gonna be using model for this. So you stuff mode or just here. I never head of mode. We're going to be creating head up inside our own. You I so we don't need to worry about that at the moment. This will be the part showing along the top here. We want to actually create Hedda's inside of our actual files themselves. We don't want to get ahead of, so just say none. So we're almost done here. We just have to create these files. So for each of these files, questions copy and paste the line up here. This will be use a profile and Cummings. So we have user profile. It's fun here. Then come. It's just here. First we'll create user profile. Now what we're going to do is just duplicate the profile screen, and we're gonna make a couple of changes to it. So if we just look, it's a hair. But in a right click duplicate and everybody say user profile specialist matches Thea file name in here. So user profile, that's great. And then for the comments file. But now we're just going to copy on duplicate the upload file. So I just changed this to commence close this and close these two files now. Anything just yet. So let's just make sure that we have these files here available. So as you can see here because we've changed main stack and tap stack down here, we were actually calling the main stack that we were using before. We don't have to make any more changes because it is already, uh, linked up. So if we go ahead and save this now, everything should look the same. So you have a profile page upload page on Dafydd. But what we're going to do now is actually make a make this text here into a button so they can open up the user profile. Now, at the moment is gonna be just this same screen here. So once we see this open up but then make a few changes here. So, actually factors that uses details. So it's going to have free Js file on find this line. Okay, So what we're looking for is the item dot author component just here. I'll text component. So we're going Teoh Nestle this inside of a touch for my pasty. So first need to check that we have this important, which we don't success at this up here. Just save it. K s looking good. Send me scroll back down to that line we're working on. Then we're going to add a touch ball pasty. Just hit. And be sure to close this office. Well, just indented slightly. Then all you say in here on press, the same as we did before in the previous video. So curly brackets from ones create a function in here. But they were going to call this props, navigation navigates, user, and then we actually want to pass through the user idea so that we can use this in this page. But for now, we're going to leave it at that. I just save it. So if we tap on this now because it opens up this profile but one problem we have straightaway is, there's no way of actually getting back. We could swept down, which will move it, but we need to create a much clearer way of adding the button justice they use. It can go back and obviously changing the design of this slightly because we can't at it someone else's profile. So don't make a few changes next. But at the moment we want Teoh have a way of actually passing through the user I d through to this new screen. So to do this, me to go up to function where were fetching to use his details just here and just here, where we're sending back the users use name, we're going to add a new expert just here called Offer I D. I mean lets you going to pass in the user I d. That we are using up here so free at this just hit and then go back down. So when we say navigate where it says user, just here, they're gonna add a coma, open up a curly brackets, and this will allow us to pass in certain parameters through to this next page. So we're gonna say user, I d it's item or Friday. So you actually be able to use this data in this profile page that we've created. So if we just opened this here, we'll be able to use this data inside this page so we can go fetch that user's profile information. Is that so positive through just to so where it says, user Justo, explain this a little bit more. This user navigation don't navigate, we're passing through. User, just hear this correlates to the name user just here. That's why I will go to this screen rather than this screen. So if we make changes onto this, page will be shown when the user clicks here. So first, let's just change this design a little bit and had to go back button first. It's well, let's just save this file. Check this working still? Yeah. So it's working with passing his day to three so we can actually start. Use this on the profile page. So the first we want to change is removed. This logged in check in the states just to say loaded and this will still be false to begin with, will remove all of this co Justinian checks. If the injuries loved you know no or remove that and will soon be creating a new function just here to check the parameters. This will be looking to see what data has been sent through just here. So this is what this functional be used for? Just a And then we want to create another function to fetch the information off. This, users of that profile picture their user name on their name. So we're passing a user. I d just hit on the morale dysfunction in a moment. I would also want to check the parameters as well. So what we need to do in the component it mount? Yes, we can remove. Uh, this pictures too. I'm electorally say this check programs, because what we're going to be doing is making the call to this function. Once we have actually fetched the user i d in this function just to So now let's make a couple of changes to the actual you. Why itself? So we can start by removing? Uh, this checked is too. We don't need to worry about if you're locked. You? No, No. So you can get rid of this. We get rid of this just here. I'm actually going toe had a new check to see if the actual user data has been loaded yet. So you work in exactly the same way will say this state loaded his folks. Then we want to say, Send a message onto the screen. So the pages loading just a simple message like this. And then if it's no so if the page, if ST dot moated is true, would display a profile. And again, we want to remove these buttons just here like this. So if we save this to begin with because we're not actually changing the Loaded State, it should just stay on loading. So as you can see here, we haven't centered this text or anything yet. So it's just saying loading and it's not changing. That's what you want. Now what we're going to do next is actually write out these functions just here, so to start with, we'll work on the premises function. So what we're going to be typing in here is a check to the navigational prop just here to fetch this date that we're sending to the page. So we're stopped by saying Create a new variable cool parameters. Haram's and be this Doc drops navigation, not state don't friends. And then we're first check if this exists, and then we'll check if the actual user i d actually just here exists as well. It's like this. And if that exists, we can now set the user I d into our states and then run the effects user info function. This just means we can reuse it further down the page if we need to. Okay, So what would you first is actually add in on a lot just here so we can see what is actually being posturing. So we save this on top on this, but then again, we should get an alert telling us this users i d there. We asked this idea here. Let's check if it links up with this photo in the database. Suffer. Check in Here. We have a photo I d. And the author here it's this user I d. So we'll convict users there again. It's that used right, eight. And as this information. So remember that security rules wait before we're allowed to access the profile. Picture the name on the user name. So in effect, user info function, we're going to actually get this information on, display it on this page. So we'll start first by creating a reference to this like we did in the previous file. So save our that equals this so we can use that throughout this function without worrying about if we have reference to the actual objects or not. So we'll start by calling the database ref users. And then we'll actually say child, use your I d just here. Which is why we need this past three and then we're going to get the actual user name. We want this once. We don't need to update each time, so once. And then we'll set this to be off the value of snapshot, create a function and then wait for the call back. So again, as we did it in the feet page, when we fetch the the data up here for first check. If this data exists, so const exists is equal to snapshot value. Go se the first check. If this is empty and if it exists, data equal snapshot idea. So from here, we can assume that this data does exist on its equal to data for just well that correctly So if we invent this line just here, we can no set estate. Certainly that because we set this reference just to set states use the name equals data. But one more thing before we're finished with this little block of CO two factually use 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 era consul lock era. Just so we have a understanding of anything that could be going wrong whilst or in development. It's now the way efforts in this we're gonna copy this and paste it on, paste it again because we need to use this for the name on a profile picture. So it just changed these as well. And on this last one, we just could say Load it. It's true. It's This means this data is not fetched. We can use it inside Iraq. Now, in this example, we're making three separate calls to the database Now, normally, we wouldn't be doing this, but because off the way, we have structured a profile here, not the profile Watmore the security rules. We have Teoh actually fetched. It affects the data like this. Otherwise it will come back and with an error because we can't fetch the whole user object unless we are that user. So it's a small work around just infectious data. I've done it this way just to show the different ways that security rules work so normally when you're building an app, you would have he uses object in the user, and then maybe you would have the private data just outside of it like this. And then a knob checked in here called public and then the name on the other data in here so you could just say Ford such public and fetch that all in one go. But in this example, we just kept it simple. And we have data like this. So again, back to dysfunction, dysfunction is all it needs to do. So down here now, we can actually use thes user name, name and profile picture down here so we'll start. Let's just gas simulator back. So we'll start by first changing the name just here to be the name that we now have from mistakes. Something this dot state don't name and again the same thing for use name this dot State don't use the name. And then for the actual profile picture just here we just say this state have it all. So it's that simple. We saved this now, and click on a button over here I touch for their pay city. It opens up with the information from the database. Now, the moment we have to act symbols just here. So the user name in the database must yet has one already. Now, these profile pictures, what you'll notice is each time we open up the picture, they should be different each time. Yes, So you click it there, you see, it changes. Now, this is just because off the image ap I we're using here this example profile picture. But what we're shown later on is actually uploading images and saving them to our own storage by fire base. So this is how we add user profile. So one more thing before the end of this video, we're just going to add a button just for the use of crowd to get back about having just wiped down like this. Let's go back to I CO just to Andi. There's a few ways you can do this, but probably one of the easier ways is to create another touch below pasty in here and inside this, we're gonna add a a text component, which was saying, Go back. And then it was my own press similar again to what we've done in other pages. So open up, curly brackets create function and a miracle this the props don't navigation. But for this call, we don't call navigate. We just say go back like this. So if we save this whoever don't design yet But if we save this and have a quick look, we haven't closed this off to see what makes this relied. If we open up, the profile here, you can see, is as good back. If we click on that, it closes it down. But let's just adjust this styling a little bit more so that we have, uh, go back in the left over here, and we could even create space in the right, everyone to add something as well. Let's adjust this because that looks a bit jumbled at the moment. So to start with, we're going to add some more styling. And here so where we have a line items, that's fine. But we also want to say justify content space between this works well, tow us have elements pushed either side 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 if we go in here, has had another text component. Just here has been a question mark for now. Let's just make sure that the wits off the one on the left and the one on the right are the same. So just copy this for the touch, but a pasty as well. So we save face and have a quick look. So what you can see that's happening here is the flex direction default for this view component just here is to set everything in a column. What we want to do is change this to appear in a row, so we just type in flex direction, right? So if we save this now, so we have a flex direction, we have our justify content which airlines things in a row like this across and everything is centered, so we have a quick look. You can see its position now like this, but at the moment we don't know if you want this item here. Toe. Have any information? It also get rid of that. Let's just make this bottom stand out. Little bits will have some styling to yes element. So I have a full size of 12 front weight of boats, just a little bit of padding on the left hand side because right up against the edge of the screen here, say, 10 putting left. So if we save this and open up there we go. This looks a little bit better now. We can easily click this button, and it stands out because it's a global small attacks but is bold. And then we could easily add other buttons and things over here. A swell. So in the next video, we'll look to add a comment screen, which we created the file for earlier and also create a button here to actually open up those comments as well 32. Adjust comment file & add button to open comment screen: Okay, So before we can add a button here to actually open up the comments screen, we need to make a couple of changes to a comment screen file. So if we just open up aside by here and open the currents file as we are duplicated this from upload page pictures to adjust this slightly, just show that it is actually the comments page so changed, upload to comment onto would change this. Teoh pleased again to post coming. So it's safe. This this is the only change. Me to make this file at the moment. So let's go back to the feed file. And now we want to actually wrap this text component inside off a touch below pasty similar to what we did before statues. Copy this, actually, just a and then close it off as well. Just fix the indentation. Okay, so you want to change this text a little bit just to make it look a little bit better, reflect that this is actually a link and we're gonna change this two comments and we actually want this to be item don't I d So that's the actual photo I d. That we set up here, so I d just here so we can actually fetch the correct comments when we fully create the comment screen later on. So if we save this now, we can see this. Designers updated. And if we click onto this, it shows that comment page. This is everything we need to do at the moment, just to update feet page to show that we have comments on here. So the next we're going to do is work on the upload page. So we're going to look to just just adjust this display a little bit so that we have upload , showing in a little bit larger text and then a button that can open up the image pick up so we can then select a photo and applied it. That's we're going to do in the next video. 33. Building the upload screen part one: Welcome back. Now in this video, we're going to be focusing on the upload page. So let's just move into this page now, in case the first thing I want to do to this screen is a just the overall styling off this page just here. So the first we want to do is take out this, justify content on a line, items that's dialing just here. Onda, we just want this to say Flex one, and we're gonna make sure that the locked in user that we had a new view component just here I would actually I add this flex once dialing down here as well. Just that it takes up the whole page on what should probably dio what we did on the other page before. It's just add this styling old to the locked out Peter, just that we keep everything consistent. We just saved this change so far, we shouldn't say anything different at the minute. Okay, that's fine. That's because haven't center this yet, but that's fine for now. So inside here we want Teoh change the styling, this upload components. Let's just had in this new styling now we want to increase the font size. How should be 28? I'm gonna add some padding to the bottom. About 15. Let's just have a look How this appears. Okay, that seems about right. But again, we actually need to send to this. Let's just change the starting here. The case there, we have upload. And now let's add another text component underneath this going to act as a button to actually let the user click on it, and it's select a photo. So the moment we can't interact of it so we need to do is at this into a touchable, pasty like this. But before we do that, we also need to import it at the top here, as you can see like this just to remove that little era. Okay, so that's looking like a now. As you can see, it's well done here. We have a warning. This is just showing that I spelt this style attributes wrong. So for just change this, that's when m here you can say this has now adjusted the padding accordingly. So if we actually tap onto this select photo, we can see now that this is touchable, let's just change the styling here just to make this stand out a little bit more. So you want to add some padding to the top and bottom of the element and also to the left and right, We'll add a background color just a blue at the moment. Just so it stands out a little bit, and then a slight border radius. Just add a bit of a curve to the edges. Let's have a quick look at this when we save it, see how it looks. Okay. And then one more thing just to make this text and out a little bit is just to change the color off this text in here. Okay, that s all right for now. So we're going to do is add on on press event to this button so they can cool a function that going to right next. So it just simply write this in like this and say this, uh, find new image. So this will be the name of the function of about two right, which will open up the image pickup and that the user selective photo and then upload this to the database. So it's safe. This Andi actual copy. Let's to use it to make a new function up here. Okay, so this will be a new function. It's just in dentists a little bit. So in the next video, we'll start touched you right out this function. 34. Building the upload screen part two: Now that we've added the initial parts of our upload page onto this file, let's start to rile the rest of the page. So the next thing we need is an image I d that we can use throughout the rest of this page . So good put in zero for now. But we're going to create a natural function, especially to create a unique I. D. So we do this. It's dysfunctional. Be called unique. I d Andi Inside here, we're actually gonna call another function to return a a collection of letters and numbers that will create a unique I D. But now we can just change this here to say this stock unique, I d. So we'll create another function here. We just call this s four Onda who want to return a sequence of letters and numbers that are completely random. So we'll do this by using math floor and we're creating random number just here. Just fix this. And there were times it like this, just so it allows us to get a completely random string like that. Our provides a link. Teoh, this whole unique I d function just to make sure you get the exact code in here. Just continue to get this pig just right. So then we'll return a sequence off these functions. So be this start export. And then this Dr X four. But what we need to make sure that we're doing is in between each of these, we add a dash, so that could be easier to read. So just here we'll put a dash like this. So now we can copy this and paste and again we have 1234 I put the next one on another line like this. So 12341 Hey, 34 Just fix this a little bit here and call it like that. So if we now I run this page but say alert, they stopped unique I d. That you see an example of what this shows? Just move it into the constructive function. Then we'll go to the upload page, get a problem here. We haven't put the brackets around here. Okay, Is there versus that's sort of unique idea that will be getting This will be the idea that is assigned to our image. I d up here. This is great. So now we can't you move onto the rest off this page, so we need to import a few more dependencies up. Here's thieves ones were actually come from Expo. This will be permissions, Andi image picker from Expo. So the reason we need commissions is that before we can actually access any of the user's photos from their phone, we need to actually allow this permission and then the image pickup is theatric resource we're going to be using to select images from their camera. So we'll write out a function now to actually check if these permissions are enabled. So I called his check missions. This needs to be a sink as we have to wait for a result. We can't just run this. Normally, it says, actually, the same dysfunction down here, a swell left to actually make a call to the fire base storage. So why not take this as well? So, in this check, commissions function just Hey, we want to check if we have permission to the camera onto the camera rolled. So we start by just creating a constant and then say awaits commissions. So, using this component we've imported up here, So I say commissions ask a sink commissions camera like that. And then once this has been confirmed, we actually go. Teoh, update the state. I would actually say camera status. So ever status his return, we'll update the state to actually reflect this. So a copy this again Full the Camero. And then we just change this to show camera roll like this. Okay, so that's what we need just to And then if we scroll down the page where we have our find new image function, the first thing about to cool in here is this check permissions function. So if we save now, go to upload page and click on select photo. Because I've actually already checked these permissions on another app on my expo simulator . It hasn't asked me, but normally this will ask you now if you allow these commissions and in the future video actually shows how can customize this message won't actually publish your app to the different APP stores. But this is the point where it actually asked user four that commissions. So the next thing you need to do is actually make sure image picker is opened up. So the way we do this, we say let result or any variably won't just hear. This would just be the variable that is assigned the data that we is assigned to actual image that we pick. So again we use a weight image. Pickups were using the image pickup resource up here that we're importing, and then we say, Launch image, launch image library, I think, and then we can pass for a few options just here as well. So the one that we also need to put in his image types or media types and this would be images. So this make sure that we don't show any video is just any images that they have on that phone and then, we say, allows editing. This allows us to crop the image that it's a square, and then we'll also set the quality to be one. This is the highest type of quality that we can send back. I think it starts at 0.1 all the way up to one. That's just the, uh, level of compression that is actually applied to these images. So at this point, we actually want to look to the console, the result off this function just here, so when we called to select an image. You want to lock this toe a console? So what we're gonna do now before you're out, the rest of dysfunction is just to an example and show what data is locked to consult. So open up that console on the simulator at the same time and select photo. This opens up our image pickup. We can then go in here and select a photo. So if we pick this one is the editing options. I can't actually pinched a zoom on here because it's assimilated but normally consume nto Pick the party mitt. You want to be in the square, It's any click choose and we see a result just here. So as you can see, it's an option it's has canceled. This will be true if he's actually clicks cancel up here. So this means we only actually want the next part barcode to be applied if canceled. It's false. This is we're gonna put in the code. Next, So say if result canceled. So if this is folks, but then continue Teoh, create the rest of our function, and then else will just say console log canceled just so you know what's happening in here in the future. So inside here, if the users click select photo we want to do at the moment is call another function that will process this process, this image and upload it to our fire base storage. So when I would just say console log, uh, upload image, they were calling a different function. Just here's what say their stock upload image that you pass in the U R I off this photo as far as you can see here, we get the heights on the width on the type. But all of these types will be image than the your eye eyes shone just here. So this is what we're gonna be using to pastor Extra. Same result. You are. I so next we wanted Teoh is actually create this function. So this function will also be a sink, as it will be uploading three image. So we're actually right out this function in the next video 35. Building the upload screen part three: welcome back. So before we can start to actually write out this function, we need to actually adjust storage options inside fire Base to be ready. So I've actually already got this one will set up. So I just create another example just to show you. So when you first click on stories, you'll see a page that looks like this. So we need to do is click on get started and say, Got it. This basically eyes explaining that the default storage security rules will allow users to only adjust things if they're locked in. We'll be updating this before we actually finish this up. We'll look into this in more detail. But for now, we just need to click on, got it. That will then update you to this same place just here. So what about this error message? It went through that You So when you then get onto your page just here, you'll be ready to start actually uploading. So the first thing we need to do now that we've updated this is go back into our co editor Andi, actually stock writing at this function. So what we need to do in the same way that we have in other places is create a reference to this. So say that it calls this. We also want tohave The users use righty available to us. So I say or currents user you I d onda We also need to get the image i d. So we'll get this the same way that we used at the top of the screen. Vice brothers correctly sabih image i d As you can see, it's the same up here and we're using this functionally created earlier, so so far have thes purple set up. What we need to do now actually is sets the actual extension off the image so it could be a J peg a PNG a gift. You know, all these types of file extensions. So we're gonna right a little bit of code now just to check what type of extension they have used. So you use a regular expression for this. I'll provide a link to this code as well, just to help type out quickly. But what this is essentially doing is looking for a sequence off characters in the string. And it was then when it finds a match, it would take that match on. Uh, we can use it as a variable, uh, in our code. So for us, it will get the the last, Doc. So? So we have a string like this, it will look for this doctor's tears of the last stop in the file name. And then it will pass us have to extension. That's used. So then say extension equals you. All right. And then the second part of theory to the first part. So zero, the first part would actually be everything before the dot. So all of this in the second part here, Bay B and G like this, such is too quick. Uh, check just here to get the file extension. Never update the states with the actual file name or the file type to stay current file type. It's the extra. So just quickly check the type yourself correctly. Okay, so I know that we have a file type we now need to turn our image from just a You are right like this into a blob that we can actually use to upload to five a storage. So we do this by creating another corner just here with this one response on this will say await again. This is why we have to use the sink. Just here. Fetch you. Are I? There was a const blob. A weight response, love. So what this is doing is this function here is creating a I fetch call to this. You are I So this path we've got up here and then we're turning this response into a block . Is this what we're gonna use to update? I upload this image to a storage? So now we want to actually set a file path so this file path will actually be the image i d with the just mixes it with the extension type. So I say that what state? The current file type. This just means that we're using the same type. Were not guessing what the extension is going to pay. So we can use this to actually create a reference to the storage Onda. Obviously, up here we have imported story, just it so we can use storage done here. So we say storage dot ref. And this will be a user forward slash user i d full slash image when the child will be the file path variable that we set up here. So this will actually be the location in the fire base. Storage to incite here will create a folder for each of these parts of the path. Still be a user folder in a folder for this user, I d in a fold up for their images and then the actual name of the image. So what we have to do now is similar to the way we fetch information from the database. We're going Teoh cold, make a call Teoh Firebase Storage to actually upload this image. So it's a snapshot equals breath. This will be this reference we set up here, puts blobs, this blob that we've made from there via type, and then we actually want to listen to see how the up bogus governments always say on state changed. So insight here will be updated as the actual file is uploaded so we can say console log progress. Then you can actually access how many bites have been uploaded using bytes transferred, and then you can actually get the total size of the image with total bites. So if we save this just here, let's see, actually, what happens if we use this in a we're going to upload select photo treatment of the default options. So this one click choose. And if we check in here because here's an error. So it's online 62. Okay, The problem here is we haven't actually passed through the your eye as we're supposed to see up here. We said upload image Never passed it through just here. Listeningto uptake. This so we actually have access to this? You are I for the rest of our functions. Have we saved this again? And just to the exact same thing came with cheese. Then down here, you can see the progress is updating as the file is uploaded. So if we actually go in here now under fresh So we have a folder. So the 1st 1 its user and then we have a folder for User I D and the image folder. Then in here, we actually have the unique I D that we created. And then the actual image. This should be the image that we uploaded. This shows how quickly you can start to put the different aspects off the five. A storage on the image picker together to actually select a photo on uploaded so the next video will actually improve on this To actually allow the user to have a caption. Onda. We won't make this upload call until they had a captured, um, to that image before finally actually showing the updated data on the feet so that these photos can be shown within the APP. These are parts we look into in the next few videos. 36. Building the upload screen part four: welcome back. So in this video, we're going to continue to work on the upload screen, and we're going to be adding in a area for users to input their caption, and we'll show the progress off the photo whilst it stop loading and also give a little preview off the photo they've selected. So to do this, we need to make a few changes to upload screen. So to begin, if we need to import a funeral, things from react native. So this will be text input. We can allow users Teoh had in text, and the other thing we need is the activity indicator, so we can show a little spinning, loading icon whilst the photo is uploading. They cannot pull in both of those like this on. We also need to add in a few more options to our state. So we first need a variable called Image selected so they set to focus. We need another option to see if the images uploading this will also be set to force to begin with Andi A another variable that would be a string off caption. So they used to connect this when they had that caption, so We just saved this quickly, Just move along. And then the next thing we want to do is move further down the file just here. We're currently called the upload image function. As soon as the user selects the photos, obviously we don't want to do this. Instead, we want to actually change the state so that we can display a different area that will actually where we will be adding a caption in this information. But first, let's just fix this little area just here. Just about false correctly. Just re like that. Okay? So back down here again. We're looking at this piece of code where we currently call the upload image function. So we're going to change this world first, we're just coming this out, and we're going to be setting a state instead. So what we need to do in here is change this to say, image selected. It's true. We will also re create a unique image. I d. Just in case they've uploaded one vote already and they're going back to upload another. That's just make sure that the image ideal be unique. And then we also want to set the image you are I into the state so that we can use this when we display a preview of the images of the users uploading. So after we've updated this, we can move down into the actual displace. We can update the display of this, but first, we also need to update the state here if they cancel. So always say in here his image selected his foes. Is this Just make sure that we know that no images currently selected so you can enable despots and again so right at the moment we're gonna move back down here and change the display off view a little bit. What we want to do here is first make sure that we're working insight the logged in area off the view on we're going to add in a brand new component that will wrap everything in sight. So we'll call this one. This would be a view, and it will just have a style of flex. What? So just close this down here and did this and then what we want to do in the strait inside of this view is just check if an image is currently selected or not. So just as in a coming just Teoh just to define what we're checking. So check if an image is selected. So actually, then just make this check. So this state in which selected it's true, they want to run some more code inside here. And if an image isn't selected, we actually want to display this area over coat down here like this. Which is why we added this new rapper rapping view component up here just sort of already displaying something. So then inside this area, you also want to add another views. We can actually copy this one and close that off on inside here. We can start to create mawr logic to actually display the details in the caption and everything like this. So we're going to do first is actually copy the title we used in the feet age. So up here where we have title here feet. We're gonna copy this just to use the same styling across the rest of the app. What you would normally start to do now is move out these in line stylings into classes. But we worry about that later on. So we'll change this to upload. Then make sure that fuse closed off. They were going to create a brand new for you down here. Give this Lovett of padding Just space out a little bit more so in here we want to stop to show where the user can add their caption. So if this will use a text component to sell over margin here as well, So just say caption And then after this, when you to actually add in a text input that we imported Let's start the video. So you used this just as you would any other component we add in some props. It's quite a few props for this, so let's just run for three days now. So the 1st 1 is creditable. This will be true. We also want to set a placeholder. This would just say, Enter your captured. I want to set a maximum length that they can actually enter into this box. This bay, about 150 would allow the user to go over multiple lines, and we're actually set a maximum number of lines as well. So we'll let them use up to four lines and then this prop here will allow us strategy update the caption variable in estate when anything is entered into here. So it's a on change. Text text will be equal to this set. State captured That's just writes correctly captured taste. Is this just update the state every time this input field is changed. So now we just add some simple styling into here as well. Just to make this text input area stand out a little bit more so handsome. Margin to the top in the bottom, we will set our heights off 100. That's, um, patting his bow about five little grey border. What's that? Whip that swell of just one at a little radio just to make it appear a bit nicer. And then we're actually set a background color off white on a fault color or text color off black. A case. That's what we need Justice with me. Save this another quick look, Just fix this common just here. So if we're gonna have a look at page now, So if we click to select a photo if we cancel this it look the same. The factory Select one. This will update the image selected variable that we set. Okay. One thing we need to actually check for us. We always when we set the state just here. Make sure you use unique I d. No image i d So we just saved this and run this again. So I go to upload page were already checked with cancelling somewhere Hasn't set the image selected variable tree. True. So now we will use this area. So select an image which will update this bit just here. And you can see where we have a caption box and I text input where we can add texting Just here. And there was also the placeholder. Just that. Let's just fix this small little error we created just here. Border radius and just have a quick look again. Okay, that's what I've been good. In the next video, we're going to actually add a button so you can publish on upload the photo, and this would be Well, we're used our activity indicator to show the three images actually uploading, and then we'll adds a little image underneath here to show you a quick preview of the image you're actually uploading 37. Building the upload screen part five: to continue. We will be staying in the upload screen on the next move, going to be working on his down interview again. So if we just go back down here, so just underneath our text input, we're going to be using a touch but a pasty, which is going to be the actual button to upload the image. So we let this it now, so a touch below pasty. This will have a non press event, and we'll add the function this in a moment. But we will call it upload, publish. It's that will look like this. We'll add some basic styling to this. A swells will align this button to be in the middle middle of the page. We'll give it a width of 170 and we'll add a margin to the left and the right off auto. And we just give this a background color of park just to make it stand out a little bit at a border radius again. To keep things consistent on that page at some vertical padding, just make sure we the vertical with a capital letter and then at some horizontal petting as well and an inside of this touch put up a city. We're going to be adding a text component which will say upload and published. Just pick suspending on just for this text component. Want had a little bit of styling in here. Just Teoh align the text to the center and change the font color to be white. And then just make sure to close off the touch of a pasty. Yes, Well, so we just saved this and have a quick look to see. This is appearing. So we select, upload a photo, select an image, and there we go. This is our bottom. Just here. So underneath this, we want to add some text that will show the actual progress off upload Andi. Then a preview area down here will show the actual image that we're uploading. So the next thing we want to do is at a way of checking if the actual image is being uploaded. So if this button has been pressed So you make a check to the state to see if uploading it's true. And then if it is true, we're going to add a few component in here. Just give us a margin. Talk of 10 just to keep it consistent with the styling that we've used up here. Make sure to close this component off. And then in here we're going Teoh, add a piece of textures to show the progress off this image like this and then underneath. So long as the progress doesn't equal 100% we're gonna be showing on activity indicator, which would basically just be a little spinner. They'll go around whilst the images are uploading. So we'll have another check to do this which will be checking the same apart the states or just say so. There's progress. There's no equal 100. Well, then display our activity indicator. Now, this will just take a couple of really simple prop. So the size which we small and then a color which will be blue for now just to make it stand out a little bit. So if this is false, So if the progress is 100% we want to show a different message. And for now, this will just say processing. No, we won't cover this part in this video, but this would actually be where we make the call to fire base to insert the euro rail of the image on the caption all together to actually be shown in the feed over here. So be working on this in a later video over. This is what the processing part actually refers to. So don't here just so that we're not leaving this about any content inside what has had an empty view component just to keep things neat in here, Then we're gonna say so if we take a quick look at upload screen again now, select an image at the moment, it would look any different. But if we force this progress to be, let's set this to be 50. Uploading to be true. When we like this now, it should last see the activity indicator. So there we go. A little update with the image, and this will keep spinning until uploading is false. So one last thing we need to change inside the view. So just down here we're going to add an image to the source. You are right, will be the You're right of the image that we set to the state cover up when the image is selected. I had some simple styling in here, A swell so I can have a margin top of 10. Just to keep everything consistent. Was that every size mode of cover so that the image is gonna fit the size that we want to set a width off 100% on a height off 275 just to fill this space nicely. We'll close this off. Check the We have a few hit correctly just that we're facing. I will save this. So we leave these progress. Andi uploading, uh, parts of the state the same just from over, just while we check this. So it should know. Show us the image underneath. So again, this is a simple example, but it shows how you can quickly put together this basic you I for upload page. You know, what we need to do is actually create the function is going to be called when the user presses this button because you can see it. It's an air at the moment because this function doesn't exist. So we'll just change this. Uploading back to force on removed. Progress to zero again was safe. This we're going to scroll down that page until we get to upload image function so in here , we're going to be adding upload, publish function. So this will be called when the user presses the upload button. So what this actually needs to do is check that captured exists. So first will say it. This state caption is no empty. Then we can run that code in here. If it is empty for now, we'll just say alert. Please enter my caption like this. And now we can actually go ahead and say this upload image, the state you arrive. So this is actually going Teoh? I passed through the your eye that to the user selects when they choose an image and then it waits for us to actually click the or press the upload button before Actually, then Parson is through upload image function which we made before so actually now going to change this upload image function a little bit so that we can correctly get the actual uploaded euro from fire base. So you first need to make a couple of changes to the early part that upload image function . The first we're going to do is set the state, so we're going to say in here, toe up loading his tree. It is true. This will actually start the loading spin on everything over here starting to updates. Once we've done this, we can move down to actually change our upload function. So where we set the ref just here, we want to adjust this. So actually, instead of using this constant breath, we're going to change this to the upload task. This is we're gonna be referencing for the rest off this the rest of this function so it can actually adds it cool at the end here. So actually say puts No, this will start the upload directly here, and then we'll make a number of calls to this upload task which will replace this actual cool down here. This just makes it a lot easier to make different course of different aspects off the upload, such as getting the download euro when the upload was completed on being able to actually sit successfully, show the progress off the upload. So what we need to do is then say upload task on state changed. This is similar to the code were using down here and see state changed. You say on state changed. Then we set a function and then reference snapshot again like we did similar to this code. But it's slightly different, and then we just open up the return for this and then we want toe very similar to what we did down here. We're going to use the bytes transferred on total bites. It's a progress will be a cool to snap short bytes transferred, divided by snapshot, total bites. There were times it's by hundreds, but they make sure that we get a actual number rather than anything of decimal points and so on. Then we'll just look this quickly to the console just so we can debug this easier like this . Just something making reference to nice and easily. And then we'll actually set the state Teoh reflect this so they will show on a page. This will be progress sequel to progress. That's very poor. Just here that lines up with the variable in the state, This one here. So we need to set and this part the code. So instead of just closing this off will in Atacama and we'll create another function just here that will catch any errors. That is code May I have found? Then we can just say console log ever with upload. And then we will actually show you the error message. Just a. And finally, we want to have another comma. And this function will be called when the actual upload has been completed. So we can close off the actual function just here on inside here. We know that the upload is complete. We can now make a call to fire base to actually get the girl off this new uploaded image. We can actually set the state now to say that the progress should be 100% like this. They can actually say upload task Snapshot breath. Get download. You already. We just wait for the call back of this just as to fetch the data base on five A stories to fetch this u R l So we get this a name with a state down at euro now, then come into here. So for now, let's say alert Donald, you're Oh, so it's just test this to see if we do actually get a euro off this image. So just to go over what we've added here, So instead of the previous reference where we had put on a separate line. We're using this code down here. We've put it all into this one upload task. Call here. Now. We've made subsequent calls to check that the state has changed. We can upload that progress about it, An error check. And I've actually got a call back. If when there image has been completely uploaded, there's no Check this and see what we have. I said she looked into the console, asshole. So to save this go to upload screen, select a photo. So many to enter a captured. So if we entered this, press its button straight away without entry captured, I get the error message to me to enter captions. We just put something in here first, So it's now up loading. We can see the Progress update spinner showing there's no 100% and it shows its processing . And now we actually get downloaded your old weaken dues in the rest of our app. So if we click OK, actually, check the log for this. We can see this euro here. So if I open this in my browser, we can have a look if this is actually our image, so once he goes that euro. You can see that this is an image that we've selected from a phone uploaded onto five base . So in the next video, we'll continue. Teoh complete this up. Oh, screen. So there's processing text here, as we mentioned will link up to actually add this downloaded your old that we've created, along with the caption on the rest of our photos information into a fireplace database so it can actually upload our feed on the user who created this image will update their profile as well. This is what would be working on in the next couple of videos. 38. Create function to process photo and add to feed: welcome back. So in the last video we went through updating the upload page so that we can actually fetch uploaded euro off our image. In this video, we're gonna take this image on the caption at the user, has entered and create a brand new function. We're actually process all of his information and added into a database. So let's get started. The first thing we're going to do is actually go to the upload publish function, which is just hit. And we want Teoh actually make sure that they used us and press the publish button more than once. So what we're actually do? First, it's just check to see if uploading is false before we run this function. And then we just hadn't else check down here. Well, just look to the console. Just so we have a reference here to say, ignore despite that correctly just so that we're not uploading or attempting to upload this image more than once, just in dental with this as well. And then what will need to dio is just double check yet down here we also and this is not going very well in the state to be true. and that's the function that we call just here. This should not work just to make sure that they're not running this function more than once. The next thing we need to do is scroll down to where we actually get the euro author uploaded photo and we no longer want to alert this. Instead, you want to actually run a brand new function so it can remove. This is where actually we're going to create a new function down here on this function will be called process upload. This will take in the image you are. Oh, so we're process everything in here and then what? We actually want to dio when we were calling and alert just toe show the download Euro. I'm now going to actually passed this straight through to the process upload function. Remember to use that us because we're actually inside this upload function. Okay, so in here, this is where we're actually going to create the object. They were going to be up loading 25 a state space. So the thing we need to do first is actually set all of the data that we're going to need to create our object So first, let's work out exactly what things we need. So let's just say build photo objects now, as we know from five. A state space eight photo has to have the author I d captured the date and time off timestamp that it was uploaded on the URL to the image. So if we just make a note of thes, we cannot stop to build out this object and then we can actually make sure that we have all of this and information available to us. So we have the author which made the user I d the capture and will be the caption posted will be a time stamp. And then you are out like you be this image euro that's passed through to dysfunction. So we already have that to the other things. When you need to set, uh, the user i d the caption and the timestamp. That should be everything we need. What we need to do now, then, is actually set. This data sets just say, set needed info. So the use righty. Let's start with this one. We'll use the fire based off functions. They were to say current user use ready. That's one of them sorted. And then now we need the time stamp so it can do this in right. Native, if you just job script so we can use javascript for this. So you can say date time is a new now from the date object The date cross in the date object. So you say take time, then we can Let's just move this next to ever get time stamp that we can say timestamp is so just used. Date time identified this by 1000 just like we have the correct former in here. Then we can get the caption from the state. So be this state caption. This is all the information we need now to build and create an object. So the next thing is just added to the takes place. So we're going to be adding this object into two places. One is the main feed. So the main area here, where we have all about photos on the second part, will be this user's profile slow. Well, me loaded profiler confected all of their photos. There's two ways in fire base that you ignore me structure this. So I've added an example just here, so as you can see for this use of there's a photo object in here, and that has exactly the same data as this photo object will here. So it's essentially mirroring this information that might seem stranger come from other database, like my astral, for example. But in five basis is definitely a good way to structure things. It's just important to remember if you allow the user to edit things or delete things. Need to make sure you delete it from both places. So first ad to the main feed. I like to do this. We can just say database ref. Then we set the path. This is photos forward slash image I d. So we just need to make sure that we have access to the image ideas. Well, so if you go back up here, we can add the image I ve to this list of need information image. I t will be this state image. I d. We could just directly reference it from the state, but I like to just do is just weaken double check that we have all the information we need a swell, and then we just say, sets photo object sisters takes this object just here, which we've populated voice information. And it sets it to this path because of the security rules that we've already made. So we can see up here. If we want to create a new object of this path so long as our use righty, it's gonna be the author value in this object. So if we look at Kanak code this idea, just hear songs. This matches our user. I d will be allowed to make this set request down here. So the next place me to update we can't you copy? This will be except the use up photos object. So we just saw in the database back to the data. We also need to make sure that everything is added inside the user's profile as well. So we decided to use the data, so we need to add it for users for stashing user I d four slash photos and set the object in here So we do this exactly the same so good before here before here. So before slash users four slash the user i D which we've already set up here, then four slash photos four slash the image idea against that. Be exactly the same and then set the photo object. So at this point, we actually to make on update to our security goals to make sure that A to make sure that when we're viewing users profiles so toe show an example this user just here. If we click on this as we are a different user to this, we would actually be able to access their photos at the moment. So we need to update the users security. So let's copy this profile. Picture one just here and changes to photos. This will make sure that if we want to access this user's photos, we can read these. We can edit them, but we can view that which so we need for this part. So if we published that and go back to our code, that's just finish dysfunctional. So I say, send an alert just here to save the images uploaded. And then we'll reset the state so we'll make sure that uploading it's now close poetry set up here. See how he said it to True. Now we can set this back to be forced again. We can say image selected is now, folks and then we can reset the caption to be empty. Andre said, The image you are I to the empty as well. So this is everything we need to actually process on upload an image. It's Now let's test out. So we go to the profile the go to upload page looks like to photo this one here. We had a caption applied it. He was able to fix this variable name just to which its date time. Just run this again. Okay, so here's our message committee uploaded. So if we know check the database, we can see this new image i d has been created. There's all the information for this photo. This is a user I d. So if we go to that a profile, this is that I just set a profile just here with Simmons of information says other example , user. But it's now created this photos object again of the image i d. And there is the information at the moment that if we go to our feet page and a freshness, we're not getting the sort of response would expect because of the way this current feet function is put together. So in the next video, we'll look to actually update this and start to change the way the profiles of displayed as well so it can also show in chooses photos on their profile page. 39. Update FlatList to display uploaded photos: welcome back. So now that we've updated upload page so that we can now have all of our uploaded images be added into the database now we need to actually update the feet so that each image actually appears the way it should. So at the moment, as we can see here, these images are actually appear in the same. The only thing it's actually different. Here is three use name, but we know that the image data for each of these photos is different. So we need to do is open up the feet page. So if you just open feet dot Js just hit and want to scroll down to where we're currently adding these fetched images into estate. So, as you can see, just hear the load feed function. Now what we need to do is take all of this code just here a move this into a stone function . So we want a copy. This Andi, go up here just above this load, feed function and create a brand new function. They'll be called add to flat list. Now, this will take in a number off parameters which the photo feed, data and photo, and then We just need to pace this new code in. What we need to do now is scroll back down to where he selected all of this code. It's everything from here up to the photo object variable. Just here. I'm not gonna say that. Add to flat list and then pass in all of the parameters that we just sets. That was photo feet, data photo. So if we save this and run now, let's see what we get. So the moment we have a undefined variable that So we just go back to a new function and make sure that we define it. So we have a reference to this parent class the whole time, So it's at this save and check out simulator again. And here you go. You can see it's actually now updating with all of our photo. Swiftly, refresh. We can see this is actually update. So we approach another photo Now we can now say okay, moved back to a feed. And if we're freshness, we should now see that photo has been updated. Feed is updated on this new photo. Now appears we should notice as well this time we'll update each time your fresh just to show that it's getting the latest information. So what we can actually do next is update the profiles to use this new method off, fetching the photos and displaying them. So in the next video, we'll start to update each of the users profiles here on de Haute on our own, logged in profile to show or the photos associating with each user. 40. Create component to show list of photos across different screens: So now we need to find a way to replicate this list here. Of all of our photos for each off the profiles we can move into like this. This needs to show only this user's photos. Andi for actual profile screen turned out profile at photos into here. Now we could just take the code that we've used on this feat page and replicate this on the user profile and the profile page. But this would just be needlessly re repeating the code that we've already written. So we're going to do instead is create a component that will show that the thing photos like this, but it actually let us choose where we want to show the main feed that we have here or if it's just a user's photos. So the first we're going to do is actually create a folder full of that components to into . So they're gonna go into here and create a new folder like this just inside the APP directory called Components. And then inside this folder, we want to make a brand new file. There's going to be called photo list dot Js. Inside this brand new file, we're going to essentially create a a screen that is just showing this list. So to do this, we have Toe added everything you normally work to create a screen so import react from react would import all of the components we need from react native. It's that being touched with a pasty, flat list style sheet that will be needing, like to run the text component a view component and image, and this would be from gets native. We also need to make sure that we import the data base. Andi authorization. So just in full of phase. And then we need to make sure that this is back to directories in the Conflict folder on Conflict of Js, and now we can actually create the class that will hold with the information for a component service of, of all the other screens, it'll extend react component. It's once you create that class like this at the bottom under here, we want to really say export the folks photo list. This will allow component to be used just like other screens You. So the way that we created these screens here so that the profile one is exported. It's exactly the same process to actually create a component. So inside off here, we want to actually move across all of the functions that we were using for the feet in the feed fall in the feet screen. So this would include countries like floor check here. The time converter Onda had two flat list were copy, but things both on load feed actually unload new. So it is. Take all of these. So this is all code that normally have had to completely re right to use it in a different location. So I take all of this. You actually take the render functions vote because all we need is the flat list part. This we can remove the rest. So I take the render function and then remove everything that is no are flat. List said are flat list, I believe is just here. So actually, take the loading part. This Well, we can keep everything consistent. Just check with this lines up, Teoh. That's right there. Then we're just removed. It's probably taught that should be everything we need just to just check that we have at least one parent component for the whole return. And then we have a check here to see if we're loading, and that is closed down here. So it almost actually complete with this. We have to make a couple more, uh, create comfortable functions up here. So we need to add eight constructor without tropes. Just the same that we same thing that we've been doing of all over our screens as well. And we're going to set an initial state set, refresh and set loading and loading will start as true. We also want a component it mount on in here, actually going to be checking the prop that is sent to this component. So essentially, what will happen if we use this component on the profile screen, For example, we would make sure that we first import the component up here down here. We're currently showing the loading photos. Text on its own would actually used this new component. So be something like this photo list. We can have our lists off props along here like this, and this means we can actually pass different informations through to the component, depending on what we need. So obviously the home feed here would just show all the photos, But the profile one needs to only show this user's photos, so we'll pass this information to through to the props. We'll worry about that in a moment. So first, let's go back. Teoh. You component over here and in the component it mount function. We're going to set a constant just to set a number of variables that will come straight from the props. This will be things this'll be one variable here called Is User on the other one will be used righty and we'll get these from the props and then we'll simply just say, If is user is true. We know that this is going to be a profile so you can use the user I d to actually display the correct information in half that list. And if not, we know that it's going to be this made feed. I would actually say this load feet, and we're just passing empty string in here. And if it's the user plus a load feed but actually pass in the user, I d. So this after means me to make a change to our load feed function. So I scrolled down till we have this. I'm actually going to say use writing up here by default will be empty and we can make a change done here. So we're currently set this ref directly in cold. 20 affection photos were gonna change this safe load. Ref, I just fix this address. This is the default part we're going to use. We can change that just here. But if the user i d is no empty. So in other words, if we actually pass information through to dysfunction, we want to change this. It's a bay equal to the actual photos of this users. So I said the same process as in setting the ref from the database, but will change the actual party. S o B ref uses that the user i d be child with this. And then from there we would get their photos. So run through this again when we actually add this for the other screens. But for now, this should be almost ready to actually save on, check out and check out at component. So it's safe. This now on to go Teoh profile dot Js in a good school right to the top and import this new component. So do that like this. So its components for stashed voter list dot Js One thing we actually need to do here a swell is if the user is logged and we need to pass the user, I d through to the state because we actually need this now for a component. So if you move further down, here is where we were looking at before we can a place, this whole piece of code just here without new component like this. But if we passed it through on its own like this, it wouldn't work. We need to actually set these props that we defined earlier. So the 1st 1 b is user and this will be true. The next wannabe user i d. And this will be the usual I d that we set just a moment ago in the state up here. Just check that, but it's incorrectly. So if we say this now, one more thing we need to actually get is theme navigation. We'll need this proper swell. So to say this props, navigation, just passing just all the way through this would mean that if you want to access the view, comments or anything that actually interacts and adds a new screen or changes to screen page that were viewing. We need the navigation props to build to do this. So if we say this now, let's have a look what we've got So we go to our profile screen and we can see now that we're getting the photos from this user. But at the moment you can see here it's not actually changing. Ah, the function of toys just starting, showing the same users photos That's going to have a look at Walker because in this, as you can see here, the problem is because of the name of this variable just here. So it's not allowing this path to actually update. So if we save this after you've made this change and check out profile, we should now only see photos from this user. There you go. It's now that we know that the component works. We can update this across the rest off our app. So this means the next police. The next face me to update is thea. Other users profile so for any other use so that we might click on, we need to make that photo shows well, So we first go to the user profile page over here with any to import a component again. So the same thing we did over here, So just copy this and paste it into this page. Let's just save it to check that the parts in Irving and correct again and then over in AIDS is where the same way we called the component here. Just scroll down to the render part of this screen. It's like the same, the same part and paste in any component. And if we check any of these users now, we can see that we're getting their photos. Let's just check with the other example down here. We have fo ties. So in order to get these users photos, especially the example oneto appear correctly. Make sure again that you update the database on fire Base. Similar Toby did in the previous video. But this is how easy is to actually create a component that you can use to replicate different parts of Cote across multiple screens. This is really important and a good thing to be getting used to doing if you're going to be creating reusable elements of code. So if this condition be used for buttons, it's worth of a certain type of button that you want to use a nick and then, as we have done in this example, have different variants of this component that you can use depending on. If it's the profile here, we want to just show one uses photos or the feet. So finally, let's just update the main feed. So again, we want to make sure we import this component at the top here on Don't. Here we can remove this whole flat list on the loading parts. Well, that's just copy this in from this page. So for this example, what we would actually do is, say, focus for his user. We can take away user I d. So if we save this A just loading just the same and this actually means as well, we can remove all of this other code so she can see when we reload. It's all still working. So if we remove the load, feet function and then still try to refresh everything still working because this is now all contained within actual component page here you can remove all of this coat and even this is well, we could even move these sediments from that state. What shows how we can keep her our screens really lightweight and only have the minimum amount of code we need in the actual screens and utilized components to really create powerful APs. So in the next, videos will be in the next couple of videos will start to look into adding at a comments section, and then we'll finally move on to adding away futures to actually log in and registered to use that. 41. Building comments screen part 1: Welcome back in this new module, we're going to be looking at the comments section over here. So where we currently have this view comments bottom on this empty screen, we're gonna be filling this out so that we can actually display any existing comments That photo has on allow logged in users to able to actually add their own comments. So we need to do first is actually open up the comments pile over here. Let's just move this side bar waiters to save up some space. Okay, So we want to do first is change these existing references. We have to upload. We're going to change. These ought to be comment. Says this one here and then actually wanted the bottom of the page as well. So it is safe this first. So we've got this updated. Now. We need to also import some components that we need to be using for their screen. So there's going to be three new components we need. Teoh wannabe touch boy, Pasty. He was a need text input. Andi, enough one will be called keyboard avoiding Yea, we'll talk more about cable avoiding you towards the end of this module. The next thing you need to do is actually update the state to have this new array here called comments list. We also want to add a new function, a new function called check grams which right? Should be very similar to the functions of the same name we've used in other files. And we will need to cool this from the component did mount function of it here. So I say this doc, check Haram's and run this at the end off the component did mount function after this, we want to actually bring in some of the functions refused on other pages. So first, let's go to the photo list component we made before. And we want Teoh take the floor check on time converted functions here, so it's gonna select these and copy and paste into a new file. We also want to then open the upload page and take thes s four and unique I D functions because we'll be needing these as well. Just paste those in and safe. The next area we want to adjust is theatrical top part off the display here. So if we scroll down to the bottom of our current page and look at the actual render function. So far, we haven't got very much content here. But what we want to do is change the display here. So where it currently are setting this styling want change this. So it just says flex one. This mean that this comments text here isn't sent into the screen because you want to add in some new components here. So the first thing they want to do actually is reused the components we have on the user profile page. So if we go to that user profile dot Js file scrolled down. We want to take this area here where we have the go back button the title here, which is profile Andi this empty comparatives here. So if we select all of this in a copy and then paste this just underneath this view component just here. So if we say this and just check what we have that you want to change this to say comments , so for open our view comments that screen. Now we can see that we have something a little bit more uh, what we want so you can use this go back button. We also need Teoh make a few more checks in here. So at the moment, all we're doing is checking if the user is locked in or no, which is fine. We'll need that to allow users to actually post a comment. So in this new comments section we're building if you're locked in or locked out, you can actually see the existing comments. But you can't post one unless you actually locked in. So underneath this closing view component just here, we're gonna make another check. So this will be to see if there are actually any comments for this photo or no. So that way we're gonna do this is by checking this dot states, doc comments list They were gonna check the length of this. So if this length is zero, that means there are no comments here, so you can show on empty state if this length isn't zero. We know there are comments, so you can actually just play a flat list off comments in here. We have a flat list here. They will have all of the data. The data will actually be this state. Commence list. We're finished writing this bat list out in a moment first meet, actually scroll up and actually check if there are any comments. So where it currently according this check Paramus function. We're going to go up and finish writing this function now. So for this check grams function we want to do is first go to the user profile, Doctor. Yes, Page again. And copy the check grams function from there. Just so I don't have to rewrite too much of this. So it was copy and paste this in, and we're gonna make a few changes. So instead of looking for user, I d. We're going to look for the photo. Id's has to be the photo. I d off the comments on my change it here? Yeah. And here and this function as well will be different is going to be called fetch comments. It s actually write out this function just here, so fetch Commence takes in photo. I d Then we'll actually write out this function to fetch the comments in the next video 42. Building comments screne part 2: before we can actually write out this fetch comments function. We just need to make one small change to our photo list. A component overhead. So we want Teoh. I actually scrolled down to where we are letting users actually open this view comments screen so it will be down in our render function. So just here we're currently cool navigation navigate comments. So actually, when we open the comments screens his online ah 157 currently passing through this as user ideas. We want to actually change this to B photo I d. Once you've made this change to save, and then we can go back to our coming screen. So now we have updated this. We know that the grams will be passed through correctly with the photo. I d actually it here. So the first we can do is we come to find that as this. So we have access to his parent class even whilst we are actually fetching things from the database on the databases where we're going to be using next, we're gonna say database breath, we comments, then the child to be the photo I d. So just here I never order this my child off hosted so that be ordered by the time that they were actually posted will fetch these once and then, as we have done as we previously did for the other times we affectionate a traitor to say function Snapshot. Just check the week. Close this off. Here, move this extra closing bracket here, and this will actually fetch the comments from the database. So if we have a look at our database now in our database here, we can see what the comments actually look like. So we have the comments subject here and then A I d. Sensibly, the photo I d. So each individual photo. If they have any comments, they'll have their own object. Just here and inside. You will find the comments Soto have the coming i d. In an actual information for each comment. So now that we have this, we know that when we fetch this call just here, it will fetch all of the comments inside this photo I d ordered by the time they will post it. So they ordered by the time they were posted. That's this attributes and variable just here. Then we'll have access to all of this information. So first we're gonna actually check that this exists. Otherwise, we can say that there are no comments. So I say constant exists a snapshot failure. And then we can just say if exists at comments to the flat list on. Otherwise, we know that there are no comments. We can actually update the states like this and say comments list is empty just to be doubly sure. So we're almost finished with this function here. We just need to actually at an era, check down here to say catch era and we'll console. Look these areas out, it's up. She needs to be like this. This will catch any errors that we may find when fetching from the database. So we just need to now add some code in here. If there are comments so it will say is data equal snapshot like this? Then we can actually define our comments list will be equal to our estate comments list. And what we'll actually do now is for each comment that we find will pass this through to a separate function that will actually add this to state similar to what we did with a photo feet. This new function will be called Add comments to list. This will pass in the comments list. The data and the current variable do about set. This will be our new function that we're going to be using next. That's just copy. They still you have reference to it. So it's a four comments in data that's had to commit to list. And then we just passed through as we just set comments, list data and comment, which we define just here. This would be the i. D. The common idea of h avec laments. So just to test this now we're going Teoh, actually lock this to the console up here. It's a constant look. Parcel with this through. Let's see what we actually get when we run this. Now, just whilst we test this, we'll copy and the latest car just for a moment. So if we open up council okay and go to a simulator, I click on few comments. We can find that this photo we had no comments. If we scroll down to the 1st 1 where we had set a common in the database, we can see here that we're now getting this information, which is just what we need. So now we can actually process this and add it into our states. And then finally, we can create a flat list. Let's go back to a coat and just undo this change May 2. And to save it again, just we have this Teoh finish off in a moment, we're gonna scroll back up to this new function we just made. So in this ad commented dysfunction. We first remove this console log just here on day, as we did before we create a reference two apparent class. So it say that equals this, but also defined the coming object just here. This will be a trick or two data comment. Just we could get the correct information from the array. What we need to do similar to in the photo feed again, is me to access the information off the author. This would be database arrest users. And then this will be the coming object here. They're just defined. Botha. So you used the user. I d here. And then we want access to use the name just inside these quakes. And as we did before were say, once value and then returned a snapshot like this on as before us where we just want to catch any errors and we look into the console. This is just helpful to debug anything that we may find that isn't quite what we would expect. Now that we have this information, we can actually process everything on add a comment to estate. So as before, we're just check that this our user exists. I'm sure by now you will be able to write this in in no time until so if exists. So now that we have all that checks here, we can just simply say comments list, push, then send through all of the information. Two estates. So first as the idea of the comment casual comment itself like this the time stamp off when it was posted, it would actually form like this. Never passed very posted information to stay. So the time stamp. We want information about the author. We used this data here that we just factually user name. I also get the offer. I d like this. This is a lie. The information we want to pass through to the state. We're also actually set the state to stay that we have finished fetching. So say refresh folks, and loading is now a force. So it's safe this and now we'll go down to Orender function and actually update on bond right out the flat list. So we can just play these comments as well. It's not. It's scroll down and find out flat list. So you want to start by adding in the rest of the props. So refreshing is this dot state dot refresh. We've already added in our data you don't need to hear Add a key extractor since we take in Item and Index and we'll say index to string as this has to be a string. We can't just use the number value that we passed through. Uh, just here. I have to change this to a string. We'll set a base style here a swell. So Billy gays a flex of one. I was a background color of a similar to natural photo just to keep things consistent. And then we'll actually render this so again we'll take item. So again we'll take an item on index and then we'll render all of this out inside here. So this would be wrapped in a view. We're actually passing a king as well that we did for the actual photo feet in the early part of this course. So taking the index was set some styling in here, So be a width off 100% overflow hidden the san margin bottom of five. Fix this here would justify content to the space between we'll set a border bottom whip off one on a border color. Great. This will be a view that everything is contained within such a safe fix. Every touching, make sure that they are showing this empty state as well. So I should say no comments bound. I just reload this. So if we open up this first coming here, but we have no comments in the database at the moment, we should see yet no comments found. If we scroll down here should just see this empty view. We have this empty view just here with currents pushed down at the bottom Here. That's this text over here. This is where were they actually showing? A Former users can actually enter that coming and post it so for now, this is what we're looking for. So we just need to populate this flat list on display at common in this space that we've created just here. So to do this for first going to create another view. But at styling for this in a moment but first less at a text component. Well, say item posted, then add a touch of Taipei City so that you can actually open this user's profile. So inside here, well, there's another text component with the office user name. So if you re like this now, let's have a quick look at what we have. So as you can see now, we have the time this was posted. Voice is actually no, the exact time of the time. Stamp it on the user's user name. So in the next video, we'll finish toe, fill out how flat list and have their comments, and finally add a area at the bottom where logged in users composed their own comments to this list. 43. Building comments screen part 3: welcome back. So first, let's finish adding the rest of thes view components in before we start to style These. So underneath this touch grope a city where we have this closing view. We're going to add another view just here, honest, actually contain comment. So we'll create a new text component. And then in here was a item comment. So for a freshest again and scroll down to the photo that we know has a comment. We can see we have this example photo coming here. And now we're going to go through an ad, a styling so that the user use name will appear on the site. The timestamp just here in the coming in the underneath just here. So in this view, just under this parent view, just here or at some styling, So first, to add some padding of five when again set the width to be 100% one reflect direction, right? I'm justify content to be space between, so you'll see now how quickly this has changed the display of our page like this. So it's a lot more. Uh, it looks a lot better already, but first, let's just add this padding Teoh, Uh, comment view here as well. So just copy this part just here and paste this in this view, just that we have consistent padding, throwback laments. So we scroll back down like this one, you can see it, so it's a lot better. So next we're gonna actually update this touch but pasty to go through to the user's profile. That moment is just a debt link. So say, on press and then we'll send dysfunction to this probes. Navigation navigates to the use of screen. Then we're passing the information off the user i d. And this will be equal to item bullfighting. So if we saved this again now, Andi, try Teoh. Click on the ah, use name again. If we click this now, it should open their profile. So don't go. This is working. So we're moving along quickly. Now we just need to add in next the actual form done here, where users who are loved in can actually post their own comments. So we're gonna at this new comments area down here where we make the check to see if the user is logged in a lot. So first, let's select this text component just here. They're going to replace this with a keyboard avoiding view. As we added in I start off this section. This is gonna take in a number of props. The 1st 1 will be behavior, and this would just be putting that would then say enabled. It also says style here as well. So add a border took wick off one a border top color off gray petting of 10 on the margin to the bottom as well, off 15. So if we save this and have a quick look, I have to add the Cullinan just here. So if we have a look now, we can see we can see that we have a border just here on to have not had any texted. This is where the area we're working on will be, will be showing. The first we need is a heading that will actually show what this this area is useful. So it's a text style for weight off bowl. Just make it stand out a little bit more, but save post comment like this. And now we're going to create a new view component just here and put in our text input now This will also take in a number of props. It's the 1st 1 will be edible. What should be true? A placeholder. And this will just say entire your commence here or anything that you want. And now, when he touched the detect when text is entered into here, so say on change text. So when Texas entered, want to update the state to actually make sure that we store this comments information to say this sent state comments, his text almost done. Now we just have to pass through some styling this text in purse. Well, just so it stands out because the default appearance off the text input is almost like it doesn't even appear. So at some vertical margin here to the top on the bottom, we'll have high of 50 patting of five. We'll keep this gray border color here. It's well that a border radius of three, a background color of whites on a phone color of black send safe. So if we open up the comments section again, we can see this area we've created just here. So it's almost there. We just have to add a button underneath so that we can actually press this Onda run a function it will create at comment. This will be a touch, but I pay city. I have a text input inside here That was safe post. I will just say on press call a function called posts comment. So what we need to do next, So actually create this function. So we go up here on define it just here in the next video will complete this page by writing out post comment function and then testing that the comments were actually added into a database with their own unique coming i d. 44. Building comments screen part 4: Now let's start creating this post comment function. So the first we need to do is actually define a variable that will allow us to actually access the comment that the usual has entered. So it would do this by saying comments. Is this state comments like this? And we also they want to make a check to see if this comet exists, because they want anyone to be adding empty comments. So we just say, If this is an empty well process in here and then else well, actually put out a lot and say, Please enter a comment before posting just so they know why this hasn't added the empty comment into the database. So now that we know inside here that there's definitely a comment has been entered, weaken set a number of variables that we're going to be needing before we can actually send this information to firebase, similar to what we're doing in the upload page done here, where we defined all of the's areas and make the focal object so used to a similar thing here for the comment. So we need to define a number of variables first, which will be the image i d. This will be used for Do you actually set the path or everyone toe set this information so it will be this states photo I d. Then we need to get the user. I d stay. Sobeih if oh current user, use your i d Then we need touches set and create a common idea. This needs to be unique. So to do this will say this unique i d. Which is why we had to pull in the unique I d functions earlier on. So you can use that here. Off to that. We need Teoh set dates on time. So for that, we say date time it calls Date now never can define that time to them. This will be math floor, the state time divided by 1000 case. This is everything we need to define first. So at this point, it's a good idea to actually update the state again to remove the comment. Just fix this. So because we've already to find it up here, we can actually reset this and we can still use this coming for go up here. This just means that the user couldn't press the post button again and he won't run this function, so just keeps this, so it's only gonna add this comment once. So now we can actually create a objects that will have all the information we need to this comment. So it's a coming object equals hoisted at that time stem. And then we have to offer to make the user I d. And in the comments, we'll be comment. This is all we need for a common objects. We're almost done this. Now we have to set the reference to the database. States will be four slash comments ford slash the image i d. So the photo I d that we have up here, then we want Teoh at the common i d that we created here. So the unique i d. Just a And then that's very few minutes. That's the path to the image. So if we check in now, Firebase database would have comments on the photo I d. And then we're going to set a common i d. Here and add are at a new object just here. This could be coming dash I d to but more likely will be a unique string like this. He'll have a comment. So then we just say sets coming objects. That is everything we need. But first, wishing to create one more function so we can reload the comments. After we've added this, this function will add down here, and this would just be called reload comment list. This won't taking any parameters, and all this will actually do is reset the states to actually make the current list empty like this. And then it will actually cool the fetch coins function passed through the photo. I d like that. So don't here we can just send a request to this function. So it's reload comment list, and that should be everything. We need tohave comments on things, just it. But first you have to finish adding the styling. We're adding down here for post host comment, bustin so here we want to add some styling, so we will say padding. So after cool is 10. Adding horizontal is 20. We want to have a background color off play on a border radius, but five and then for this actual, uh, the text inside a text component. We want to make this the whites. Is that safe? This. Now I'm not back comments. We're going to create a new coming in here and post. Okay, We could just check this era. Looks like I've spelt this wrong. So if we just scroll back up here, yeah, you can say it's the same database, not database. So just quickly rerun this and test it again, and then we'll post that come in and you can see it is now updated. The list of comments here to show, uh, comment. So if we go back and come back into this again, you can see a comet is already listed. Then we can check the database now to see where this idea is. So you can see here is the photo I d. That we added that. Come in. There's the comment i d. And in the information here, we can find the author petrol, common itself and the date and time this was posted. Let's test another example without database up and just see what's happening. So we're gonna add another reply just here, then post you can see it's adding it straight away. Done here, I would probably concede, though, is that it's not properly clearing our information away. It's Let's adjust this to actually fix this problem, so is considered stable. Reloading a comment list. I need to change, sister, say comments. So if we save this now and go back into a commence list at a reply and placed, you can see it's now only showing the information here, not p concede that we have the oldest comments at the bottom and the newest comments at the top. If you wanted Teoh change sexually produced the reverse prop in fact list, which you can see in additional video at the end of the course. But for now, this display works quite nice for us. But the moment I just want to work on a way of making this input we've added here disappear once we clicked post. So if we add this line just here value and make this be equal to this dot state dot comment , this will mean when we change the state up here to actually remove the comment, it will actually remove it from this impetus. Well, so this is a quick example to show how you can actually add comments into your app in a way that doesn't involve too much code at all. and it's really quite effective. So now we've almost completed at. We just have a few more areas we need to change, such as the actual profile here needs to fetch the information from the database. We need to link up these buttons so that we can actually lock the user out on bond. Make it so we can actually edit profile such that name, and I use the name in that profile picture, and then we actually also need to make a way to for users to go to register and log in. So as we saw before, if you're not logged in, it shows information down here to say, Please log in to do your profile on the same thing as well for the comments. If you're not locked in, it will sure thing down here to say Please look in So in the next module will look into actually adding these log in on sign up areas, toe on making a few final fixes and adjustments such as the profile page just here on, uh in the future, or add enough module to this course that will go through and properly redesigned. This Using a program might sketch to show how we wanted to look and how you would move thes designs on sketch across on to react native to really design your app to look exactly how you wanted to. 45. Profile to fetch details from database: Welcome back in this section, we're going to be focusing on the user log in and registration that you would normally see in areas like this on the upload page, it's usually not locked in, But in this first video, we're going to tidy up a couple of areas of the app, including the profile page here. So you see where this a name and news name information. We're going to make this come from the database, and then after that, we're going to add in this log out on edit profile button. So let's get started first by creating a function to actually pull in this information here from the database, let's go Teoh files on the site here and open up profile dot Js Then just slide this week and just a safe space. So what we're going to be doing is creating a brand new function done here called Fetch User in flight. This would take in one parameter, which made the user I d on first. Want to actually make sure we have a reference to this parent class after we've called fire base and we can no longer use this, so I just use this that equals this which we've done before. And we're gonna use the database. The reference we want Teoh, pull this information from users and the child are will be this user i d. We've set in the perimeter just here. It would affect its information once. So you used the same chain commander years before then we just set the cool back like this . So again, we want to check This information actually exists over say exists equals snapshot value. There's no 84 no there. Would you say, if exists, data equals natural buddy like this. And then from here we can straightaway set the state with all of the information we're going to be using on this page. Study the name he used name on the profile picture just here. So that would be using name data. Don't use the name. The name data dot name. The profile picture will be Data Dog Avatar on them. Will also say, looked in It is true, and we'll set the user ideas Well, so we have reference to that just here. So we're currently setting this locked in, uh, part of the state down here. But instead of setting this information here. We're going to instead cool dysfunction so safe that fetch user info and then pass in the user. I d like this. Then we can remove this set state function. So once you've done that, just save, and then we're going to actually scroll down on update That should display of you. I done here to use this new information. So the first we're going to change is this profile picture just here. So it currently have this hard coated image. We're going to select all of this on just say this state avatar. And if we saved that just to check this 1st 1 they sit now, shy that profile picture, and then we do the same for the name something this state name and then the same thing. For use name this state use name. So free safety, it's now we should see all of the information coming from the database. Yep. Okay, so in the next video, we're going to be added in the functionality for the log out button on that edit profile bottom. So this will be using the's touch bullet pasty components here for look out on Dhere. Edit profile. That's what we're working on next 46. Add edit profile form to profile page: so to continue will start by actually creating theon press event for each of these buttons . So the 1st 1 will be this log out button here. So I say own press call a function. There'll be this Don't look out u za to create this function in a moment and then the 2nd 1 will be at it profile. So again, we're staying on press and cool function. Announce me this edit profile. So it take both of these now and create a function for each of these. So go up here. And just for now, we're just say a lot. Look out and again, Edit profile will say a lot at it profile. So if we saved this now and try and interact with these buttons, we have to look out showing our alert box on edit profile showing edit profile. Now, the log out country is gonna be really simple, so we'll get this one out of the way first. So all we need toe add in here. So we say f off because using the firebase functions again and then we just say, sign out like this and then we'll change this alert box just to say logs out. So that's the log out. You to function completely. Just test it's now. So it should change the display off this page to show that we're now logged out. Users says, Try it so it shows that message and you can see now we have this different screen that appears because we're locked out, which we set down here so we can make this check to see if we're locked in. And if we're not locked in, we share this information. If we are locked in, we show the profile. So later on in this section, we're going to be a change in this area down here to use a component. But we'll worry about that later on. So that's how I look out function complete. Next. Need to work on the edit profile function. So if we just say this again, I wrote my ski locus back head. We could go back to hit. So edit profile. What we need to do is make a few more changes. So we need an area down here where we can actually show a input field 50 users to change their name or they're using. So to do this we're gonna make a check just here. We'll call this dot state dot editing profile. If this is true, we're going to show a different, uh, area just here. And if it's false, will show these buttons in this area just here as normal. So we're just copy and paste this check down here and then all of this area here, we'll make a brand new view inside of this. A statement we've just made. I want this s dying to be slightly different. So say a line items center justify content sent up on the rest can stay the same. So if we just change this just got a text component in here. Just saying that it try file we want to do is change the edit profile function we've made here so that when we press this button, we change this editing profile verbal in the state to be true. So up here, we're going to remove this alert box and say this sex state editing profile is true. Let's just see what happens at the moment. So you go to the profile page, we click edit profile. You can see it's taken away these buttons and it's showing Edit profile Let's just fix this little problem down here. Justify content, have a space just in front off center just to make sure that we're not running of any areas here. So click this button again. We can see that it shows different information when we click this. So I do. We need a way of going back or canceling these changes, and then we need to add in a text input Onda way to save the changes. So first, let's just scroll up on import the text input component. Then we're safe. This once you've imported this text, import components grow back down. So we've made this new view component done here. We currently have this edit profile text. So what we want at first is a touch full highlight that will allow us to cancel these changes that we're making. So we've got a new touch for a pasty. Just here on inside here would say compress. We can cool. A function on this would literally just save this set state, and we'll make edit profile. He throws. It's been side to. I just had a text component that would just say, cancel or cancel editing So if we have a look at what this would do at the moment or changes starting a little bit, just so it stands out a little bit more. If we click edit profile, we can see this cancel editing. And if we press this, it goes back to the way it was before. So let's just make it stand out a little bit more, so we'll add some style to this text component just here. And it's a fun weights boat. See how this looks? This stands out nicely just so the user can see how they can quickly go back to what they had before. Now that we have this way of canceling these changes, let's actually go through now and add the input we need for the user to change the name and the use name. So the first thing they need to be out to changes their name so that a label just here and underneath will add a text input. So, just like this, and then we're gonna pass in a number of props is the 1st 1 will say edit herbal and this will be true. We're going to set a placeholder which will say and see your name and then we're gonna say on change text. So any time the user types into this box, we want to make sure that actually saved this change. So it's a text will be sent to this set Stakes. Name is text. So this is the same part of the state we currently have the name. So it should update its information up here as to use a types in. So we're also gonna dio is set the value to be equal to this same variable a swell to be this state name. So as soon as they click this edit button, it was populated with the information that is already associating with this user. Just just set some default styling for this box just to make it stand out a little bit more . So it's a whiff of 250 some vertical margin off about 10 patting it five a border color of gray on a border width of one. So it's just save this now and see what we have. So go to the profile page, click on edit profile. And here you can see the information and if we make changes here, you can see it's updating the information. That's top of the page here, which is exactly what we want. So let's add another temper. It will be exactly the same four user name information, so just copy all of this and paste it underneath on here would change this to use the name and again the same done here. So update the user name and it will be pre populated with the user name variable in the state as well. And down here to say, Enter your user name, we can remove this additional text component. So if we saved this now, let's have a look what we've got so we could edit profile. We now have our box for the user name or for the name on the use name on these of both updating straight away. But what we also need is a way to save these changes. Its let's add one mawr touch blow pasty down here that we can use similar to this one just here there can save the changes to use that makes so it is copy and paste this and say save changes. But instead of directly editing the state just here we're going to cool a function, they'll be called Save Profile. That would look like this. Let's add just some small styling in here just to show that this button is a zone important button. And so it has some focus on the screen. So set a background color today, patting of 10 on. Then we'll change this down here just to have a phone color of whites. So if we say this now, let's have a look at what we have. So go to a profile edit profile. We could see this button stands out. So if you make a change here and click save changes, it will call this safe profile function. So in the next video will create this function and then move on to the Logan on registration part off that 47. Create save profile function: welcome back. So now we're going to start to create this safe profile function. Is that scroll up just here and we're going to create this new function called safe profile . This won't take in any parameters, so we can just build are a function like this. So first, we're going to define on name, but you'll be equal to this state name and then the same again for use name. So you can access that like this. Then we want to actually check if the name exists over. Say, if name is an empty and then we'll update the database right here. So it's a this uses on the child again. Diffuser i d So the state use a righty, then we'll select the child again. So for this one, we're updating the name. So it's a name. Then we just simply say, set name like that, and then we do the same thing again. But for the user name, just fix the indentation that then we just changed all of these references to name into user name. This is all we need to actually update, uh, profile. Then we just say to the state set state editing profile is false. So it's just safe this on, Uh, from this on the I seem like to hear and see what happens. So I go to a profile page, go to edit profile. We changed our name. Andi, uh, user name. They will say that changes. We can see it's updated here. And if we click on the profile just here is updated into the database. So if we're to save making change here and safe again just with reloads, go back into a profile, we can see that these changes have been saved successfully. So we just changes back then reload the up again. We can see this is now actually updating on saving at profile. So in the next video, we're going to move on to the log in and registration functions me to write on. We're gonna create these as a new component 48. New component to contain login and sign up: as we continue to build out this app, we now need to look into the actual log in on registration options we're going to add to the app. So if we just look this user out now we can see we have this area on the upload page, the profile page on the comments page done here. So we need to create a way for users to be able to actually log in or create a new account . So the first we're going to do is move over to where we have our files over here, Andi, create a brand new component, so duplicate this existing one and this will be caught off dot Js and beginning every once . Just take the contents off the comments file and we're copy and paste this into the off Js . So it was close. The rest of the files is we don't need to work on this one fire at the moment and they're gonna go up to the top and change this name comment. Just here to use a off. I'm also gonna copy this and school right to the bottom and paste it down here as well and just safe. We then want to remove all of the parts of code that we don't need. So to begin with, we only need this one area just here to remove this extra view all the way, uh, to the top, just here. So if now we'll just save this when we come back, Teoh make changes here in a moment. We just save that. We're gonna delete all these functions that we don't need. So the 1st 1 we're going to remove is reload a comment list. And then this one just here to post comment the component did mount Will will actually remove all of the code inside it. But we'll need that. Uh, later on. Then we can remove the time converter Plourde, check on these two unique I. D. And s four functions. I we can remove the fetch, comments, function and also this function as well. I'd commit to list check the Rams. We can also remove, So we're now left with just render function here on empty component of Mt. Andi constructed just here the next we're going to adjust estate. The variables you want tohave in estate will be off step. This will first be equal to zero. We also an email which empty string us will be an empty string on move screen will be false to be in with next. Want to check that we have imported the correct components, so I need to have a touch below pasty text input keyboard avoiding view. We don't need flat list Starship. We need text. You on image show. You don't need image either. We're gonna move that. We also need Teoh. Make sure imported conflict files we can access via base. And now we can continue to build out the rest of this screen. So if we say this now, we want to. First day is scroll down to render function, and we're going to change this second line here to say this props message. So if we save this, we can't you start to use this component at the moment to replace these areas were showing Just look out again. These areas were showing in the profile page the upload page on and the comments page where it says you're not locked in. We want to show this message here, which is different for each of these areas. So this one says police look into post a comment. Please look in to upload a photo and saw in the profile as well. So we need to make sure this could be changed. It's now that we've to find this inside of our component we've just made we're going to go into each of thes files, an import, a new component. First, let's go to profile Page and right here where we import the photo list, we're gonna copy and paste and also import use a off four slash components for sash off Js . You can save this, that school right down. It's where we currently say you're not locked in. I'm gonna change all of this code to be user. Oh, Then we set the message in here. Please log in to be your profile and then because it we're gonna do the same thing now for the upload screen. So that's opened up a swell. I upload. I know, said comments. Let's go to upload. Going to scroll to the top on import the off jsoc copyrights for profile, paste it into the upload page whilst here, actually what imported Teoh comments page as well. Then scroll back down. So I took this created this just here, but copy it. Go to upload page, scroll down again. Find the same area just here base to end. Its gonna change this one. Line the passing through as a prop paste this here in the race. And just finally, we'll save that and then go to the comments page and do the same thing again. So get right to the bottom paste this in. I just change this probe, Then remove for the head before. So if we closed these pages again so we just have the off Js Let's check out upload page. Just need to fix this on the upload screen to make sure you have capital. You just here just double check this comments as well. Er that also needs to be fixed and profile at this one here as well. So once we have this, we can check these other pages and see, once we look out, we have a message just here. But we just have to change this. Now we can see it's actually appearing, so if we go to the comments one, you can see it just here. But we just want to make sure this is centered on the screen. So down here we have the flex one. We're going to say a line items center and justify content center. Just fix this out. We can close these pages again. And if we look on the upload screen once who flopped out, you can see we have this saying Please look into your profile. Please look into upload a photo and then on the comments area, please log in to post a comment. So in the next video, we're going to start to build out this off Js component file. We just made Teoh actually show different options visas to either lock in or sign up and create an account. And it will then change what's displayed here to be the information that eyes mentally that if he uses actually locked in, this is what we're going to look into next. 49. Add login and signup buttons to component: So before we continue to build out the component here for users to look in and sign up, we're going to move to the app dot gs on actually stopped the user from being automatically logged in each time they opened up. So going to take this log in function just here, I would actually copy this, actually, because we can use this in this new off a component. We're gonna take us away and take away the call to death dot Morgan and just save this file so we can close that torture? Yes, now, But just paste in that log and function inter off dress so we can use that later. So now when we actually use the app, we can see that we're not locked in. This just helps us, Teoh each time we make a change. Now to lock of the user out to actually test what we've done. It's not It's scroll back down to the render area on. We're going to start to build out the actual display we want for the screen. So under here, where we have the stop propped up message, we're going to make a check to the state to see which off step we're currently on. So this or step will start at zero. And this will decide whether we should display the options to show of the log in or sign up buttons or if they've already oppression of these buttons. Then we will check to see which form we should show. So the first and default one will be zero. So here we so have, except to be zero just here. But if they press log in, it will show as one. Or if they press sign up, it'll show as to So this is what we're gonna be adding in just here. So if this star state off step hit zero, we need to create an area just here to show the two buttons that they can actually type in to show you the two buttons they can actually click on. So well, in close all of this interview and we'll get this, um, styling as well. So the 1st 1 the margin Article 20 on a flex direction of right. So it is close that off on inside here will create to touch bullet pastries. So why not have the log in button and then the other one. We'll have to sign up button again. We have to fix this indentation. And in between these two, they want to have another text component that would just say, Oh, so if we say this, you can see the soft display that would be looking at. We have to close this off so you can say or do if you go to upload. Now you can see we have log in or sign up. But now we're gonna add. So we're going to add some about basic styling here just to make these stand out a little bit more and to show they are clickable elements. So where we have touch blow up a city for the log in. So for the text component here we say, log in. We're going to add a style. So it's a fun weights boat and will change the color. It's a green. Then we're copy this styling across down here and change this color. Speak blue and then on the or textures here, going to add some styling just to have some horizontal margin, just a spaces out a little bit. So same margin horizontal off 10. So if we saved this. We should see this stands out a little bit more. Now, here we go as we have the log in button on the sign up button. So next we need to make sure that when these buttons are pressed, it would change this off step. Uh, very boy in the state just here, depending on which button they've pressed. So we'll create on press more cool a function just here to say this Set state off step. Hey, will be one. And then if we copy this same line down here for the sign up button this well, say to. So if we saved this now, what we should see is if these buttons oppressed, it would just hide this area. So the next thing we need to do is move down here to where this off step. Uh, check here will be will not be zero suit either one or two. So inside this area here, going to create another view component again, we'll give this styling off margin vertical of 20 just to keep things consistent up here. Then close this off on an inside here. We're going to make further checks to see if off step is one. So if Logan was pressed or if it's to sign up was pressed. So let this check in just here. So this state all step equals one, so we know it's log in. And then if this is false, we know it was sign up. So for now, we just had a little text component in here just to show each different option on a log in . So if we saved this now and have a look, we should see if if we upload and click on the log in button it, says Logan. And if we're to profile Justo tested again, impressed. Sign up. You can see it's a sign up. So in the next video, we'll change these text components away and actually add in. Interact a ble unnatural. Add some text input forms so the user can add their email, address passwords and actually log in or create an account 50. Create login and signup functions: welcome back. So we're going to start by first creating the actual log in form, which is going to replace this text. Just if we click lock it. We see this text component just here. We're going to start by first removing this and creating a view component which will be placed here instead Inside here. We want to add a touch Better pay city, which will basically allow the user Teoh, cancel this request and go back. If they want to, like, change from Logan into signing up on the office, they thought to sign up, they could go back and then log in. Just be a button that they compress just here to cancel the current action they're making. So what? Add in a text component just here and say cancel. We had some simple styling just here just to make the phone wait. Stand out would make this bolt on gone to this touch, but a pasty itself. For this. Add some styling just to separate this from the rest of the form. So we'll set a border bottom whip off one some vertical petting five a margin to the bottom of 10 and set the color to this border. This will be black. So if we just save this, you could have a quick look what we have. So when we click on log in, we see this area just here with press council, remember, it doesn't do anything. But when you make this next change, it will actually go back and show the two options again. So next we're gonna add this action so well, create a new prop just here which become press. This will call the function to set the state. And here we would just say off step, See? Right. So if we see what this does, you see, we go to log in, press cancel and it takes us back again. We could actually do a swell is where we have this text component. And when we say capsule, we could open up a emoji box just here and just find some of these back arrows confined. It is by typing in back and you can see are the different options here or arrow. You can see this one just to make it stand out just a little bit more. So if we saved this here, come back to upload, it's just saves having to find on. Imagery can use hit, so it's always worth taking a look at the different options in there. Okay, so underneath this type of a pasty we want Teoh just create a little heading here just to show that this is the logging option. So we'll say it will log in just here. Clothes are component, but at some styling here just to make this bit stand out a little bit more So again, at some fun Wait, let's make it boat and separate this out a little bit from the former is gonna be shown below just by saying just adding a margin bottom off. 20. So if we save this, go to the upper fate again, click on it. You can see this is where the area is gonna be shown that underneath the space of 20 before we actually at this for another, we have this. We cannot that form. So first we'll just create one more text component that would say email address says will act as the label and then underneath we can actually add in a text input. So as before, it will take in a number of props for here. We need creditable, but you be true keyboard type as it is an email address. It's important at this in a swell that just comes in his email dash address. This just shows the at symbol Andi, I think dot com as well for your keyboard just to help these type this in. We also had a placeholder. They will say, enter your email address or any message you want to show here and then, as we have done in other text inputs, we say on change text, make sure you capitalize the sea for change and then this. And here we put the text or any variable name orgies here. And then, as with Theo on press event, which is cooler function on this would say this set state E mail is text. Now, we could change this to t You just have to make sure that these are the same. But just to keep everything the same, I like to just use text just toe, keep everything consistent, and then we're also gonna put value in here Now be equal to this state, a male, and then finally will just add some styling in here just to make it stand out a little bit more. We'll get a width of 250 margin vertical of 10 petting a five and then a border color of gray. I would also add a border radius just to smooth and the edges of this in our little bit. Now the three. So if we save this and take a look what we have now, we can see we now have this area just here where the user could enter. There's have to make sure that we add a border whip. So that border actually appears. Just had a border width of one. You can see we have this area just to now what we're going today. His copy this text input on Duthie text component just here. We're gonna paste it directly underneath. Change this area here to say password and where we currently have the keyboard type of going to completely remove this and replace it with another prop called secure secure text entry. Now, this is just to make sure that the text input knows that we're entering a password or something that we don't want to be shown as it's been typed in and we'll change this place older as well. To say into your password on the same thing again for the value here was a pass and from a sentence stating Just here was that pass as well. So if we save this, I just have a look. What we have, we can see we have our email address just to and then that passed. What if we enter anything in here? It's hidden as you expect from a password input field. So we've almost finished this form just here. We just have to create one button underneath the actually process the information that we send. So at this button now, So underneath this last text input again, we use a touch. But I pay city in an inside table, say another text component and this would you say, log in and then we want to start this a little bit. Just so it stands out. So back here, where we have a green log in button on the blue side, not bottom will take this through to the actual buttons at the bottom. So we have that touch from a pace table, set the style in here, have a background color off grade. We'll add padding vertical just to keep things consistent with the rest of the page. I'm heading horizontal 20 and again, a border radius of five. That's just safe. This another quick look. Yes, we have our log in button just here. One more change will make, though is just changed The color of this text to be white Just so it stands out a little bit more. And, of course, you could change the colors and style as much as you want. This is just a base off into a base future in space to get started with Deacon and expand on this. Najera designs as we can see here we have this log in button. Now that stands out. So next we're going to ads on precedent just hit so that when the user enters their information and presses log in hell, actually process this and lock them into the app. So we'll have a compress event just here. There were cold a function and this will be called Lockett. It's what Here we have the function that we took from the address. So if we actually save and run this now, it should actually work So we're going to upload log in, press Logan and you can see it's updated the information straight way. This is because if we look up here, we're parsing through the same usually impossible just here. But obviously we want to make it. Use the information. Do we actually passed through from these text inputs? It's now let's scroll upto our log in function on a job space. We're going to create a variable for each off these types of information. So it's gonna be the email which would be equal to this states. Aimo. And then we'll have the passport, which we just call past would not be this state pause. Then we'll just make a check to see if both the email on the past words are empty or no. So it's a email. There's no equal empty Andi past just no equal empty. So if they're both know Empty will try to actually lock them in or add a check down here in case it's posts and actually a lot this to the screen and say email or password is empty, just so they know to then go and fill this in on the same thing again for the log in just here. If there's an error, we want to alert what this error actually is. So the use of uniter adjust their email address or adjust their password said all we have to do next is replace thes two inputs just here with the aim out on the past of a comment this out for now. Just we could remember what these are and will use thes then to test that dysfunction works . So now let's save this and try out. So first need to look out because we've actually looked in last time so I would look out and then we can go to our log in just here. So if we first tried toe looking about first entry, anything, we should get this error message just here. Yep. So a metal pasteurized, empty. And now, if we enter in a just a a random strangers here, that's no on email address on just something into the password field. We can see that we get the message. That email address isn't correct. If we change this to be a valid email address, we now say that this use up doesn't exist. But if we now type in the actual details. Don't hear that Our associative toe user that's test at user dot com and passwords. If we look in now, we can see that this works. So you've now created a natural log. Inform Onda longer function. So next we're going to take all of this code. Do we added just here. So from to start off this view component to it closes just here. I want to copy all of this and paste that down while we have this sign up text component and then we want to actually make a couple of changes. So where we have this function done here to say this log in I want to change that to be signed up on again. The text he wrote says, Look in, I want to say sign up and we're changes background colors from green into blue. So if we check this all again now we look out first. So you have log in. We can cancel, go back and have signed up. We can cancel. Go back. You may have noticed just there We have one more area. We need to change this bit here says log in. So it create will change this to say sign up. So we check this. Now we have this thing sign up, and if we press this button, we can see that we now need to create this function steps scroll up. So we have our log in function just here. And let me before we copy Andi paces. To save time, we change the name of this function to be sign up because all of the rest of this information could stay the same. But we have to change this function in here. So instead of calling signing of email and password, we're gonna remove all of this right back to here on this would change to, say, create user with email and password, and that was taking the email. In the past, we've defined just here. Well, then change this to a then command that would actually pass us this new user object. Now, with this, we'll send it to a function just a which we called creates use the object. So explain exactly what this does in a moment. So this function we're gonna make up here, so just create is just here. And this would take in the user object and the email address. So work with ease in a moment. Let's just go back down to here. They make sure that we passed these three. So the user object will be this object just here. I want access the use up object inside this object that makes sense. So this here will be a number off different perimeters. We want to access just the use of part of this. Then we're past the email in a swell. And then finally, we just want to make sure that we catch any errors. So it's a catch era, and then we'll actually alert these to the screen as well. This is how we actually create user. But the reason we have to send it to this after function just here it's so that database has ALS. The correct information it needs toe properly populate this user's details. So you have a look at our database. Now you can see in this user object we have this example uses just here on December. Use it down here is going to make sure that we pass in that name, that email address and they use the name on just a default profile picture will be given the use righty. So all we have to do is set this path and then add this information just here. So if we go back to the code, that's what this new function just here is going to be. Four. So in the next video, we'll actually create this, create use object function. Then we'll test the different forms to make sure that a new authorization component is working correctly. 51. Create user object and test signup function: Okay, so we've almost finished this component now on that last video was quite detailed and had quite a lot of things we need to do. But this one is much more straightforward, So we'll get started with this now. So first, we're going to actually log these details to the consoles. We can have a look if we need to debug anything so we'll pass in the EU's object. The email on the next bond would actually be the user I d off this new user that's being created. So it confined this by going to the user object. Then we access this buys in the U I. D variable just here they will be inside this object. This is just for debugging it. Something goes wrong, but next we're going to create a object just here. This will be the information want to set for this user. So we'll set the name. It was just a default name. So say, enter name the better changes on their profile once they flock did on again for the user name. This is just name Andi will set a default profile picture as well. So for this will use the grab it are. The gravitas are profile pictures. So you just typing grammar tar dot com forward slash avatar. And then we're also passed the email here so that that's set in the database as well. This is all the information we need in the use of object. And then after this, we just passed this through to the database. So we say users, we then had a child this path to say, Do we want to access this use writing so the user object don't use righty. And then we simply to say, set this object that we've created just to So this will create I use it for us and will be locked in on this actual whole use will be created. So if we save this now, let's have a look. So if we actually opened the database and have a user at the same time, so like to sign up, create a new used us here, So it's a new user email dot com I just took him past right now is to keep things simple. So if we open the authentication tab just here in a new tab, we can see at the moment we have just one user just here. But if we press sign up, we've never seen that I use that created the profile's been creative of the default pitch just here on the name. So if we have fresh this we see I knew using information just here. This is the user idea that's been generated for this user. So if we now go to my database and look inside, the users object for this user so you can see it's this new idea just here. So SC, uh, one. Why a sc one y a or I want a So this idea just here matches up. So if we open this, we can see we have all the information for this user. So we're back to a simulator. We now have actual log in on registration component, fully working. So now we're left with just making a few small adjustments. So, as you can see down here, we have this loading text, but this shouldn't say loading. It should say that this you doesn't have any images, so should show an empty state just here. So in the next video, we're going to go over a number of small tweaks and adjustments we can make just to finish her out off and make it look a little bit nicer 52. Final adjustments to the app: welcome back. So next we're going to fix this loading era just here when it should say that this user has no photos or has not played it yet. So let's go into our photo list component just here and make changes so we can actually update this. So first, we're going to add another variable to the state that would just say, empty on by default. This will be false. Then we're going to scroll down here to around line 110. So as you can see here, we're checking if this data exists. But we're going to adjust this slightly. Add this inside some Cody brackets, so it should look like this. Now is this actually is explicitly making sure this data does exist. So if we say this again, we should notice any difference, but that if we look in the console, this error that was showing just here we now go to a profile. It's not showing that we need to actually reflect this in what? Showing this loading message just here. So if we scroll down to where we have this loading message, we're going, we're going to make a check to the state just here to see empty is true and if it is true, will create a new text component just here to say no photos, fount. But if this is false, we'll just say loading as we had in that before. So if we scroll back up here to remake this change, we want to check down here and added else and actually update the state to say empty is true. Then up here, well, we know that data does exist. We'll update the state again to say folks, So if we save this now and check again, we can see it is properly saying no photos found. If we go to another user that we know does have photos, it will display them for us just here. There's one more thing that we can fix inside this photo list function. Now, at the moment when we add the data to a flat list, we're just trusting that the information given back from Fire base will be in the correct order on that. When we make these call to the database, it will happen in the correct order again so that all of these photos will show in the correct time they were taken. So the oldest ones will be at the bottom on the newest one to show at the top. Sometimes certain database calls might take longer than others. So it is probably important in here that we add some sort of way to reorder these photos. So to do that, we're going to take this time stamp that we have just here and add another, actually, just here, when we're actually pushing this information to at State and say Timestamp is equal to this time stamp, just here. Then we'll create a brand new, very bored down here could my data and this was set brand new array that will be equal to this feed photo feed that we define up here. And we'll sort this by using this brand new timestamp that we've just added to make sure that we have the newest information at the top on the oldest information at the bottom. So the only thing left to do then is to set the state with this update It a list. So now whenever I use it adds a photo, I have to add in a comment just here. So now, whenever user upload a photo, even if it takes slightly longer to load or to process affection, the use name or fetching anything. Other data. It should always be in the correct order. So again, just make sure that you have two brackets open here on a separate one to close just for this first part off the data. Just here once you got data that save it and if you don't work correctly. So again, as I was saying, you can see the newest wants to be the star on the oldest ones at the bottom. Down here. Now, one final thing we need to fix before we have got this all working correctly, as we can see here for the authorization component we have just made. If we have enough space like this, then it works fine in the comments area. We're a bit squished for space down here. Four for this photo here. What? We know we have comments. We can see we don't have quite as much room, especially open the keyboard. And that would take up about this much space. So for areas like this, we're going to use a new prop on a comments page. So if we look at comments, pace just here or recovery, call this in. We're going to add a new prop here that will allow us to actually, instead of showing natural form when we click log in on this page, you actually take us to either upload or profile page, where we know there's more space. So let's add in this new prop into here, so the same move screen is true on the coast. We want to actually change the screen, that showing them we're on the comments page, we need to pass in the navigation options as well. So it's a navigation because this props navigation. So if we save this and go back to our off page just here, this actually uses move screen variable in the state that we created before. So in order to do this, we're going to go down to the component of Mount Function, which we have done here. They're going to say if this dot props don't move screen, it is true. They want to update the state to update move screen to be true as well. This will set this variable appear to be true. Now, down here, we're currently calling thes us or step functions just here. When the use arrived, the presses log in or sign up. We want to actually now move this to a function. So I'm gonna create two new functions down here. So say show log in, Andi show. Sign up So you can actually copy this? Coaches tear, put it in the show, log in on the same again for show. Sign up. So if we change this hair to say show again on the same again for the set state down here for the sign up, this was a show. Sign up we want to do is make a check. Just here to see if this state moves screen. It's true. So if this state move screen is true, instead of changing the state down here, we want to use the navigation options just here and navigate to the upload screen. And what would actually do is returned false So that this code down here that doesn't actually run so you can copy this again. And at that, just here. And if we save this will reopen Expo on check. This all works. My case expose opened up again now. So if you go to the upload screen. So in here we have the component. It mounts. Make sure that we have to equals characters just here to make sure this is definitely true . So again, when we check this and press log in, if we're on the upload or profile pages, this was should correctly. But if it on the current screen, just TV, we don't have enough space and press lorded, it takes us across one of these other pages. This now is a fully functioning at where we have a profile, pages we can log in. Users can create accounts. They can upload photos, they can add comments, and it can view of users profiles Now. Obviously, this design here is very straightforward and isn't too nice to look at. So in the future, I will add MAWR. More video to this court showing how this could be designed using sketch or other design programs to actually move the different styling across. But this is also a good opportunity as well to test the different styling options we've shown in this course. So you cannot make changes yourself, and you can then looked at mawr options such as deleting photos anyways, users could change their profile picture, and so on says lots of different ways. You can throw this out, which is essentially the weight Instagram waas at the very, very first launch. So again, I hope you've enjoyed this course on Baltimore video to this in the future as well.