Components In React Native Apps

This article will cover the React Native components:


Let’s start with the following components:

  1. TabBarIOS: This is one of the very interesting features in most of the apps which provides a separation of concern amongst the UI. Each module/screen is represented by a tab on the mobile screen which makes an appealing user experience and clears the goal of individual tabs. As we can see in the following figure, this screen has four tab bars, starting from left, Search, Favorites, History, and more.


Each tab holds valuable content as per the module. Using this control, you can achieve the following output.

Let’s see some code in action for how we can create a tab bar easily for any mobile application in a short span of time. Step 1.

Import TabBarIOS from react-native as per the screenshot at #5. Step 2.


  • Empty <TabBarIOS></TabBarIOS> will just draw an empty bar with no tabs defined, as expected. Now, it's time to add the Tabbar items.


\Step 3: Adding Tabitems/bars using <TabBarIOS.Item>. Lines # 25 – 38 create three tabs named search, history, and bookmark.

Output:

Now, a few things need to be considered. React native provides us few system icons out of the box, as listed down.

  • bookmarks

  • contacts

  • downloads

  • favorites

  • featured

  • history

  • more

  • most-recent

  • most-viewed

  • recent

  • search

  • top-rated

systemIcon comes with predefined icon text which you see under the icon. It doesn’t mean that we can’t add our custom icons and text. Let's see in action how we can add custom icon and text under icon.

Lines #25-29 draw a search tabbar using systemIcon. In this code, we don’t need to add any title. Whereas Lines #31-34 draw custom search tabbar with cus