nutv99 / rn-animated-tabbar

React native animated tabbar

React native animated tabbar

Demo

Show Live Demo

Usage

yarn add d3-shape react-native-svg

yarn add rn-animated-tabbar

cd ios && pod install

 

Define tabs data

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,
  },
];

   

Property	Required	Description
id	True	unique id for the tab
title	True	tab name which will displayed
icon	True	svg component to be displayed in inactive case
activeIcon	True	svg component to be displayed in active case

   

import {BottomTabs} from 'rn-animated-tabbar';

<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>

 

or using 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
        }}
    />
)}