react-native-tab-bar-footer

react-native-tab-bar-footer

Navigation TabBar footer component for IOS and Android with slide animation which contains tab icon (normal and active) and title. You can use custom hat React Element (component above the active tab), if you use custom hat please provide also hatWidth and hatHeight.

In this lib I'm using Ripple component.

Installation

yarn add react-native-tab-bar-footer

Usage

import TabBar from 'react-native-tab-bar-footer'
...
  const tabs = [
    {
      icon: star,
      activeIcon: starActive,
      title: 'Favorites'
    },
    {
      icon: play,
      activeIcon: playActive,
      title: 'Play'
    },
    {
      icon: user,
      activeIcon: userActive,
      title: 'Profile'
      
    },
  ]
  render() {
    return <TabBar onTabChange={(index) => alert(index)} tabs={tabs} />
  }

Props

Prop	Default	Type	Description
tabs	[]	Array<Tab>	Tab objects
initialIndex	0	number	Initial active tab
onTabChange	undefined	func	onClick tab
slideSpeed	25	number	tabBar animation speed
slideBounciness	10	number	tabBar bounciness
tabSize	30	number	tab size
barColor	'white'	color	tabBar color
height	60	number	tabBar height
titleStyle	-	style	title custom style
iconStyle	-	style	icon custom style
animationDuration	200	number	animation duration
rippleProps	rippleCentered	object	Ripple component props
hat	<View/>	React.Element<*>	Custom active hat component
hatWidth	78	number	Active hat component width
hatHeight	78	number	Active hat component height

Tab object structure:

type Tab = { 
  icon: string|number, 
  activeIcon: string|number, 
  title: string
}

Questions or suggestions?

Feel free to open an issue