React Native Android TabLayout native component
Java JavaScript
Latest commit cd8cd15 Sep 15, 2016 @AlbertBrand committed on GitHub Merge pull request #28 from lintonye/react-native-0.32
Update to fix the crash on RN 0.32

README.md

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.

Animated example

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!