Header component

Part ɪɪ: React-Native UI│Story 10: Header component

GIT : Repo | Feature/Story branch| PR

In the previous post, we introduced redux to our react-native app and got the UserSignIn component connected with redux store/state and action dispatchers.

Header component

Now let’s add a header component for our app where we would show the title of the currently active screen on app, along with a user icon/profile picture along with a logout button on the header. We should be able to add this header from any screen component, so we will keep its Title as an input prop.

We would connect this header component to redux to have the googleUser from redux store and GoogleSignIn_logOut dispatch action.

1 . 📂 add a folder AppHeader under src/components.

2 . 📃 add a file AppHeader.styles.js 👇

Above, we defined styles for the elements we would use in the AppHeader component

3 . 📃 add a file AppHeader.js under src/components/AppHeader 👇

Lets see what we are doing in this component 👆

• line #9 — 30 : render() method - renders header, which has user’s profile photo on the left side, a title and user’s email as subtitle in the center and a logout button on the right side.
  Note, on line# 14 and 20, we are using this.props.googleUser, which would map to redux store’s googleUser state variable once we connect this component to redux.`
• line #35–45 : signOut() method which is called onPress of logout button. It calls react-native-google-signin plugin’s revokeAccess and signOut to log out the user. It then calls this.props.GoogleSignIn_logOut, which would map to redux dispatch action GoogleSignIn_logOut to reset the googleUser in redux store back to null.
• line #50–54 : we subscribe to didFocus event of react-navigation so that whenever this component is focused(loaded), we would check if this.props.googleUser is not empty, i.e. user has authenticated, else it would send the user back to SignIn screen
• line 61-65: component’s propTypes

4 . 📃 add a file AppHeaderConnected.js 👇

👆above we mapped the googleUser state property from redux store and GoogleSignIn_logOut redux dispatch action, to component props and connected the AppHeader component to redux.

Now that we got all the parts of our app — components, redux and router navigation, hooked together, let’s tests if it’s working as expected. App would first take user to signIn screen, after user successfully signs in, it would take the user to Home screen, where we should see user’s profile photo (or user’s first name initial which google defaults to for user’s photo if user hasn’t provided any picture), with a log out button on the screen header. Restart or reload the app on the simulator: 👇

5 . Add AppHeader in src/components/index.js 👇

6 . Add AppHeader component to Home screen component: 👇

👆 Line # 5 and 13 : we added the AppHeader component to the Home screen passing it the two props title and navigation.
We removed the logout button from Home screen as we have it in AppHeader now.
(Note that we also moved styles from Home.js to a new file Home.styles.js)

Now, check the App on simulator. It should refresh by itself if you had the Hot reloading enabled, else reload it manually from the react-native developer menu.

Awesome!!! we now have the header component for our app, showing user’s profile pic and email along with a logout button.

Next, we would create ‘Add a word’ screen with a simple form for user to add a word to his/her vocabulary collection.

← Prev:Adding Redux┈🏠┈ Next:'Add a Word' screen→