A colorful animated tabbar for React Native, which creates a color trail when the tab changes.
Install using npm:
npm install --save react-native-colortail-tabbar
Install using yarn:
yarn add react-native-colortail-tabbar
// 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}}
/>
);
}
See example/App.tsx
for a working demo with react-navigation
.
This is in the early development phase. As such:
- The code may be refactored drastically
- Interfaces may change in a backwards-incompatible ways
- Documentation and testing may be lacking
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
I got inspired by this dribbble post.