@wezyy1/rn-animated-tab-nav v1.0.9

@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

tabInfo Properties