react-native-tabbed-view-pager-android

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

• 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

• 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')
  

• 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.

Prop	Type	Default	Optional	Explanation
tabMode	string	scrollable	Yes.	Either fixed or scrollable.
tabGravity	string	fill	Yes.	Either center or fill.
tabBackground	string	App theme	Yes.	Entire tab layout background color. Specify in CSS color format.
tabIndicatorColor	string	App theme	Yes.	Selected tab indicator color. Specify in CSS color format.
tabIndicatorHeight	number	App theme	Yes.	Selected tab indicator height. Specify in CSS color format.
tabTextColor	string	App theme	Yes.	Color of the text in the normal/unselected tab. Specify in CSS color format.
tabSelectedTextColor	string	App theme	Yes.	Color of the text in the selected tab. Specify in CSS color format.
tabElevation	number	0	Yes.	Elevation of the tab layout. Default value is 0.
tabNames	array	None	No.	A string array of tab names. Non optional prop. Should indicate names in the same order as views of view pager children.

Look at Example included with this sample for further details.