Build a Social App With React Native

3.2 Add a Sign-Up Screen

Hi, and welcome back to Build a Social App and React Native. In this lesson we are going to finish our authentication part by creating the signup screen. We're actually not going to create a new screen for this, but make the login screen more flexible. Let's start in the random function. At the bottom, we are going to add a button that calls setState isSignup, and set it to the negated value of isSignup. The title is depending on this state variable, and it will say login if it's in signup mode, and signup if it's not. The same goes for the login button. Now, above the email field, I'm going to display a name field variable. This variable will also have a form label and a form input if the state.isSignup is true. Otherwise it will be null. This field also focuses on the email field. I'm going to also change the callvex from performLogin to performLoginOrSignup. The function simply checks if you are in signup mode and calls to the specific functions accordingly. The performSignup function is actually very similar to the performLogin one. So I'm going to copy it. And just add the name to the variable extraction from the state. And create another constant that starts the name as display name as well as the email. Now I only have to change the call to login to the trade user function and pass the user data as a second argument. Since storing and navigating is the same in both functions, I'm also going to extract it into its own function. It will take the credentials and extract the the email and password, which let's us get rid of the reading from the state. We just need to set the default state of IsSignup to false, and that's actually the completed login flow. So let's do another quick thing regarding the profile and displaying the user's data. I'm going to replace all static information we currently have there to dynamic data. This also means that we have a more complicated decorator setup. So let's import it from the libraries. I'm going to need connect from redux and firebase connect data to gs and path to gs from react redux firebase. Now, this time we have to call a connect first like we did before. There's a function that takes the firebase variable and maps the of property to the appropriate path. Then recall firebaseConnect this time also with a function that takes the current props, and we will return an array with a path. And this path would be a special query to firebase. I'm going to fetch the post and add a query param by using the hash called OrderByChild and pass the user_id attribute. Then I'm also going to pass the equal to query that gets a value depending on the props of your id property. And this allows us to only fetch the post of the user. Then we call the connect the creator again. And this time we're going to fetch the profile with path to gs as well as posts with data to gs. Which will use the path we returned before. Now we change the email in the gravatarUrl method to this.props.auth.email. And then add some variables to the render method. First, we need the name, and this means we have to check if the profile is there, and then get the display name of it. Otherwise, I'm going to display anonymous. Then, we want the number of people the user follows, which is going to be in the profile as well under the following key. Therefore, I have to check if the profile and the following key accessed can return the length or zero. To get a kind of a posts I have to check the posts and then get a length by counting the address swift object.keys. Now we can switch to data and the return value to the variables. And this is all we need to do to display the user's information. A small thing I forgot is to extend the setup authentication function through a starter user state and starting the app. First of all, we have to add async to the function definition so we can use a weight. Then we have to use a try catch prop, that's a navigation redirect in the catch class. To get the credentials, we are going to call await AsyncStorage.multiGet. We have the email and password keys an argument. Otherwise, we'll wait for the promise to resolve, and return the value like a normal function. The same goes for the firebase login function. We have to call the email and password params. This time using the array accessor to get the values for them. If there wasn't an exception thrown on to now, we are successfully logged in. This means we can set all the complete to true. Finally, we have to import AsyncStorage. When the app reloads, we will be logged in automatically since the values have already been stored. In the next lesson we are going to look at the profile and allow you to follow other users by accessing your address book. See you there.