rn-wave-bottom-bar-rtl-support

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

yarn add rn-wave-bottom-bar

or

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

📋 Requirements

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

⚒️ Usage

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>;

🔧 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 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).