React Native Animated Tab Bar

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

Official Website: https://reactscript.com/animated-tabbar/ 

#react-native #react