React Native Component for Creating Dynamic Tab Layouts


  • Easy to use and easy to read code
  • React-Native Javascript library built on top of FlatList.


  • Dynamic tab data that can be populated by code (typically tabs are determined by an API call)
  • Ability to select any index (and just the zeroth index) as the default index.

How to use

Simply install by running yarn add react-native-dynamic-tab-view

Use it by

import DynamicTabView from 'react-native-dynamic-tab-view';

Here data is of the format

   { title: 'Tab1', key: 'item1' },
   { title: 'Tab2', key: 'item2' },
   { title: 'Tab3', key: 'item3' },

title sets the tab title key is used internally by React. It can be any unique string

Important Props

  • data data to tell the number of tabs and set the layout
  • renderTab method to render individual tab. It should return a valid React Component
  • onChangeTab callback that will be invoked when a user changes tab
  • defaultIndex index of the tab that will be selected by default.
  • containerStyle style for the dynamic tab view container
  • headerBackgroundColor background color for header
  • headerUnderlayColor Color for header underlay
  • headerTextStyle style for header text

Run the Example project

  1. cd Example
  2. npm install
  3. react-native run-android or react-native run-ios

or try expo: Dynamic Tab View Example


Why are you building another TabView library?

At present, there are two tabView libraries that are out there

  • react-native-scrollable-tab-view
  • react-native-tab-view I have used both of them and I had multitude of issues with them.
  • react-native-scrollable-tab-view
    • Doesn’t have proper maintainence. Last update was back in October. There are lot of open PRs.
    • Code is bloated and I tried fixing issues, but couldn’t navigate my way through
    • Uses different code for Android and iOS and therefore I had issues like some view works with Android well and not with iOS and viceverca
  • react-native-tab-view
    • Uses different code for Android and iOS
    • Couldn’t get default page selected working with this.
    • Built and works well for static views (dynamic tabs doesn’t work very well with Android)

How’s react-native-dynamic-tab-view different?

  • Uses same code for Android and iOS
  • More importantly, uses FlatList for creating the tabViews
  • Easy to read code


Download Details:

Author: yeswanth

Source Code:

#react-native #react #mobile-apps

React Native Component for Creating Dynamic Tab Layouts
21.20 GEEK