Dissecting WhatsApp Layout through React Native (part2)… Cont’d
This tutorial is a continuation from my previous post. If you haven’t read the previous post, Please do so and get back to this post after you’re done reading the part 1.
For this tutorial, We will put a scrollable tab inside our green box(contentContainer) as shown in the image below.
Let’s add react-native-scrollable-tab-view into our project.
rolly$ npm install react-native-scrollable-tab-view — save
Before we import react-native-scrollable-tab-view into our code, Let’s arrange our project directory. As of now, our code all resides in index.ios.js. As WhatsApp contains 3 tabs, might as well create 3 js files for each tab. Let’s name it Calls.js, Chats.js & Contacts.js and put all 3 files under a newly created folder app/components. Your project structure should now look like this.
In the index.ios.js, Let’s move the ListView section under render() function, the renderPersonRow(person) function, componentDidMount() function and all it’s related stylesheets, imports and constructors, then move it to Calls.js.
After removing the necessary codes in index.ios.js file, add our new component <Calls/> under the contentContainer section. As well as it’s import declaration.
Now, everything is set. Go to reactwhatsapp project folder and run react-native run-ios. You should see the same screen without breaking anything. But how do we add the scrollable tab?.
Since we already created 3 new files under /app/components and we also added the react-native-scrollable-tab-view, Instead of adding directly <Calls> component under the contentContainer view, Let’s try adding the <ScrollableTabView> component and put the 3 components (Chats,Calls&Contacts) under the <ScrollableTabView> component.
To set our tab labels, simply add the attribute tabLabel into our components. For more information about the usage and attributes of ScrollableTabView, check this link.
For <Chats> and <Contacts> component, we can just create an empty class that returns a <View> for the mean time.
Save all files and refresh your simulator.
Bravo!!!. Now, we have a very nice looking replica of WhatsApp using react-native.. but not yet, i still see 2 tabs empty. Let’s furnish those 2 tabs.
Noticed that the URL in our fetch function inside the componentDidMount() has an untidy and unfriendly looking URL. For readability and maintainability, let’s put all our URLs into 1 file.
Create a new folder /app/data with a file data.js. This file will contain all our URLs.
and import data.js into Chat.js, Calls.js & Contacts.js
OK. Let’s refresh our simulator by pressing CMD+R.
Currently, the codes are plainly for view. We have no logic inside our code yet. Don’t worry, We’ll put a small logic into our code. Notice the top right corner of the screen? Every time we scroll our tab, the icon at the top right corner is always ‘phone‘ icon. In the real WhatsApp app, If Chats tab is selected, icon will be a ‘message’ icon. If Contacts tab is selected, ‘person’ icon will be shown.
To do this, we’ll put a tabListener to our <ScrollableTabView> Component. Every time there is a change on the tab, the ‘onChangeTab’ will trigger our function ‘this.handleChangeTab(index)’ . The ‘this.handleChangeTab’ will do nothing except to set the selected index to our state variable ‘selected’. The ‘_getIcon()’ will be triggered once there is a change in the state. This function will return the icon name to be used based on the selected tab.
onChangeTab={(index) => this.handleChangeTab(index)}Save all changes and hit refresh.
Now our icons at the top right corner changes according to the selected tab. For the screen navigation, I’ll put it on a different post. You can get the complete codes from my git repo. I have refractored some of my code to look better, cleaner and easier to understand. It also contains Screen navigation, react-native-searchbar, react-native-menu and react-native-invertible-scroll-view
Thanks for reading and Happy Coding!!! :)
