React Native custom bottom menu
npm install rn-bottom-menu 
A fast and intuitive bottom menu for React Native, designed for seamless navigation with customizable buttons and smooth animations. Perfect for creating engaging, responsive UI elements with minimal effort! 🔥
---
- Smooth interactions & animations.
- Supports dark/light Mode. 🌚 🌝
- Compatible with Cli.
- Written in TypeScript.
``cmd`
yarn add rn-bottom-menu
or
`cmd`
npm i rn-bottom-menu
#### Dependencies
This library needs these dependencies to be installed in your project before you can use it:
`bash`
yarn add react-native-reanimated react-native-gesture-handler @react-navigation/bottom-tabs @react-navigation/native d3-shape
React Native Gesture Handler needs extra steps to finalize its installation, please follow their installation instructions.
React Native Reanimated needs extra steps to finalize its installation, please follow their installation instructions.
Please check attached sample code to integrate rn-bottom-menu
`tsx
import { BottomNavigation } from 'rn-bottom-menu';
tabBarActiveTintColor: '#3030ae',
tabBarInactiveTintColor: '#010101',
tabBarActiveBackgroundColor: '#fff',
}}
tabBar={props => (
isRtl={false}
focusedButtonStyle={{
shadowOffset: { width: 0, height: 7 },
shadowColor: '#fff',
shadowOpacity: 0.41,
shadowRadius: 9.11,
elevation: 10,
}}
bottomBarContainerStyle={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
}}
springConfig={{
stiffness: 1500,
damping: 85,
mass: 4,
}}
{...props}
/>
)}>
options={{
tabBarIcon: ({ focused }) => (
//PUT YOUR BOTTOM MENU ICONS HERE
//
// icon={SVGIcons.ICON2}
// {...scaled(23)}
///>
),
tabBarLabel: 'Studio',
}}
component={<>>}
/>
options={{
tabBarIcon: ({ focused }) => (
//PUT YOUR BOTTOM MENU ICONS HERE
),
tabBarLabel: 'Verified',
}}
component={<>>}
/>
options={{
tabBarIcon: ({ focused }) => (
//PUT YOUR BOTTOM MENU ICONS HERE
),
tabBarLabel: 'OnlyFan',
}}
component={<>>}
/>
options={{
tabBarIcon: ({ focused }) => (
//PUT YOUR BOTTOM MENU ICONS HERE
),
tabBarLabel: 'Flow',
}}
component={<>>}
/>
options={{
tabBarIcon: ({ focused }) => (
//PUT YOUR BOTTOM MENU ICONS HERE
),
tabBarLabel: 'Shortcut',
}}
component={<>>}
/>
``
- Hardik Patel
- For any customizations or changes, feel free to reach out to us at [hardik.patel.081990@gmail.com]. I'll be happy to assist you!
#### Show Your Support
Please give a star if you like this project! 🤩