react-native-tabbed-view-pager-android

!alt tag

Getting started

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

$3

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

$3

#### 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


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

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(

{tabName}

)
})
}

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