Animated TabBar
a 60fps animated tab bar to be used with React Navigation v4 & v5
created with Reanimated
๐, inspired by Aurรฉlien Salomon works on Dribbble.
Installation
yarn add @gorhom/animated-tabbar
# or
npm install @gorhom/animated-tabbar
Also, you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg
Usage
React Navigation v5
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {TabsConfigsType} from '@gorhom/animated-tabbar';
const tabs: TabsConfigsType = {
Home: {
labelStyle: {
color: '#5B37B7',
},
icon: {
component: /* ICON COMPONENT */,
activeColor: 'rgba(91,55,183,1)',
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: 'rgba(223,215,243,1)',
inactiveColor: 'rgba(223,215,243,0)',
},
},
Profile: {
labelStyle: {
color: '#1194AA',
},
icon: {
component: /* ICON COMPONENT */,
activeColor: 'rgba(17,148,170,1)',
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: 'rgba(207,235,239,1)',
inactiveColor: 'rgba(207,235,239,0)',
},
},
};
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBar={props => (
<AnimatedTabBar tabs={tabs} {...props} />
)}
>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
React Navigation v4
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import AnimatedTabBar, {TabsConfigsType} from '@gorhom/animated-tabbar';
const tabs: TabsConfigsType = {
Home: {
labelStyle: {
color: '#5B37B7',
},
icon: {
component: /* ICON COMPONENT */,
activeColor: 'rgba(91,55,183,1)',
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: 'rgba(223,215,243,1)',
inactiveColor: 'rgba(223,215,243,0)',
},
},
Profile: {
labelStyle: {
color: '#1194AA',
},
icon: {
component: /* ICON COMPONENT */,
activeColor: 'rgba(17,148,170,1)',
inactiveColor: 'rgba(0,0,0,1)',
},
background: {
activeColor: 'rgba(207,235,239,1)',
inactiveColor: 'rgba(207,235,239,0)',
},
},
};
const TabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Profile: ProfileScreen,
},
{
tabBarComponent: props => <AnimatedTabBar tabs={tabs} {...props} />,
},
);
const AppContainer = createAppContainer(TabNavigator);
export default () => (
<SafeAreaProvider>
<AppContainer />
</SafeAreaProvider>
);
Animated Icon
In order to animate the tab icon color, you will need to use the provded prop color
that will be provided to the icon.
This example below should explain it better:
import React from 'react';
import Animated from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';
const AnimatedPath = Animated.createAnimatedComponent(Path);
interface AnimatedSVGProps {
color: Animated.Node<string>;
}
const AnimatedSVG = ({ color }: AnimatedSVGProps) => {
return (
<Svg width={20} height={22} viewBox="0 0 20 22">
<AnimatedPath
d="M1 8l9-7 9 7v11a2 2 0 01-2 2H3a2 2 0 01-2-2V8z"
stroke={color}
strokeWidth={2}
fill="none"
fillRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
);
};
export default AnimatedSVG;
Props
name | required | default | description |
---|---|---|---|
duration | NO | 500 | Array of pages/slides PaperOnboardingItemType to present. |
easing | NO | Easing.out(Easing.exp) | Safe area insets usually come from react-native-safe-area-context . |
tabs | YES | A dictionary for all tabs configurations, check TabConfigsType interface. |
TabConfigsType
name | required | default | description |
---|---|---|---|
icon | YES | ||
โ component | YES | Component to be render as tab icon, it will recevie an animated node prop color . |
|
โ activeColor | YES | Color to be animated to when tab is active. | |
โ inactiveColor | YES | Color to be animated to when tab is inactive. | |
labelStyle | NO | TextStyle to override tab label style. | |
background | YES | ||
โ activeColor | YES | Color to be animated to when tab is active. | |
โ inactiveColor | YES | Color to be animated to when tab is inactive. |
To Do
- Add accessibility support.
- Add more examples.
Built With โค๏ธ
- react-navigation
- react-native-gesture-handler
- react-native-reanimated
- react-native-redash
- react-native-svg
- @react-native-community/bob
Author
License
MIT