reanimated-tab-navigator
Version:
A customizable animated bottom tab navigator for React Native
78 lines (60 loc) • 1.58 kB
Markdown
A customizable animated bottom tab navigator for React Native applications.
bash
npm install reanimated-tab-navigator
or
yarn add reanimated-tab-navigator
This package requires the following dependencies:
- react-native-reanimated
- react-native-gesture-handler
- react-native-safe-area-context
- react-native-screens
- react-native-tab-view
- expo-linear-gradient
javascript
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { CustomTabBar } from 'react-native-animated-tab-navigator';
const Tab = createBottomTabNavigator();
export default function Navigation() {
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
tabBar={props => <CustomTabBar {...props} />}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Home'
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profile'
}}
/>
</Tab.Navigator>
);
}
You can customize the tab bar appearance by passing props:
<CustomTabBar
activeColor="#YOUR_COLOR"
inactiveColor="#YOUR_COLOR"
gradientColors={['#COLOR1', '#COLOR2']}
/>
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| activeColor | string | '#ffffff' | Color of active tab |
| inactiveColor | string | '#ffffff' | Color of inactive tab |
| gradientColors | array | ['#4A0494', '#A445B2'] | Colors for the gradient background |
MIT