@gorhom/animated-tabbar
v2.1.2TypeScript
A 60FPS animated tab bar with a variety of cool animation presets.
0/weekUpdated 3 years agoMITUnpacked: 479.6 KB
Published by Mo Gorhom
npm install @gorhom/animated-tabbarAnimated TabBar
  
A 60FPS animated tab bar with a variety of cool animation presets 😎
---
Table of Contents
1. Features
2. Installation
3. Usage
1. Animated Icons
4. Props
5. Presets
1. Bubble Preset
2. Flashy Preset
3. Material Preset
6. Migration
7. To Do
8. Credits
9. License
Features
- 60FPS smooth animation for all presets.
- Fully integrated with React Navigation v4 & v5.
- Standalone usage.
- Right-to-left layout support.
- Accessibility support.
- Written in TypeScript.
Installation
``sh`
yarn add @gorhom/animated-tabbaror
npm install @gorhom/animated-tabbar
> Also, you need to install react-native-reanimated, react-native-gesture-handler & react-native-svg, and follow their installation instructions.
Usage
Originally Animated TabBar worked only with React Navigation, but I notice that it could be use as a standalone component and be more useful for the community.
Now the library export two main components:
- AnimatedTabBar ( default ) : the React Navigation integrated tab bar.AnimatedTabBarView
- : the standalone tab bar.
Standalone Component
`tsx
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
const tabs: TabsConfig
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 styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#999',
},
tabBarContainer: {
borderRadius: 25,
},
});
export default function App() {
const [index, setIndex] = useState(0);
return (
itemOuterSpace={{
horizontal: 6,
vertical: 12,
}}
itemInnerSpace={12}
iconSize={20}
style={styles.tabBarContainer}
index={index}
onIndexChange={setIndex}
/>
)
}
`
React Navigation v5 (TypeScript)
`tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
const tabs: TabsConfig
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 (
)}
>
component={HomeScreen}
/>
component={ProfileScreen}
/>
)
}
`
React Navigation v5 (JavaScript)
`jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar from '@gorhom/animated-tabbar';
const tabs = {
Home: { // < Screen name
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: { // < Screen name
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 (
)}
>
component={HomeScreen}
/>
component={ProfileScreen}
/>
)
}
`
React Navigation v4
`tsx
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
const tabs: TabsConfig
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 =>
},
);
const AppContainer = createAppContainer(TabNavigator);
export default () => (
);
`
> To configure animated icons, please have a look at Animated Icons.
Props
| name | description | required | type | default |
| -------------------- | --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------- |
| preset | Animation preset, currently options are ['bubble', 'flashy', 'material']. | NO | PresetEnum | 'bubble' |tabs
| | Tabs configurations. A generic dictionary of selected preset tab config. | YES | TabsConfig | |style
| | View style to be applied to tab bar container, default value will be based on selected preset. | NO | StylePropduration
| | Animation duration, default value will be based on selected preset. | NO | number | |easing
| | Animation easing function, default value will be based on selected preset. | NO | EasingFunction | |itemInnerSpace
| | Tab item inner space to be added to the tab item, default value will be based on selected preset. | NO | number \| Space | |itemOuterSpace
| | Tab item outer space to be added to the tab item, default value will be based on selected preset. | NO | number \| Space | |itemContainerWidth
| | Tab item width stretch strategy, default value will be based on selected preset. | NO | 'auto' \| 'fill' | |iconSize
| | Tab item icon size, default value will be based on selected preset. | NO | number | |isRTL
| | Tab bar layout and animation direction. | NO | boolean | false |onLongPress
| | Callback on item long press, by default it is integrated with React Navigation. | NO | (index: number) => void | noop |
$3
Some presets will have its own configurations - like material - which they will be added the root view props.
notice here we added animation, inactiveOpacity & inactiveScale to the root view.
`tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import AnimatedTabBar, {TabsConfig, MaterialTabBarItemConfig} from '@gorhom/animated-tabbar';
const tabs: TabsConfig
Home: {
icon: {
component: / ICON COMPONENT /,
color: 'rgba(255,255,255,1)',
},
ripple: {
color: '#5B37B7',
},
},
Profile: {
icon: {
component: / ICON COMPONENT /,
color: 'rgba(255,255,255,1)',
},
ripple: {
color: '#1194AA',
},
},
};
const Tab = createBottomTabNavigator();
export default function App() {
return (
tabs={tabs}
animation="iconWithLabelOnFocus"
inactiveOpacity={0.25}
inactiveScale={0.5}
{...props}
/>
)}
>
component={HomeScreen}
/>
component={ProfileScreen}
/>
)
}
`
Presets
Originally Animated TabBar started with Bubble as the only animation preset embedded. However, I felt the library structure could include many other variety of animation presets.
$3
$3
$3
Migration
Due to extend the library functionality, I had to rename existing interfaces as following:
- BubbleTabConfig to BubbleTabBarItemConfig
- to BubbleTabBarIconProps
- to FlashyTabBarItemConfig
- to FlashyTabBarIconProps`
To Do
- [x] Add accessibility support.
- [ ] Add more presets (PR are welcome).
Built With ❤️
- react-native-reanimated
- react-native-gesture-handler
- react-native-redash
- react-native-svg
- @react-native-community/bob
Author
License
MIT
Liked the library? 😇
---
