Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/madhu314/react-native-tabbed-view-pager-android
A React Native component for android view pager with tabs.
https://github.com/madhu314/react-native-tabbed-view-pager-android
android pager pager-android react-native
Last synced: 9 days ago
JSON representation
A React Native component for android view pager with tabs.
- Host: GitHub
- URL: https://github.com/madhu314/react-native-tabbed-view-pager-android
- Owner: madhu314
- License: mit
- Created: 2017-03-09T07:25:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T17:54:58.000Z (over 1 year ago)
- Last Synced: 2024-05-13T02:03:30.222Z (6 months ago)
- Topics: android, pager, pager-android, react-native
- Language: Java
- Size: 838 KB
- Stars: 43
- Watchers: 3
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native-native-modules - react-native-tabbed-view-pager-android ★21
README
# 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
```javascript
import TabbedViewPager from 'react-native-tabbed-view-pager-android';
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](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.