React native animated bottom tab

Getting Started

Installation

using npm

npm i react-native-bottom-tab react-native-svg

or with yarn

yarn add react-native-bottom-tab react-native-svg

Usage

It provides a animated bottom tab component as shown in image and can be best use with createBottomTabNavigator from react-navigation.

Example

import React from "react";
import { SafeAreaView, Text } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Images from "./Images"; // your local images
import TabBar, { EventRegister } from "react-native-bottom-tab";

const tabs = [
  {
    name: "Home",
    icon: Images.home,
  },
  {
    name: "Profile",
    icon: Images.profile,
  },
  {
    name: "Settings",
    icon: Images.settings,
  },
  {
    name: "Todo",
    icon: Images.todo,
  },
  {
    name: "Lists",
    icon: {
      uri: `Network image url`,
    },
  },
];

const Home = () => {
  return (
    <SafeAreaView>
      <Text>{`Home`}</Text>
    </SafeAreaView>
  );
};

const Profile = ({ navigation }) => {
  return (
    <SafeAreaView>
      <Text
        onPress={() => {
          navigation.navigate("Home");
          EventRegister.emit("setBottomBarIndex", 1);
        }}
      >{`Home`}</Text>
      <Text
        onPress={() => {
          navigation.navigate("Settings");
          EventRegister.emit("setBottomBarIndex", 3);
        }}
      >{`Settings`}</Text>
      <Text
        onPress={() => {
          navigation.navigate("Todo");
          EventRegister.emit("setBottomBarIndex", 4);
        }}
      >{`Todo`}</Text>
      <Text
        onPress={() => {
          navigation.navigate("Lists");
          EventRegister.emit("setBottomBarIndex", 5);
        }}
      >{`Lists`}</Text>
    </SafeAreaView>
  );
};

const Settings = () => {
  return (
    <SafeAreaView>
      <Text>{`Settings`}</Text>
    </SafeAreaView>
  );
};

const Todo = ({ navigation }) => {
  return (
    <SafeAreaView>
      <Text>{`Todo`}</Text>
    </SafeAreaView>
  );
};

const Lists = () => {
  return (
    <SafeAreaView>
      <Text>{`Lists`}</Text>
    </SafeAreaView>
  );
};

const Tab = createBottomTabNavigator();

const TabBarDemo = ({ navigation }) => {
  const navigateTo = (routeName = "Profile") => {};

  return (
    <Tab.Navigator
      tabBar={(props) => (
        <TabBar
          tabBackgroundColor="#000000"
          iconTintColor="#fff"
          activeIconTintColor="#fafafa"
          activeBackgroundColor="#3d0b0b"
          tabs={tabs}
          {...props}
        />
      )}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
      <Tab.Screen name="Todo" component={Todo} />
      <Tab.Screen name="Lists" component={Lists} />
    </Tab.Navigator>
  );
};

export default TabBarDemo;

Available props

| Prop | Description | Default | | --------------------- | -------------------------------- | ----------- | | tabs | Tabs to render | defaultTabs | | tabBackgroundColor | background color of tab bar | #000 | | iconTintColor | Tint color of icon | #fff | | activeIconTintColor | Tint color of active icon | #fafafa | | activeBackgroundColor | Backgropund color of active icon | #3d0b0b |