Home screen component with routing and navigation

Part ɪɪ: React-Native UI│Story 07: Add Home screen component and implement screen navigation

GIT : Repo | Feature/Story branch| PR

In the previous part, we added Google SignIn for iOS platform of our React-Native app. Before we set it up for Android platform, let’s add a Home screen to our app where user would land after signing in.

In this part, we would do following things:

• add native-base react-native component library to use its UI components in our application. Also, we would add react-native-awesome-alerts for creating some cool looking dialog boxes whenever needed.
• add a Home screen component with some static, where user would land first after signing in and would see a list of words that user has added to his/her vocabulary collection.
• we would add react-navigation to our app and set up initial routing for our app, which at present would have only two screens i.e. User Sign-In and Home screens.

Add native-base component library

$ yarn add native-base react-native-awesome-alerts react-native-responsive-fontsize
$ react-native link

👆 Along with native-base, we also installed react-native-awesome-alerts package to help us create easy alert-boxes and react-native-responsive-fontsize to have responsive font sizes based on screen size.

Add prop-types

Also, now that our app is growing, we would soon come across a need to use props in our components. To have type-checking for the input props of our components, let’s add prop-types to our app.

$ yarn add prop-types

Home screen

Home screen is where user would land after signing in successfully. It would show a list of words that user has added to his/her vocabulary collection . To keep things simple at this point, we would have a static list of with few hard-coded words and would make it live dynamic later to get the user’s vocabulary words from DynamoDB table using the serverless lambda API (created in part-I of the series).

Home.js 👇

👆 HomeScreen component. It’s just rendering a static list of few words.
Note that, we added a Log out button at the bottom of the list. This we added to Home screen for the time being, to allow user to log out once we would navigate user to this screen after successful sign-in. Let this be here for now, we would remove it from here when we move the log out link to Header component that we will build in the next part of the series.

Sign-In screen

In the previous post, when we created UserSignIn component for our app, we directly added the component inside the root App component to quickly test it. But lets now create a screen component for User SignIn so that we can add it as one of the screens to stack navigation and let user go back it to on logout.

📂 Add a folder SignIn under src/screens folder
📄 Add a file SignIn.js under src/screens/SignIn folder 👇

👆 we now have a SignIn screen component that wraps the UserSignIn component, so we can remove it from App.js and replace it with a stack navigation’s AppContainer component. Thus App.js would act as a wrapper of our application showing within it the needed screen as required based on application state.

𝚒𝚗𝚍𝚎𝚡.𝚓𝚜 for screens folder:

Add a file index.js under screens folder to export the components we would have in any subfolders under the screens folder 👇 (why this index.js? see here)

Next, let’s create our app’s StackNavigation and AppContainer using react-navigation.

Adding Routes using react-navigation

1. Install react-navigation and react-native-gesture-handler

$ yarn add react-navigation react-native-gesture-handler
# or with npm
# npm install --save react-navigation react-native-gesture-handler

Link to native dependencies:

$ react-native link

*️⃣ (For Android, make the necessary changes that need to be done in MainActivitiy.java as described in react-navigation docs) 👇

Creating stack navigator for our screens

📂 Create a folder routes under src folder
📝 Create a new file - AppStackNavigator.js under src/routes folder with below code:

👆Line # 5: we are using createStackNavigator method of react-navigation to create an stack of two screens, a Home screen and a SignIn screen.
The second parameter to createStackNavigator method is the stack configuration object where we have setSignIn screen as the initial screen to load and { headerMode:'none' } as navigationOption - this will disable the default header that react-navigation adds to the screen.

At line # 16 : we created an AppContainer component that will act as a container for this navigation stack we created. Check the docs to understand about react-naivation’s AppContainer.

Next we will update App.js to render this AppNavigationContainer component at the root of our app:👇

Next thing we want is once the user successfully signs in, the app should navigate the user to his/her home screen.

For this, we would first pass the navigation prop from the SignInScreen component to UserSignIn component.

*️⃣ this.props.navigation : When we create StackNavigation, the navigation prop is passed in to every screen component that we add in stack navigator.

Update the render method of the SignInScreen component as below : 👇

To adapt to the new navigation flow, we also would have to refactor the UserSignIn component to navigate user to Home screen on successful sign-in. Updated UserSignIn components 👇

👆 Lets look at the changes we made to UserSignIn component: we now have a navigation prop available in the component that we passed to it from its parent SignInScreen component.

We use this property’s navigate method in the component’s onSignInPress and isUserSignedIn methods (line # 74 and 88 👆) to navigate the app to Home screen after user successfully signs in or is already signed in.

Line # 24: We added a class level variable screenFocusSubscription, that we set in componentDidMount life-cycle method (Line # 28). Its explained in the comments (Line # 21–27)

Additionally, if you compare it with previous version of the component code, you would notice we removed the ‘Log out’ button from the render method after successful login. This is not needed any more because now we are navigating user to Home screen after login.

Now let’s see if the app is working as expected after these changes. Hot reloading might refresh the app on simulator, if not restart the app (react-native run-ios):

Perfect, we now have Google Authentication and routing working in our app.

Next, we would configure the app’s Android project for Google Sign-in services and then make sure the app works exactly the same on Android as well.

← Prev:User SignIn for iOS ┈🏠┈ Next:User SignIn for Android→