React Native Awesome Tabbar

The awesome tabbar made with React Native.

Add it to your project

1. Run npm install react-native-awesome-tabbar --save
2. import TabBar from "react-native-awesome-tabbar";

Basic Usage

import TabBar from "react-native-awesome-tabbar";
...
  render() {
      return (
        <TabBar onChangeTab={(childen, index) => {}} backgroundColor="">
          <TabBar.Item title="Home" icon={require("./home.png")} activeColor="#5b37b7">
            <View>{/* Page Content */}</View>
          </TabBar.Item>
          <TabBar.Item title="Search" icon={require("./search.png")} activeColor="#e6a919">
            <View>{/* Page Content */}</View>
          </TabBar.Item>
          <TabBar.Item title="Profile" icon={require("./profile.png")} activeColor="#1194aa">
            <View>{/* Page Content */}</View>
          </TabBar.Item>
          <TabBar.Item
            title="Notification"
            icon={require("./notification.png")}
            activeColor="#c9379d"
            count={{ number: 999 }}
          >
            <View>{/* Page Content */}</View>
          </TabBar.Item>
        </TabBar>
      );
    }

Props

| prop | value | required/optional | description | | --------------- | ------------ | ----------------- | ---------------------------- | | title | string | required | title of item | | icon | image source | required | icon of item | | activeColor | string | optional | color when item is focus | | onChangeTab | function | optional | callback when switching tabs | | backgroundColor | string | optional | background color of tab | | count | object | optional | for badge of icon |

LICENSE!

react-native-awesome-tabbar is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] and do let us know if you have any questions or suggestion regarding our work.