1.0.2 • Published 1 year ago

rn-shiny-tab-bar v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

rn-shiny-tab-bar

Custom animated shiny-tab-bar for react-native.

preview

💾 Installation

yarn add rn-shiny-tab-bar

or

npm install rn-shiny-tab-bar

⚒️ Usage

<Tab.Navigator
  tabBar={(props) => {
    return <ShinyTabBar {...props} />;
  }}
>
  <Tab.Screen
    name="Dashboard"
    component={TestScreen}
    options={{
      tabBarIcon: <SimpleLineIcons name="grid" size={20}></SimpleLineIcons>,
      tabBarBackground: "rgb(2 179 189)",
    }}
  />
  <Tab.Screen
    name="Home"
    component={TestScreen}
    options={{
      tabBarIcon: <FontAwesome name="home" size={20}></FontAwesome>,
      tabBarBackground: "rgb(58 107 229)",
    }}
  />
  <Tab.Screen
    name="Profile"
    component={TestScreen}
    options={{
      tabBarIcon: <Icon name="user" size={20}></Icon>,
      tabBarBackground: "rgb(255 59 45)",
    }}
  />
</Tab.Navigator>

🔧 Props

PropTypeDescription
tabBarStyleStylePropStyling the whole Tab Bar
labelsStyleStylePropStyling all labels
iconsStyleStylePropStyling all icons
currentTabLabelStyleStylePropStyling only the current tab label
currentTabIconStyleStylePropStyling only the current tab icon
currentTabDashStyleStylePropStyling dash component above the current tab

📄 Credits

Big thanks to @AetherAurelia for the design : https://twitter.com/AetherAurelia/status/1638858062596374528?s=20