React Native MultiBar

This module provide functionality to implement extended actions through adding custom tab bar with advanced button.

Preview Collapsed	Preview Expanded

Example

There is an example how to use the react-native-multibar Tabber Expo or Tabber RN

Install

npm i react-native-multibar

or

yarn add react-native-multibar

Usage

constTabsNavigator=createBottomTabNavigator({[Routes.TabsBookmarks]: {screen: Bookmarks,navigationOptions: ()=>({tabBarIcon: ({tintColor})=>(<Iconname="bookmark"color={tintColor}size={24}/>)})},[Routes.TabsLikes]: {screen: Likes,navigationOptions: ()=>({tabBarIcon: ({tintColor})=>(<Iconname="heart"color={tintColor}size={24}/>)})},MultiBar: {screen: ()=>null,navigationOptions: ({navigation})=>({tabBarIcon: ()=>(<MultiBarTogglenavigation={navigation}actionSize={30}routes={[{routeName: Routes.OtherScreen,color: '#FF8360',icon: (<Iconname="rocket"color="#333333"size={15}/>)},{routeName: Routes.OtherScreen,color: '#E8E288',icon: (<Iconname="dashboard"color="#333333"size={15}/>)},{routeName: Routes.OtherScreen,color: '#7DCE82',icon: (<Iconname="gears"color="#333333"size={15}/>)},]}icon={(<Iconname="plus"color="#FFFFFF"size={24}/>)}/>)}),params: {navigationDisabled: true}},[Routes.TabsPrivate]: {screen: Private,navigationOptions: ()=>({tabBarIcon: ({tintColor})=>(<Iconname="lock"color={tintColor}size={24}/>)})},[Routes.TabsProfile]: {screen: Profile,navigationOptions: ()=>({tabBarIcon: ({tintColor})=>(<Iconname="user"color={tintColor}size={24}/>)})}},{tabBarComponent: MultiBar,tabBarOptions: {showLabel: false,activeTintColor: '#F8F8F8',inactiveTintColor: '#586589',style: {backgroundColor: '#171F33'},tabStyle: {}}});

License

ISC