react-native-animated-tabbar

Animated Tabbar

This component is just a combination of React-native-tab-navigator and React-native-animatable in order to add easily animation effects on your Tabbar.

You can choose any of the React-native-animatable animations or the youtube-like pulse animation

It works for both iOS & Android

Inspiration

Highly Inspired by React-native-tab-navigator & React-native-animatable

Install

Make sure that you are in your React Native project directory and run:

npm install react-native-animated-tabbar --save

Usage

Import TabNavigator as a JavaScript module:

import TabNavigator from 'react-native-animated-tabbar';

This is an example of how to use the component and some of the commonly used props that it supports:

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    animation="rotate"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    animation="zoomIn"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

See TabNavigatorItem's supported props for more info.

Hiding the Tab Bar

You can hide the tab bar by using styles. For example:

let tabBarHeight = 0;
<TabNavigator
  tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
  sceneStyle={{ paddingBottom: tabBarHeight }}
/>

Props

TabNavigator props

prop	default	type	description
sceneStyle	inherited	object (style)	define for rendered scene
tabBarStyle	inherited	object (style)	define style for TabBar
tabBarShadowStyle	inherited	object (style)	define shadow style for tabBar
hidesTabTouch	false	boolean	disable onPress opacity for Tab

TabNavigator Animation props

prop	default	type	description
animationDuration	500	number	transition time of animation

TabNavigator.Item props

prop	default	type	description
renderIcon	none	function	returns Item icon
renderSelectedIcon	none	function	returns selected Item icon
badgeText	none	string or number	text for Item badge
renderBadge	none	function	returns Item badge
title	none	string	Item title
titleStyle	inherited	style	styling for Item title
selectedTitleStyle	none	style	styling for selected Item title
tabStyle	inherited	style	styling for tab
selected	none	boolean	return whether the item is selected
onPress	none	function	onPress method for Item
allowFontScaling	false	boolean	allow font scaling for title

TabNavigator.Item Animation props

prop	default	type	description
animation	none	string	One of animation types from react-native-animatable OR 'youtubePulse'
pulseColor	#f4010d	string	Pulse hex color when animation is youtubePulse