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 and title.

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

Tab object structure:

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

Questions or suggestions?

Feel free to open an issue