Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 95 Commits
.github		.github
docs		docs
example		example
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
.release-it.json		.release-it.json
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
logo.png		logo.png
package.json		package.json
preview.gif		preview.gif
release-template.hbs		release-template.hbs
tsconfig.json		tsconfig.json

Repository files navigation

Animated TabBar

A60FPS animated tab bar with a variety of cool animation presets 😎

Features

60FPS smooth animation for all presets.
Fully integrated withReact Navigation v4 & v5.
Standalone usage.
Right-to-left layout support.
Accessibility support.
Written inTypeScript.

Installation

yarn add @gorhom/animated-tabbar# ornpm install @gorhom/animated-tabbar

Also, you need to installreact-native-reanimated,react-native-gesture-handler &react-native-svg, and follow their installation instructions.

Usage

OriginallyAnimated TabBar worked only withReact 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 ) : theReact Navigation integrated tab bar.
AnimatedTabBarView: the standalone tab bar.

Standalone Component

importReact,{useState}from'react';import{View,Text,StyleSheet}from'react-native';importAnimatedTabBar,{TabsConfig,BubbleTabBarItemConfig}from'@gorhom/animated-tabbar';consttabs:TabsConfig<BubbleTabBarItemConfig>={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)',},},};conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#999',},tabBarContainer:{borderRadius:25,},});exportdefaultfunctionApp(){const[index,setIndex]=useState(0);return(<Viewstyle={styles.container}><Text>{index}</Text><AnimatedTabBarViewtabs={tabs}itemOuterSpace={{horizontal:6,vertical:12,}}itemInnerSpace={12}iconSize={20}style={styles.tabBarContainer}index={index}onIndexChange={setIndex}/></View>)}

React Navigation v5 (TypeScript)

importReactfrom'react';import{NavigationContainer}from'@react-navigation/native';import{createBottomTabNavigator}from'@react-navigation/bottom-tabs';importAnimatedTabBar,{TabsConfig,BubbleTabBarItemConfig}from'@gorhom/animated-tabbar';consttabs:TabsConfig<BubbleTabBarItemConfig>={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)',},},};constTab=createBottomTabNavigator();exportdefaultfunctionApp(){return(<NavigationContainer><Tab.NavigatortabBar={props=>(<AnimatedTabBartabs={tabs}{...props}/>)}><Tab.Screenname="Home"component={HomeScreen}/><Tab.Screenname="Profile"component={ProfileScreen}/></Tab.Navigator></NavigationContainer>)}

React Navigation v5 (JavaScript)

importReactfrom'react';import{NavigationContainer}from'@react-navigation/native';import{createBottomTabNavigator}from'@react-navigation/bottom-tabs';importAnimatedTabBarfrom'@gorhom/animated-tabbar';consttabs={Home:{// < Screen namelabelStyle:{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 namelabelStyle:{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)',},},};constTab=createBottomTabNavigator();exportdefaultfunctionApp(){return(<NavigationContainer><Tab.NavigatortabBar={props=>(<AnimatedTabBartabs={tabs}{...props}/>)}><Tab.Screenname="Home"component={HomeScreen}/><Tab.Screenname="Profile"component={ProfileScreen}/></Tab.Navigator></NavigationContainer>)}

React Navigation v4

importReactfrom'react';import{createAppContainer}from'react-navigation';import{createBottomTabNavigator}from'react-navigation-tabs';import{SafeAreaProvider}from'react-native-safe-area-context';importAnimatedTabBar,{TabsConfig,BubbleTabBarItemConfig}from'@gorhom/animated-tabbar';consttabs:TabsConfig<BubbleTabConfig>={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)',},},};constTabNavigator=createBottomTabNavigator({Home:HomeScreen,Profile:ProfileScreen,},{tabBarComponent:props=><AnimatedTabBartabs={tabs}{...props}/>,},);constAppContainer=createAppContainer(TabNavigator);exportdefault()=>(<SafeAreaProvider><AppContainer/></SafeAreaProvider>);

To configure animated icons, please have a look atAnimated 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<T>`
`style`	View style to be applied to tab bar container,`default value will be based on selected preset`.	NO	StyleProp
`duration`	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

Preset Configurations

Some presets will have its own configurations - likematerial - which they will be added the root view props.

Material Preset Example

notice here we addedanimation,inactiveOpacity &inactiveScale to the root view.

importReactfrom'react';import{NavigationContainer}from'@react-navigation/native';import{createBottomTabNavigator}from'@react-navigation/bottom-tabs';importAnimatedTabBar,{TabsConfig,MaterialTabBarItemConfig}from'@gorhom/animated-tabbar';consttabs:TabsConfig<MaterialTabBarItemConfig>={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',},},};constTab=createBottomTabNavigator();exportdefaultfunctionApp(){return(<NavigationContainer><Tab.NavigatortabBar={props=>(<AnimatedTabBarpreset='material'tabs={tabs}animation="iconWithLabelOnFocus"inactiveOpacity={0.25}inactiveScale={0.5}{...props}/>)}><Tab.Screenname="Home"component={HomeScreen}/><Tab.Screenname="Profile"component={ProfileScreen}/></Tab.Navigator></NavigationContainer>)}

Presets

OriginallyAnimated TabBar started withBubble as the only animation preset embedded. However, I felt the library structure could include many other variety of animation presets.

Migration

V1 to V2

Due to extend the library functionality, I had to rename existing interfaces as following:

BubbleTabConfig toBubbleTabBarItemConfig
BubbleTabIconProps toBubbleTabBarIconProps
FlashyTabConfig toFlashyTabBarItemConfig
FlashyTabIconProps toFlashyTabBarIconProps

Author

Mo Gorhom

Sponsor & Support

To keep this library maintained and up-to-date please considersponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter@gorhom.