react-native-tabbed-view-pager-android
Version:
An android ViewPager wrapper with built-in tabs.
84 lines (66 loc) • 3.76 kB
Markdown
`$ npm install react-native-tabbed-view-pager-android --save`
`$ react-native link react-native-tabbed-view-pager-android`
Not Supported.
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';
<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](https://facebook.github.io/react-native/docs/viewpagerandroid.html) 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](https://facebook.github.io/react-native/docs/colors.html).
tabIndicatorColor | string | App theme| Yes. | Selected tab indicator color. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).
tabIndicatorHeight | number | App theme| Yes. | Selected tab indicator height. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).
tabTextColor | string | App theme | Yes. | Color of the text in the normal/unselected tab. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).
tabSelectedTextColor | string | App theme | Yes. | Color of the text in the selected tab. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).
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.