react-native-tab-bar-footer's Introduction

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

react-native-tab-bar-footer's People

Contributors

Stargazers

Watchers

react-native-tab-bar-footer's Issues

Doesn't work, Can't use Icons

Doesn't work, can't use icons

Warning: componentWillReceiveProps

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Recommend Projects