react-native-dynamic-tab-view

    1.0.7-0 • Public • Published

    npm version

    Features

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

    Usecases

    • 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 install react-native-dynamic-tab-view

    Use it by

    import DynamicTabView from 'react-native-dynamic-tab-view';
     <DynamicTabView
            data={dataSource}
            renderTab={renderTab}
            onChangeTab={onChangeTab}
            defaultIndex={defaultIndex}
            containerStyle={styles.container}
            headerBackgroundColor={'white'}
            headerUnderlayColor={'blue'}
          />
    

    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

    FAQs

    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

    Contributors

    Install

    npm i react-native-dynamic-tab-view

    DownloadsWeekly Downloads

    41

    Version

    1.0.7-0

    License

    none

    Unpacked Size

    12.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • s1thsv