Enhanced Fluid Bottom Navigation Bar

This project improves the customization of 10clouds' fluid tab bar for React Native.

What's New in 0.2.2/0.2.3:

• Fixed and issue where Zocial icons were not being rendered properly.
• Formatting and linting.
• Optimized dependencies.

Changelog:

• Added Expo compatibility by removing react-native-view-overflow and the need to link it.
• Added integrated vector icons via @expo/vector-icons so you don't have to supply your own icons.
• Tab bar now auto-selects first tab index on mount (this behavior is customizable).
• Tab bar background color is now fully customizable.
• Icon highlight color on select is now fully customizable.
• Icon font size and font family is now fully customizable.
• Deprecated the ability to provide image sources for icon images.
• Removed example project in favor of expanded usage documentation.
• Fixed an issue where the default font family causes an expo-font error in newer versions of Expo.
• Fixed an issue where font scales poorly for long tab names when font size is not specified.

Installation

yarn (recommended)

yarn add enhanced-fluid-bottom-navigation-bar

npm

npm i enhanced-fluid-bottom-navigation-bar

Usage

Rendering Component

This component requires just 2 props:

• onPress: a function that should handle rendering tabs.
• values: an array of objects that contains the title and icon properties for each tab.

<TabBar
  onPress={tabIndex => { this._handlePress(tabIndex) }}
  values={[
    {
      title: 'News',      // required
      icon: 'news',       // required
      iconSet: 'Entypo',  // required
      size: 32            // required (icon will be size x size)
    }
  ]}
/>

Look up valid icon names and their corresponding icon set at the @expo/vector-icons directory.

Integration with react-navigation

1. Define a custom component that renders TabBar with the values you want. React's tab navigator will pass navigation and onTabPress props to your component when hooked up; use these to implement the onPress callback to navigate to the appropriate route:

import TabBar from 'enhanced-fluid-bottom-navigation-bar';

class FluidTabBar extends Component {
  render() {
    return (
      <TabBar
        onPress={tabIndex => {
          const route = this.props.navigation.state.routes[tabIndex];
          this.props.onTabPress({route});
        }}
        values={[
          {
            title: 'Tab 1',
            icon: 'star',     
            iconSet: 'MaterialIcons',
            size: 32          
          }, {
            title: 'Tab 2',
            icon: 'check',     
            iconSet: 'AntDesign',
            size: 32          
          }
        ]}
      />
    );
  }
}

In this case, pressing a tab in FluidTabBar navigates to the route that shares the same array index.

2. Create a tab navigator and supply our custom component to tabBarComponent.

import {createBottomTabNavigator} from 'react-navigation-tabs';

const myTabNavigator = createBottomTabNavigator(
  {  // RouteConfigs
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
  },
  {
    initialRouteName: 'Tab1',
    tabBarComponent: FluidTabBar,
  }
);

3. Create an app container from your tab navigator and use it as your top-level component.

import {createAppContainer} from 'react-navigation';

const myAppContainer = createAppContainer(myTabNavigator)

Customization

Prop | Type | Default | Description --- | --- | --- | --- tintColor | String | rgb(76, 83, 221) | Icon bubble background color and text color. selectColor | String | rgb(255, 255, 255) | Icon tint or highlight color when selected. backgroundColor | String | rgb(255, 255, 255) | Tab bar background color. autoSelect | Number | 0 | Auto-selects the tab at this index on mount. fontSize | Number | undefined | Font size for tab captions. fontFamily | String | undefined | Font family for tab captions.

NOTE: fontSize and fontFamily default to React Native's standard font size and font face.

Author

Original Author: Patryk Mierzejewski

Modifications By: Victor Li

License

Available under the MIT license. See the LICENSE file for more info.