@wezyy1/rn-animated-tab-nav

The tag bar component is mainly used for bottom navigation, which is convenient for users to switch between different pages quickly. And it is suggested that the number of tags should be controlled within 3-5.

Installation

Installation can be done by using the npm install command:

$ npm install @wezyy1/rn-animated-tab-nav

Demo (Default Style)

Quick Start

import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import TabNav from '@wezyy1/rn-animated-tab-nav'

export default class App extends React.Component{

  state = {
    currentPageIndex: 0,
    tabInfo:[{
      id: 1,
      label: 'Home',
      icon: 'home',
      color:'#10A8F6',
      backgroundColor:'#E9F8FF'
  },{
      id: 2,
      label: 'Dairy',
      icon: 'book',
      color:'#F65E10',
      backgroundColor:'#FFF1E9'

  },{
      id: 3,
      label: 'Search',
      icon: 'search',
      color:'#A79507',
      backgroundColor:'#FFFBDC'
  },{
      id: 4,
      label: 'Me',
      icon: 'user',
      color:'#7B14DA',
      backgroundColor:'#EBDAFA'
  }]
  }

  handlePressTab = (pageValue) => {
    this.setState({currentPageIndex: pageValue})
  }

  render(){
    const { currentPageIndex } = this.state

    let mainPage = <View><Text>Home</Text></View>
    if(currentPageIndex === 1){
      mainPage = <View><Text>Book</Text></View>
    } else if (currentPageIndex === 2){
      mainPage = <View><Text>Search</Text></View>
    } else if (currentPageIndex === 3){
      mainPage = <View><Text>Me</Text></View>
    }

    return(
      <SafeAreaView style={{flex:1}}>
        <View style={{flex:1}}>
          {mainPage}
          <TabNav handlePressTab={this.handlePressTab} tabInfo={this.state.tabInfo} currentPageIndex={this.state.currentPageIndex}/>
        </View>
      </SafeAreaView>
    )
  }
}

Try this example on Snack

Use Tab Navigation with Stack Navigation

You can use this tab Navigation with react native stack navigation as well. Documentation of React Navigation

Example:

import React from 'react';
import { View, SafeAreaView, Text } from 'react-native';
import TabNav from '@wezyy1/rn-animated-tab-nav'
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

const Home = ({navigation}) => <View><Text onPress={() => navigation.navigate('HomeDetail')}>Home</Text></View>
const HomeDetail = () => <View><Text>HomeDetail</Text></View>

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={Home}/>
      <HomeStack.Screen name="HomeDetail" component={HomeDetail}/>
    </HomeStack.Navigator>
  );
}

export default class App extends React.Component{

  state = {
    currentPageIndex: 0,
    tabInfo:[{
      id: 1,
      label: 'Home',
      icon: 'home',
      color:'#10A8F6',
      backgroundColor:'#E9F8FF'
  },{
      id: 2,
      label: 'Dairy',
      icon: 'book',
      color:'#F65E10',
      backgroundColor:'#FFF1E9'

  },{
      id: 3,
      label: 'Search',
      icon: 'search',
      color:'#A79507',
      backgroundColor:'#FFFBDC'
  },{
      id: 4,
      label: 'Me',
      icon: 'user',
      color:'#7B14DA',
      backgroundColor:'#EBDAFA'
  }]
  }

  handlePressTab = (pageValue) => {
    this.setState({currentPageIndex: pageValue})
  }

  render(){
    const { currentPageIndex } = this.state

    let mainPage = <HomeStackScreen/>
    if(currentPageIndex === 1){
      mainPage = <View><Text>Book</Text></View>
    } else if (currentPageIndex === 2){
      mainPage = <View><Text>Search</Text></View>
    } else if (currentPageIndex === 3){
      mainPage = <View><Text>Me</Text></View>
    }

    return(
      <SafeAreaView style={{flex:1}}>
        <View style={{flex:1}}>
          <NavigationContainer>
            {mainPage}
          </NavigationContainer>
          <TabNav handlePressTab={this.handlePressTab} tabInfo={this.state.tabInfo} currentPageIndex={this.state.currentPageIndex}/>
        </View>
      </SafeAreaView>
    )
  }
}

Try this example on Snack

API

Props

|Property|Description|Type|Required| |-|:-:|:-:|-:| |tabInfo|This is an array of the information of the tab navigation. (See more detail in the next table.)|Array|ture| |tabStyle|The style of the tab bar contener.|Style Object|false| |itemStyle|The style of the tab item.|Style Object|false| |currentPageIndex|This is the index of the active item.|Number|true| |handlePressTab|Callback Function when press tab item. This function will get the index of the pressed tab item.|Function|true|

tabInfo Properties

|Property|Description|Type|Required| |-|:-:|:-:|-:| |label|The label displayed in the tab item.|String|true| |icon|The name of the icon you want to use. Feather Icon is suported. You can find the icon and name here.|String|true| |color|The color of the icon and label when the item is active. |Color String|true| |backgroundColor|The color of background when the item is active. |Color String|true|