React Native uses flexbox to layout and arrange its’ components and children. Arranging your components in its desired position in react native can be troublesome if you don’t have a better understanding of flexbox.

For this tutorial, we will only cover a few screens in WhatsApp(Android version). First, Let’s take a look at the screenshot below.

Take note that in React, everything are components. And every component can have sub components called children and those children can have children too and so on.

So now, let’s create our workspace. Go to your terminal and type

rolly$ react-native init reactwhatsapp
rolly$ cd reactwhatsapp

After you move inside ‘reactwhatsapp’ directory, you should be seeing something like below screenshot.

Now, let’s run and test our workspace if it works.

rolly$ react-native run-ios

If you’re able to see the same image as above, then you’re in good shape. So, Let’s continue creating our first screen. Before we do that, let’s break down our first screen into hierarchical UI components.

The first screen contains 5 different <View>s

1. Outer Red box — The parent <View> which contains all other components.
2. Green box — contains the ScrollableTabView
3. Orange box — holds the app header components
4. Inner Red box — Text component (WhatsApp)
5. Purple box — header icons

React Native provides a great way of styling and lay-outing your app. It looks like CSS style but it’s not. Also, If you’re familiar with CSS Flexbox, then styling and lay-outing components in React Native should be pretty easy for you. Otherwise, check out some tutorialson React Native Styling. There are a bunch out there.

Now, open your workspace in your preferred editor. There are tons of free editors online(Sublime Text, Brackets, Atom and what not). Choose the one that makes it handy for you to perform shortcuts during development.

In index.ios.js , remove all the sub-components within the parent view and clear all the contents of const style.

Save the file and Press Cmd+R in iOS simulator. You should see an empty screen. Then, let’s assign style names to the 5 different views I listed above.

1. Outer Red box — [mainContainer]
2. Green box — [contentContainer]
3. Orange box — [headerContainer]
4. Inner Red box — [leftHeaderContainer]
5. Purple box — [rightHeaderContainer]

The style mainContainer (outer red box) should have a flex=1 which means that the component which has mainContainer style will fill the entire screen. Now, inside the mainContainer (outer red box)contains 2 different containers contentContainer(Green box) & headerContainer (Orange boxes). If you set flexDirection=”column” to mainContainer, components under mainContainer will be stack vertically. If flexDirection=”row”, components under mainContainer will be piled horizontally. For our screen, we need to set flexDirection=”column”. By default, flexDirection is set to column. So, we need not to define flexDirection. Let’s create all style names we defined above and its properties.

Now that we have our created our View containers, You should be seeing a familiar layout when you hit ‘CMD+R’ to refresh the screen as shown below.

Let’s start adding children components inside the <View> components by putting a <Text> component inside the <View> with a ‘leftHeaderContainer‘ style name. Then, define a style for the newly added <Text> component called ‘logoText‘. But before we can add the <Text>, we need to import the ‘Text‘ from react-native library

For the icons inside the purple box which is the <View> with ‘rightHeaderContainer‘ style, we need to download some customisable react-native vector icons. You can check the link a read the documentation for your own benefit.

Open terminal and go to your project root directory and install the icons.

rolly$ npm install react-native-vector-icons — save
rolly$ rnpm link

or

rolly$ react-native link

You can also verify in your package.json file to see if the package was successfully installed.

After successfully installing the vector icons. Let’s import the MaterialIcons from the vector icon package inside your index.ios.js file

import Icon from ‘react-native-vector-icons/MaterialIcons’;

Then, add the following icons at the <View> with the ‘rightHeaderContainer‘ style

If you see a red screen(which is definitely an error screen) that says ‘Unrecognised font family ‘Material Icons’, you need to restart your simulator and run again ‘react-native run-ios’. Reason being, is that a new package was installed and was not yet part of the compilation.

After running ‘react-native run-ios’, you should be seeing the same screen as shown below.

Let’s try adding contents into our <View> contentContainer which is the green box. We can use this raw json content for our dummy data. There are 2 things we need to consider when displaying in contentContainer. First is the ListView, which allows us to populate an array of data. Second, React Native provides a Fetch API for our networking needs. With this fetch api, we can fetch contents from any arbitrary URL which is in our case is the raw json I provided.

After importing fetch & ListView api, Let’s create and initialise our ListView.Datasource and retrieve our dummy data using the fetch API. Fetching of our data will be done after our component will be mounted using Reacts pre-defined function called componentDidMount.

componentDidMount()

is invoked immediately after a component is mounted. Initialisation that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

Once this class is instantiated, It will automatically call the constructor function and componentDidMount function once component is mounted.

To see the data in the screen, We need to put our ListView inside the <View> with style contentContainer

Your index.ios.js file should now look like this.

Save your files and hit ‘CMD+R’ to see the same image as below.

Now you are able to populate data from a json formatted text via a fetch api unto your contentContainer view. Let’s add some style to make it look better and add all other information. Also, Since we are displaying an image. Let’s include Image api from react-native within our import.

Let’s update our renderPersonRow function to give a more detailed information of our ListView items.

Save and hit ‘CMD+R’ to see our latest screen. Another way to see our changes immediately without refreshing our screen is by ‘Enabling Hot Reloading‘ feature. In this manner, we can save a lot of time refreshing our screen with just minor style changes. Once a file is changed and saved, our simulator auto refreshes our screen to reflect the changes without changing its state. After saving all the changes, you should now have a slightly cloned WhatsApp app using react.

For our Part 2, we will add the Scrollable Tabs, with some navigation to other screens and some user interaction.

Enjoy!

Dissecting WhatsApp Layout through React Native