albertbrand / 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!

react-native-android-tablayout's Issues

App crashes with sample example

As the title says, the app crashes for me (using react 0.17) :

Here is my code:

'use strict';

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

const React = require('react-native');
const {
  StyleSheet,
  Component,
  View,
  Text,
  ScrollView,
  ToastAndroid,
} = React;

//I18n
const I18n = require('react-native-i18n-complete');
I18n.fallbacks = true; // Enable fallbacks if you want `en-US` and `en-GB` to fallback to `en`
I18n.translations = require('./res/Strings');

const Dimens = require('Fincaus/app/constants/Dimens');
const Colors = require('Fincaus/app/constants/Colors');



/**
* Enter invitation code
* @class MainPage
* @constructor
* @module Anuncios/views
*/
class MainPage extends Component {

  render() {
    return ( 
       <View style={styles.container}>
        <TabLayout>
          <Tab name="Tab 1" onTabSelected={()=>{ console.log('Tab 1 pressed'); }}/>
          <Tab name="Tab 2" onTabSelected={()=>{ console.log('Tab 2 pressed'); }}/>
          <Tab name="Tab 3" onTabSelected={()=>{ console.log('Tab 3 pressed'); }}/>
        </TabLayout>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    paddingLeft: Dimens.paddingPagePhone,
    paddingRight: Dimens.paddingPagePhone,
    paddingTop: Dimens.paddingPagePhone
  }
});

module.exports = MainPage;

Docs out of date

You should update your docs to use react-native link, since rnpm is deprecated.

Tab Rendering issue with React 29.0

Introduction

When I attempt to render the TabLayout, it renders as shown in the image below. I am relatively new with react/react-native, so if this is a simple issue with styling(, etc), please let me know.

Versions/Dependencies

[email protected]
[email protected]
[email protected]

Steps to reproduce

1. react-native init test
2. npm install --save react-native-android-tablayout
3. rnpm link
4. Replace index.android.js with code below
5. Start Emulator
6. react-native run-android

import React, { 
     Component
 } from 'react';
 import { 
     AppRegistry, 
     View, 
     Text } from 'react-native';
 import { 
     Tab, 
     TabLayout 
 } from 'react-native-android-tablayout';

 class Test extends Component {
    constructor() {
      super(...arguments);
      this.state = {
        tabSelected: 1
      };
    }

    _createSelectedView() {
      return (
        <View style={{padding: 10}}>
          <Text>Tab {this.state.tabSelected} selected</Text>
        </View>
      );
    }

   render() {
     return (
        <View style={{flex: 1}}>
            <View>
              <TabLayout
                style={{backgroundColor: '#ddd'}}
                selectedTabIndicatorColor="green">
                <Tab
                  name="Tab 1"
                  textColor="rgb(0,0,255)"
                  onTabSelected={()=>{ this.setState({tabSelected: 1}) }}/>
                <Tab
                  name="Tab 2"
                  onTabSelected={()=>{ this.setState({tabSelected: 2}) }}/>
                <Tab
                  name="Tab 3"
                  onTabSelected={()=>{ this.setState({tabSelected: 3}) }}/>
              </TabLayout>
              {this._createSelectedView()}
            </View>
        </View>
     );
   }
 }

 AppRegistry.registerComponent('test', () => Test);

Not installing correctly in node4.4.6 ubuntu 14.04

Getting following error in installation
node v4.4.6
npm v3.10.3

+-- UNMET PEER DEPENDENCY [email protected]
`-- [email protected] 

npm WARN [email protected] requires a peer of [email protected] but none was installed.

Tablayout ScrollTo function

how to scroll tablayout programatically?

Tablayout scroll back when I select page which is of the screen.
Thanks

Support rnpm

Would be possible to automate the installation step with rnpm?

Swipe gesture between views

Hi Albert, thank you so much for this library, i really missed a tab native implementation on android, you did a great job.

There's a way to swipe between views?, something like react-native-scrollable-tab-view and described on the material-spec, i know there's a way to scroll between Tabs (with scrollable mode) but not between the views, I really miss this feature, i'm not sure how it could be implemented, but it would be awesome, i'm still playing on the code, if you're too busy, i will try to get some time to make a pull-request.

Thanks you so much.

Super expression must either be null or a function, not undefined

Tab.js: 11
class Tab extends Component {}
I will keep investigating. Just wanted to report since I've been abl to reproduce it using RN 0.26

Performance Issue on Android

Tablayout together with ViewPagerAndroid has performance issue. Tablayout response slow when ViewPager is changed, even JS Dev Mode is disabled.

Package incompatible with current React Native version

When I try install the react-native-android-tablayout package, the current error message appears:

[email protected] requires a peer of [email protected] but none was installed.

can tthe size of the selected tab indicator strip be changed?

demo app not working

A problem occurred configuring project ':app'.

Cannot evaluate module react-native-android-tablayout : Configuration with name 'default' not found.

how to fix this?

why????

my app crash!!

react native 0.36
compileSdkVersion 23
buildToolsVersion "23.0.1"

nothing else

no errors

Update, please, dependencies to the last version of react-native

npm WARN [email protected] requires a peer of [email protected] but none was installed.

Icon not rendering with only icons from oblador/react-native-vector-icons

This is rendering fine:

import Icon from 'react-native-vector-icons/MaterialIcons'
…
<TabLayout style={{flex: 1}}>
  <Tab>
    <Icon name='view-headline' size={24} />
  </Tab>
  <Tab iconSize={24} iconResId='custom_icon' />
</TabLayout>

(I used the custom_icon from your example project.)

However, this is not:

<TabLayout style={{flex: 1}}>
  <Tab>
    <Icon name='view-headline' size={24} />
  </Tab>
</TabLayout>

Do you have any idea as to why? I read your todo ("custom views need a width and height to work"). But no amount of width and height properties on TabLayout, Tab or Icon did help.

ReactNative.createElement is deprecated.

If I use "react-native-android-tablayout", I get this warning:
Warning: ReactNative.createElement is deprecated. Use React.createElement from the "react" package instead

Support tab backgroundColor

Please provide backgroundColor support to tab

Flash back android directly

Tab Text fontFamily and fontStyle

How can I add fontFamily and fontStyle for Tab text? and how can I add right border on Tab as shown as figure

Thanks in advance.

React Native 0.19 problem with props

Updated to RN 0.19 and <Tab/> props are not working:

import { Tab, TabLayout } from 'react-native-android-tablayout'
import Colors from '../../global/colors'

<TabLayout
  style={styles.tabs}
  selectedTabIndicatorColor="white"
  selectedTab={this.state.selected}
  onTabSelected={e => this.setState({ selected: e.nativeEvent.position })}>

  <Tab name="Mapas" accessibilityLabel="Mapas" textColor={this.state.selected === 0 ? 'white' :'#d3d3d3'} />
  <Tab name="Información" accessibilityLabel="Información" textColor={this.state.selected === 1 ? 'white' :'#d3d3d3'} />

</TabLayout>

const styles = StyleSheet.create({
  tabs: {
    elevation: 10,
    backgroundColor: Colors.MAIN,
  },
})

Expected tabs with white text and white indicator

Dont you have upgrade this library components to latest react-native version?

Always shows and error in proptypes after i upgrade to react-native version 0.26

Initially selected tab support

Provide support to select the index of the initially selected tab. So that we can start Tablayout with any page position.

Thanks