react-native-scrollable-tabs-hybrid

    0.1.0 • Public • Published

    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

    GIF

    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

    Install

    npm i react-native-scrollable-tabs-hybrid

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    85.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • saravanabalagi