react-native-scrollable-tabs-hybrid

react-native-scrollable-tabs-hybrid

This is a fork of React Native Scrollable Tab View, which allows displaying both icon and label on the tabs.

Demo

Installation

1. Run either

npm install react-native-scrollable-tabs-hybrid --save
yarn add react-native-scrollable-tabs-hybrid

1. var ScrollableTabView = require('react-native-scrollable-tab-view');

Basic Usage

var ScrollableTabView = require('react-native-scrollable-tab-view');
 
var App = React.createClass({
  render() {
    return (
      <ScrollableTabView>
        <ReactPage tabLabel="React" />
        <FlowPage tabLabel="Flow" />
        <JestPage tabLabel="Jest" />
      </ScrollableTabView>
    );
  }
});

Text Only tabBar

<ScrollableTabView
      renderTabBar={() => <DefaultTabBar tabStyle={s.tabBar} />}
      tabBarTextStyle={s.tabBarText}
      tabBarUnderlineStyle={s.tabBarUnderline}
      tabBarActiveTextColor={'#eeeeee'}
      tabBarInactiveTextColor={'#666666'}
      tabBarBackgroundColor={'#111111'}>
      <Recent tabLabel="Recent" />
      <Archived tabLabel="Archived" />
    </ScrollableTabView>

Icon + Label tabBar

var ScrollableTabView = require('react-native-scrollable-tab-view');
 
var App = React.createClass({
  render() {
    return <ScrollableTabView
      renderTabBar={() => <TabBar />}
      tabBarPosition={"bottom"}>
      <Home tabLabel={"Book"} icon="ios-create" />
      <History tabLabel={"History"} icon="ios-albums" />
      <Profile tabLabel={"Settings"} icon="ios-construct" />
    </ScrollableTabView>
  }
});

Custom tabBar

You can add your own custom tabBar. Here's an example:

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
 
import s from './tabBar.scss';
import gs from '../../app.scss';
 
class TabBar extends React.Component {
  icons = [];
 
  constructor(props) {
    super(props);
    this.icons = [];
  }
 
  render() {
    let {tabs, goToPage, activeTab, style, icons} = this.props;
 
    return <View style={[s.tabs, style]}>
      {tabs.map((tab, i) => {
        return <TouchableOpacity key={tab}
                                 onPress={() => goToPage(i)}
                                 style={s.tab}>
          <Icon
            name={icons[i]}
            size={25}
            color={activeTab === i ? '#5e92f3' : '#999999'}
            ref={(icon) => { this.icons[i] = icon; }}
          />
          {
            activeTab === i && tab &&
            <Text style={[gs.buttonText, s.tabCaption]}> { tab } </Text>
          }
        </TouchableOpacity>;
      })}
    </View>;
  }
}
 
export default TabBar;
 

Contribution

Issues are welcome. Please add a screenshot, if not screencast, of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.

Pull requests are very welcome.

1. Fork the repo
2. Create new branch with feature name as branch name
3. Check if things work with a jupyter notebook
4. Raise a pull request

Licence

Please see attached Licence