react-native-animating-bottom-tab-bar v1.0.6-4

Animating Bottom Bar

This library is designed to be fully compatible with popular react-navigation library and can be attached to tabBarComponent prop provided by BottomBarNavigation This library uses SVG and Lottie library to render beautiful animation and support all the customization options you may require to best fit it for your use-case.

Installation

Current Version: 1.0.6

This library will follow major.minor.patch-(navigation-version) synax to support different version of react navigation.

For

React navigation 3 :- 1.0.6-3

React navigation 4 :- 1.0.6-4

React navigation 5 :- To Be Implemented

npm i react-native-animating-bottom-tab-bar@version

Apart from it you also need to install Svg and Lottie library

npm i react-native-svg
npm i lottie-react-native
npm i lottie-ios@3.1.3

Note: Right now I have tested this library with react-navigation@3.x and planning to release 4.x and 5.x compatible in a month or so.

How to use it

Step 1: Set up basic navigation bar with react-navigation

const TabBar = createBottomTabNavigator({
  [RouteName.Home]: Home,
  [RouteName.Chat]: Chat,
  [RouteName.Setting]: Setting,
  [RouteName.Profile]: Profile,
});

const AppContainer = createAppContainer(TabBar);

Step 2: Import getAnimatingBottomBar, AnimationType from react-native-animating-bottom-tab-bar

import {getAnimatingBottomBar, AnimationType} from 'react-native-animating-bottom-tab-bar';

getAnimatingBottomBar function create a TabBar which you can directly passed to createAppContainer(). It accepts an object. Various supported property of the object are

• Animation Type (type)
• NavigationScreens (navigationScreens)
• NavigationParameter (navigationParameter)
• Object (configData) (Optional)

const BottomBarStack = getAnimatingBottomBar({
  type: AnimationType.ExpandingLabel,
  navigationScreens: NavigationScreens,
  navigationParameter: NavigationParameter,
  configData: {
    bottomBarConfig,
    extraTabs,
  },
});

Step 3: Pass result of getAnimatingBottomBar to createAppContainer

const AppContainer = createAppContainer(BottomBarStack);

getAnimatingBottomBar params

NavigationScreens

This parameter is an object in which we specify our Component(screen) correspoding to a route or simply first argument we passed in createBottomTabNavigator while setting up our basic navigation without any navigation options.

const NavigationScreens = {
  [RouteName.Home]: Home,
  [RouteName.Chat]: Chat,
  [RouteName.Setting]: Setting,
  [RouteName.Profile]: Profile,
};

NavigationParameter

This argument is an array to specify argument to be used by individual tab. For example, in the NavigationScreens, we have 4 routes defined so we will also create an array of 4 object for NavigationParameter -- 1 for each tab in the same order.

const NavigationParameter = [
  {
    label: RouteName.Home,
    routeName: RouteName.Home,
    icons: TabBarIcons.Home,
  },

  {
    label: RouteName.Chat,
    routeName: RouteName.Chat,
    icons: TabBarIcons.Conversation,
  },

  {
    label: RouteName.Setting,
    routeName: RouteName.Setting,
    icons: TabBarIcons.HealthCard,
  },

  {
    label: RouteName.Profile,
    routeName: RouteName.Profile,
    icons: TabBarIcons.Timeline,
  },
];

Object

This argument is used to pass any extra configuration data like bottom bar background color or height of bottom bar. It support one basic property bottomBarConfig. bottomBarConfig is used to customize bottom bar. Various property available are :-

const bottomBarConfig = {
  backgroundColor: 'pink',
  height: 100,
};


...

const BottomBarStack = getAnimatingBottomBar({
  type: AnimationType.ExpandingLabel,
  navigationScreens: NavigationScreens,
  navigationParameter: NavigationParameter,
  configData: {
    bottomBarConfig,
  },
});

Various Animation Type

• SvgBottomBar
• ExpandingLabel

1. SvgBottomBar

1. Pass AnimatonType.SvgBottomBar in type property of the argument of getAnimatingBottomBar

Various navigation property supported are

Object

It only accepts one property configData. Various property of configData available are :-

2. ExpandingLabel

1. Pass AnimatonType.ExpandingLabel in type property of the argument of getAnimatingBottomBar

Various navigation property supported are

Object

It only accepts one property configData. Various property of configData available are :-