README

react-native-colortail-tabbar

A colorful animated tabbar for React Native, which creates a colorful color trail when the tab changes.

![Example animation][docs/example.gif]

Installation

Install using npm:

npm install --save react-native-colortail-tabbar

Install using yarn:

yarn add react-native-colortail-tabbar

Usage

// import the library
import ColorTailTabBar, { ColortailTabData } from 'react-native-colortail-tabbar';

// define the tabs giving their color and rendering function for the icon
// see full example for ImageIcon code
const tabs = [
  {
    color: '#e7645b',
    renderAnimatedTab: props => <ImageIcon {...props} icon={home} />,
  },
  {
    color: '#ffbd73',
    renderAnimatedTab: props => <ImageIcon {...props} icon={assessment} />,
  },
  {
    color: '#73adce',
    renderAnimatedTab: props => <ImageIcon {...props} icon={basket} />,
  },
  {
    color: '#e76394',
    renderAnimatedTab: props => <ImageIcon {...props} icon={star} />,
  },
  {
    color: '#73d6b5',
    renderAnimatedTab: props => <ImageIcon {...props} icon={apps} />,
  }
]

// render the component
render() {
    return (
        <ColorTailTabBar
            // defined tabs, see above
            tabs={tabs}
            // background color of the tabbar
            color='#5c4f71'
            // currently active tab index from a source of your choice
            activeTabIndex={this.state.activeTab}
            // function that is called when a tab was pressed
            onTabPress={(index) => { this.setState({activeTab: index}); }}
            // duration in ms for the tab switch animation
            duration={200}
            // values to be animated that are passed as props to the renderAnimatedTab functions
            from={{size: 22, opacity: 0.5}}
            to={{size: 30, opacity: 1.0}}
        />
    );
}

Full example

See example/App.tsx for a working demo with react-navigation.

Built With

Typescript - TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
react-spring - brings your components to life with simple spring animation primitives

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

I got inspired by this dribbble post.

Usage no npm install needed!