An animated bottom tab bar for React Native. Depends on d3-shape and react-native-svg.
How to use it:
1. Import the animated tabbar component.
import {BottomTabs} from 'rn-animated-tabbar';
2. Create a simple bottom tab bar.
<View style={{position: 'absolute', bottom: 0, right: 0, left: 0, backgroundColor: '#513070', paddingBottom: 16}}> <BottomTabs tabsData={BottomTabsData} tabBarBackground="#513070" activeTabBackground="#FFFFFF" textColor="#FFFFFF" navigationHandler={(screen: string) => { // call your navigation method }} /> </View>
3. It also works with @react-navigation.
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {BottomTabs} from 'rn-animated-tabbar';
const TabsNavigator = createBottomTabNavigator(); <TabsNavigator.Navigator tabBar={() => ( <BottomTabs tabsData={BottomTabsData} tabBarBackground="#513070" textColor="#FFFFFF" activeTabBackground="#FFFFFF" navigationHandler={(screen: string) => { // call your navigation method }} /> )}
4. The tab data should look as follows:
const BottomTabsData = [ { id: 'currency-tab', title: 'Currency', icon: Currency, activeIcon: CurrencyLG, }, { id: 'converter-tab', title: 'Converter', icon: Converter, activeIcon: ConverterLG, }, { id: 'gold-tab', title: 'Gold', icon: Gold, activeIcon: GoldLg, }, { id: 'settings-tab', title: 'Settings', icon: Settings, activeIcon: SettingsLG, }, ];
Preview:
Download Details:
Author:
Live Demo: View The Demo
Download Link: Download The Source Code
License: