Miss any of our Open RFC calls?Watch the recordings here! »

rn-wave-bottom-bar

1.0.2 • Public • Published

rn-wave-bottom-bar semantic-release Build Status Known Vulnerabilities

Sample

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

💾 Installation

yarn add rn-wave-bottom-bar

or

yarn install rn-wave-bottom-bar --save

📋 Requirements

⚒️ Usage

const Tab = createBottomTabNavigator();
 
const tabBarIcon = (name: string) => ({
  focused,
  color,
  size,
}{
  focused: boolean;
  colorstring// Defines fab icon color
  sizenumber;
}) => <Icon name={name} size={28} color={focused ? 'white' : 'white'} />;
 
<NavigationContainer>
  <Tab.Navigator
    tabBarOptions={{
      activeTintColor: 'purple', // Used for the FAB background Color
    }}
    tabBar={(props) => <BottomFabBar color="purple" {...props} />}
  >
    <Tab.Screen
      options={{ tabBarIcon: tabBarIcon('aliwangwang-o1') }}
      name="Home"
      component={generateScreen('Home')}
    />
    <Tab.Screen
      name="Account"
      options={{ tabBarIcon: tabBarIcon('meh') }}
      component={generateScreen('Meh')}
    />
  </Tab.Navigator>
</NavigationContainer>;

🔧 Props

Prop Type Description
color string Bottom Bar background color
springConfig Animated.SpringConfig Spring config for the animation
tabBarProps BottomTabBarProps TabBar props passed from the Tab Component

📄 Credits

Thanks to W.Candillon for the tuto : https://www.youtube.com/watch?v=6LsLgHeX500

Initial Design : https://uimovement.com/design/tab-bar-3/

Compatibility

✅ Works well with mosts Devices and tested on iPad, IPhones, Android Devices.

✅ Support device orientation.

Install

npm i rn-wave-bottom-bar

DownloadsWeekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

139 kB

Total Files

75

Last publish

Collaborators

  • avatar