rn-animated-tabs

A react native animated tab bar

Installation

npm i rn-animated-tabs -S

Demo

Make sure to check out the full working demo for more usage. It shows how to customize and align the tabbar in different positions.

Running the Demo

1. cd example
2. npm i && react-native run-[android|ios]

Examples

You can check out the docs folder for more gifs/screenshots

Code Example

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import RNAnimatedTabs from 'rn-animated-tabs';
const DATA = ['Top Tab 1 Content', 'Extra Stuff for Top Tab 2', 'More stuff for Top Tab 3'];
 
export default class TabTop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTab: 0
    }
  }
 
  handleTabChange = (value) => this.setState({ currentTab: value });
 
  render() {
    return (
      <View style={styles.container}>
        <RNAnimatedTabs
          tabTitles={['Top Tab 1', 'Top Tab 2', 'Top Tab 3']}
          onChangeTab={this.handleTabChange} />
         <View style={[styles.container, styles.center]}>
           <Text>
             {DATA[this.state.currentTab]}
           </Text>
         </View>
     </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});
 

API

Name	Type	Default	Required	Description
tabTitles	Array	None	✓	The text
onChangeTab	Function	None	✓	Callback function that gets triggered when the tab button onPress is fired. It's called with the index as an arg
initialActiveTabIndex	Number	0		Determines what tab gets marked active on mount
top	Boolean	false		Determines whether the active tab indicator should be rendered on top or below the component. Useful in order to position the tabbar at the top or bottom of a view.
height	Number	60		The height of the tab container
currentTab	Number	null		Useful if you want a controlled component where you determine what tab is pressed manually. See demo for example use case
containerStyle	Object	{}		Allow to override the style of the tab view container
tabButtonStyle	Object	{}		Allow to override the style of each button in the tab view
tabTextStyle	Object	{}		If renderTabContent is not specified, then allow to override the default content view
renderTabContent	Function	None		Overrides the default behaviour of displaying each title. Use if you want more fine-grain control over customizing the tabs. Get's called with the title and index as args. See demo for more details
activeTabOpacity	Number	0.8		The active opacity of the tab button TouchableOpacity
activeTabIndicatorHeight	Number	3		The height of the animated indicator for each active tab
activeTabIndicatorColor	String	#FE5F55		The color of the animated indicator for each active tab

Contributions

Contributions are welcome. I'll be happy to merge any PR's.