rn-wave-bottom-bar

Updated rtl/ltr props from https://github.com/Jm-Zion/rn-wave-bottom-bar

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

💾 Installation

Make sure you installed react-native-safe-area-context before installing the library : https

yarn add rn-wave-bottom-bar

or

npm install rn-wave-bottom-bar --save

📋 Requirements

• React-Navigation v6 installed : https://reactnavigation.org/

✨ What's new in 2.0.1

• New tab bar button shape : square
• Now support tabBarLabel

⚒️ Usage

<Tab.Navigator
  screenOptions={{
    tabBarActiveTintColor: '#5F0B65',
    tabBarActiveBackgroundColor: '#5F0B65',
    tabBarInactiveBackgroundColor: 'red',
  }}
  tabBar={(props) => (
    <BottomFabBar
      mode={'square' | 'default'}
      // Add Shadow for active tab bar button
      focusedButtonStyle={{
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 7,
        },
        shadowOpacity: 0.41,
        shadowRadius: 9.11,
        elevation: 14,
      }}
      // - You can add the style below to show screen content under the tab-bar
      // - It will makes the "transparent tab bar" effect.
      bottomBarContainerStyle={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
      }}
      {...props}
    />
  )}
>
  <Tab.Screen
    options={{
      tabBarIcon: tabBarIcon('aliwangwang-o1'),
    }}
    name="Home"
    component={generateScreen('Home')}
  />
  <Tab.Screen
    name="Meh"
    options={{ tabBarIcon: tabBarIcon('meh') }}
    component={generateScreen('Meh')}
  />
  <Tab.Screen
    options={{
      tabBarIcon: tabBarIcon('rocket1'),
      tabBarActiveBackgroundColor: '#45014A',
      tabBarActiveTintColor: 'purple',
    }}
    name="Settings"
    component={SettingsScreen}
  />
  <Tab.Screen
    options={{ tabBarIcon: tabBarIcon('Trophy') }}
    name="Trophy"
    component={generateScreen('Trophy')}
  />
  <Tab.Screen
    options={{ tabBarIcon: tabBarIcon('wallet') }}
    name="Wallet"
    component={generateScreen('Wallet')}
  />
</Tab.Navigator>

🔧 Props

Prop	Type	Description
springConfig	Animated.SpringConfig	Spring config for the animation

⚒️ Usage with react-navigation v5

Install the version 1.0.3 :

yarn add rn-wave-bottom-bar@1.0.3

const Tab = createBottomTabNavigator();

const tabBarIcon =
  (name: string) =>
  ({
    focused,
    color,
    size,
  }: {
    focused: boolean;
    color: string; // Defines fab icon color
    size: number;
  }) =>
    <Icon name={name} size={28} color={focused ? 'white' : 'white'} />;

<NavigationContainer>
	<Tab.Navigator
		tabBarOptions={{
		activeTintColor: 'purple',
		}}
		tabBar={(props) => (
			<BottomFabBar
				color="purple"
				{...props}
				isRtl={false}
			/>
		)}>
		<Tab.Screen
			options={{tabBarIcon: tabBarIcon('aliwangwang-o1')}}
			name="Home"
			component={generateScreen('Home')}
		/>
		<Tab.Screen
			name="Meh"
			options={{tabBarIcon: tabBarIcon('meh')}}
			component={generateScreen('Meh')}
		/>
	</Tab.Navigator>
</NavigationContainer>;

Migration

TabBar:

tabBarOptions.activeTintColor -> screenOptions.tabBarActiveBackgroundColor

BottomFabBar :

color -> focusedButtonStyle

📄 Credits

Thanks to Jm-Zion for this original component : https://github.com/Jm-Zion

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.

✅ Support i18n (rtl/ltr direction).