A React Native component for android view pager with tabs.

License: MIT License

JavaScript 24.04% Python 3.64% Java 51.84% Objective-C 10.65% Ruby 1.52% C# 8.31%

react-native android pager pager-android

react-native-tabbed-view-pager-android's Introduction

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.

react-native-tabbed-view-pager-android's People

Contributors

Stargazers

Watchers

Forkers

andrerfneves sangotaro aravind12345 gendeld thedsantana nolsto nim23 ajinasokan ashokkumar88 ferrannp kmagiera

react-native-tabbed-view-pager-android's Issues

Page inset

I'm not sure that this project is still alive, but:
looks like tabbed pages are getting the wrong placing and size information. Even in your example in README you can see that the content of tabbed pages is below the middle. Pages go down out the screen exact to the height of TabBar.

Lower Case Tab Names

Hey @madhu314, this package is by far the best native-Android implementation I've come across. I'd like to use it in my project, however I do want to be able to change the styles of the TabName items. How would one go about doing that?

I could submit a PR, but not super familiar with Android ViewPager to be able to pass style props down to the native level. Let me know your thoughts. If you're busy and can't implement this I can look into submitting a PR myself with some help.

Cheers

Support of arrays of objects

Hello, I loved your package, but I had some difficulty doing asynchronous operations using it, for example: passing arrays of objects, is there any way to do it?

How to change tab programtically?

Hi,

How can i change tab programatically?

Example can not run

Error Message:

unable to resolve module 'react' from .... index.js: module does not exist in the module map

Use ViewPager from react-native-community/react-native-viewpager

Hello 👋

We extracted ViewPager to its own package https://github.com/react-native-community/react-native-viewpager and made several improvements for it.

Would be awesome if we can update this library to use the official ViewPager (as old one will be removed from core).

update readme

RNTabbedViewPagerAndroidPackage should be replace with TabbedViewPagerAndroidPackage

Performance

Hello, Can this handle large number for pages, for example 600 pages without performance issue?

How to change tab use function?

I want to change to specific tab. But i don't find this in document?

How to change fontFamily of tabs?

Hi,
How can I change the fontFamily of the tabs for Android? I tried to change from TabbedViewPager.java but it is not working. Can u please give any idea which file should i modify to change the fontFamily. I added the below code at line 56 in TabbedViewPager.java

Typeface typeface = Typeface.createFromAsset(getContext().getApplicationContext().getAssets(), "fonts/NunitoSans-ExtraLight.ttf");
			for (int i = 0; i < this.tabLayout.getTabCount(); i++) {	
     TextView tv=(TextView)LayoutInflater.from(getContext()).inflate(R.layout.custom_tab,null);
     tv.setTypeface(typeface);       
     this.tabLayout.getTabAt(i).setCustomView(tv);
}

error in react-native 0.48.1

createJSModules() in TabbedViewPagerAndroidPackage class is removed in react-native 0.48.1.

Bug when another component opened and then backed to this one

Hello, I am using your library along with https://facebook.github.io/react-native/ . I have a viewpager in one of the tabs and when I push some component over the one with viewpager and then I hit back, viewpager will "break".. it seems that connection between TabLayout and ViewPager is broken or I dont know what.. If I swipe to the side, it keeps stuck between two pages and if I click on any of the tabs, tab get selected but viewpager page do not change.. do you know what may be happening or do you need more info? Thanks very much, nice library by the way

madhu314 / react-native-tabbed-view-pager-android Goto Github PK