react-native-animated-tabbar v0.0.3

#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

TabNavigator Animation props

TabNavigator.Item props

TabNavigator.Item Animation props