Skip to content

madhu314/react-native-tabbed-view-pager-android

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-tabbed-view-pager-android

alt tag

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
  1. 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')
    
  2. 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.