react-native-tabbed-view-pager-android v1.0.4

react-native-tabbed-view-pager-android

Getting started

$ npm install react-native-tabbed-view-pager-android --save

Mostly automatic installation

$ react-native link react-native-tabbed-view-pager-android

Manual installation

iOS

Not Supported.

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import is.uncommon.rn.widgets.TabbedViewPagerAndroidPackage; to the imports at the top of the file
• Add new TabbedViewPagerAndroidPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-tabbed-view-pager-android'
   project(':react-native-tabbed-view-pager-android').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-tabbed-view-pager-android/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-tabbed-view-pager-android')

Windows

Not Supported.

Usage

import TabbedViewPager from 'react-native-tabbed-view-pager-android';

<TabbedViewPager
      tabMode={"scrollable"}
      tabGravity={"center"}
      tabBackground={"#008B7D"}
      tabIndicatorColor={"#FFB90B"}
      tabIndicatorHeight={4}
      tabTextColor={"#ffffffa0"}
      tabSelectedTextColor={"#ffffff"}
      tabElevation={4}
      tabNames={this.state.tabNames}
      style={styles.viewPager}
      initialPage={0}
      onPageSelected={(event) => this.onPageSelected(event.nativeEvent.position)}
      onPageScrollStateChanged={(state) => this.onPageScrollStateChanged(state)}
      onPageScroll={(event) => this.onPageScroll(event.nativeEvent)}>
      {
        this.state.tabNames.map((tabName) => {
          return(
            <View style={styles.pageStyle} key={tabName}>
              <Text>{tabName}</Text>
            </View>
          )
        })
      }
    </TabbedViewPager>

All props of ViewPagerAndroid are supported. Following table shows tab props supported by this component.

Look at Example included with this sample for further details.