akpatil / react-native-android-tablayout

React Native Android TabLayout native component

React Native Android TabLayout native component

A React-Native (0.19+) wrapper for the standalone Android TabLayout component. It's fully native and similar in use like the TabBarIOS component.

Example Project

You can find an example project in a separate repo.

Installation

Install module with NPM:

npm install --save react-native-android-tablayout

If you haven't installed RNPM, run:

npm install -g rnpm

After RNPM is installed:

rnpm link react-native-android-tablayout

If you want to setup the project manually, see the manual install guide.

After setting up your project, run react-native run-android from the root to see if there are no compilation failures.

Usage

Make sure to import the Tab and TabLayout component in your script:

import { Tab, TabLayout } from 'react-native-android-tablayout';

Then, create a tab layout as follows:

export default class MyComponent extends Component {
  render() {
    return (
      <View>
        <TabLayout>
          <Tab name="Tab 1"/>
          <Tab name="Tab 2"/>
          <Tab name="Tab 3"/>
        </TabLayout>
      </View>
    );
  }
}

The TabLayout and Tab accept the following properties:

TabLayout

Prop	Type	Explanation
selectedTab	number	Use for selecting the initial tab and/or connecting to state. See the StatefulTabLayout example.
selectedTabIndicatorColor	string	Color of indicator line. Specify in CSS color format.
tabGravity	string	Set tab gravity. Default 'fill', use 'center' when tabstrip needs to be centered.
tabMode	string	Set tab mode. Default 'fixed', use 'scrollable' when tabstrip needs to scroll.
onTabSelected	func	Provide callback function with e:Event as argument. When called, the selected tab position is found in e.nativeEvent.position (0-based). See the StatefulTabLayout example.

Tab

Prop	Type	Explanation
name	string	Tab name.
iconResId	string	Icon resource ID. Points to a drawable, see the IconsOnTopTabLayout example.
iconPackage	string	Icon resource package. If not provided, defaults to current package. Use 'android' for built-in icons. See the IconsOnTopTabLayout example.
iconUri	string	Icon URI. Only allows file:// URIs. See how to combine with react-native-vector-icons in the IconsOnTopTabLayout example.
iconSize	number	Icon size.
textColor	string	Text color. Specify in CSS color format.
onTabSelected	func	Provide callback function with e:Event as argument. Called on the tab that was selected. When called, the selected tab position is found in e.nativeEvent.position (0-based). See the StatefulTabLayout example.
accessibilityLabel	string	Accessibility label for tab. Tabs are already set as accessible.

Usage of these properties can be seen by example in the example repo.

Custom views

Since v0.2, you can define a custom view for a tab by adding child components to a Tab element:

export default class MyComponent extends Component {
  render() {
    return (
      <View>
        <TabLayout>
          <Tab style={{width: 110, height: 48}}>
            <Text>Tab 1</Text>
            <Text>Hey, multiline!</Text>
          </Tab>
          <Tab style={{width: 110, height: 48}}>
            <Image source={require('./image/tabImage.png')}/>
          </Tab>
          <Tab style={{width: 110, height: 48}}>
            <Icon name="user"/>
          </Tab>
        </TabLayout>
      </View>
    );
  }
}

You need to specify the width and height of the tab contents, else no contents will show up. This might be improved in the future.

See the CustomViewTabLayout example for a working example.

Todo

• add/remove tabs not implemented
• custom views need a width and height to work

PRs are welcome!