react-native-bottom-tab-designs

Custom Bottom Tab Designs

Installation

npm install react-native-bottom-tab-designs

Usage

import BottomTabs from 'react-native-bottom-tab-designs';

// ...

const [activeTab, setActiveTab] = useState(0);
const tabs = [
  {
    title: 'Home',
    icon: 'https://cdn-icons-png.flaticon.com/128/25/25694.png',
  },
  {
    title: 'Chat',
    icon: 'https://cdn-icons-png.flaticon.com/128/2769/2769104.png',
  },

  {
    title: 'Profile',
    icon: 'https://cdn-icons-png.flaticon.com/128/3033/3033143.png',
  },
  {
    title: 'Notification',
    icon: 'https://cdn-icons-png.flaticon.com/128/3541/3541852.png',
  },
];

<BottomTabs
  design="AnimatedTab" // design: 'simpleTextTab' | 'simpleTextwithIcon' | 'RectangleTab' | 'ShowActiveTabTitle' | 'HorizontalActiveTab' | 'CircularTab' | 'AnimatedTab';
  tabs={tabs}
  activeTab={activeTab}
  onTabPress={setActiveTab}
containerStyle={{}}
 tabStyle={{}}
  activeTabTextStyle={{}}
  inactiveTabTextStyle={{}}
  activeIconStyle={{
    tintColor: Color.white,
    // transform: [{ rotate: '45deg' }],
  }}
  inActiveIconStyle={{}}
/>;

Other Props for styling

 tabs={tabs}
  activeTab={activeTab}
  onTabPress={setActiveTab}
  containerStyle={{}}
  tabStyle={{}}
  activeTabTextStyle={{}}
  inactiveTabTextStyle={{}}
      activeIconStyle={{
          // tintColor: Color.white,
        }}
  inActiveIconStyle={{}}

A brief description of the package.

<BottomTabs design="CircularTab" />

<BottomTabs
  design="RectangleTab"
  activeIconStyle={{
    tintColor: Color.white,
    transform: [{ rotate: '45deg' }],
  }}
/>

<BottomTabs design="simpleTextTab" />

<BottomTabs design="AnimatedTab" />

<BottomTabs design="HorizontalActiveTab" />

<BottomTabs design="ShowActiveTabTitle" />

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library