React Native Curved Tab Bar

A beautiful, customizable curved tab bar for React Native and Expo applications with an optional animated Floating Action Button (FAB).

Features

• ✨ Beautiful curved tab bar design
• 🎯 Fully customizable (colors, dimensions, animations)
• 💫 Smooth animations powered by Reanimated 2+
• 📱 Compatible with React Navigation's bottom tabs
• 🔥 Optional animated floating action button
• 💪 Written in TypeScript with full type definitions
• 📦 Expo and React Native Web compatible
• 🔧 Simple and intuitive API

Installation

1npm install react-native-curved-tab-bar
2# or
3yarn add react-native-curved-tab-bar

Dependencies

This library depends on the following packages:

1# Required peer dependencies
2npm install react-native-reanimated react-native-svg react-native-safe-area-context
3
4# Optional (for haptic feedback on native platforms)
5npm install expo-haptics

Basic Usage

1import React from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
4import { Home, User, Bell, Settings, ArrowLeftRight } from 'lucide-react-native';
5import CurvedTabBar from 'react-native-curved-tab-bar';
6
7// Your screens
8import HomeScreen from './screens/HomeScreen';
9import ProfileScreen from './screens/ProfileScreen';
10import NotificationsScreen from './screens/NotificationsScreen';
11import SettingsScreen from './screens/SettingsScreen';
12
13const Tab = createBottomTabNavigator();
14
15export default function App() {
16  return (
17    <NavigationContainer>
18      <Tab.Navigator
19        tabBar={(props) => (
20          <CurvedTabBar 
21            {...props} 
22            fabIcon={<ArrowLeftRight color="#fff" size={20} />}
23            onFabPress={() => console.log('FAB pressed!')}
24          />
25        )}
26      >
27        <Tab.Screen 
28          name="Home" 
29          component={HomeScreen} 
30          options={{
31            tabBarIcon: ({ color }) => <Home size={24} color={color} />,
32          }}
33        />
34        <Tab.Screen 
35          name="Profile" 
36          component={ProfileScreen}
37          options={{
38            tabBarIcon: ({ color }) => <User size={24} color={color} />,
39          }} 
40        />
41        <Tab.Screen 
42          name="Notifications" 
43          component={NotificationsScreen}
44          options={{
45            tabBarIcon: ({ color }) => <Bell size={24} color={color} />,
46          }} 
47        />
48        <Tab.Screen 
49          name="Settings" 
50          component={SettingsScreen}
51          options={{
52            tabBarIcon: ({ color }) => <Settings size={24} color={color} />,
53          }} 
54        />
55      </Tab.Navigator>
56    </NavigationContainer>
57  );
58}

Advanced Usage

Customizing the Tab Bar

1<CurvedTabBar
2  {...props}
3  backgroundColor="#F8F9FA"
4  strokeColor="#E9ECEF"
5  strokeWidth={1}
6  tabBarHeight={70}
7  fabSize={56}
8  fabColor="#FF6B6B"
9  fabIcon={<Plus color="#fff" size={24} />}
10  onFabPress={() => console.log('FAB pressed!')}
11  curveHeight={16}
12  fabTabIndex={2}
13  animateOnMount={true}
14  showFAB={true}
15/>

Without Floating Action Button

1<CurvedTabBar
2  {...props}
3  showFAB={false}
4  backgroundColor="#F8F9FA"
5  curveHeight={10} // Lower curve height for a subtle effect
6/>

Custom Styling

1<CurvedTabBar
2  {...props}
3  style={{ 
4    borderTopWidth: 1, 
5    borderTopColor: '#E0E0E0',
6    shadowColor: '#000',
7    shadowOffset: { width: 0, height: -2 },
8    shadowOpacity: 0.1,
9    shadowRadius: 3,
10    elevation: 10,
11  }}
12  fabStyle={{
13    shadowColor: '#000',
14    shadowOffset: { width: 0, height: 4 },
15    shadowOpacity: 0.3,
16    shadowRadius: 5,
17    elevation: 12,
18  }}
19/>

API Reference

CurvedTabBar Props

Prop	Type	Default	Description
backgroundColor	string	'#FFFFFF'	Custom color for the tab bar background
strokeColor	string	'rgba(0,0,0,0.05)'	Custom color for the stroke outline of the tab bar
strokeWidth	number	0.5	Custom stroke width for the tab bar outline
tabBarHeight	number	80	Height of the tab bar in pixels
showFAB	boolean	true	Whether to show a floating action button (FAB) in the center
fabSize	number	60	Size of the floating action button
fabColor	string	'#00C09A'	Custom color for the floating action button
fabIcon	ReactNode	undefined	Icon to display in the floating action button
onFabPress	function	undefined	Function to call when the floating action button is pressed
curveHeight	number	14	Height of the curve in the tab bar (0 = flat)
debug	boolean	false	Enable debug mode to see shape control points
fabTabIndex	number	2	Index of the tab that should contain the floating action button
style	ViewStyle	undefined	Custom styling for the tab bar container
fabStyle	ViewStyle	undefined	Custom styling for the floating action button
animateOnMount	boolean	true	Whether to animate the tab bar on mount

Troubleshooting

Tab labels are cut off

Increase the tabBarHeight prop or add padding to the tab items:

1<CurvedTabBar
2  {...props}
3  tabBarHeight={90} // Increase from default 80
4/>

Animations don't work smoothly

Make sure you have properly configured react-native-reanimated in your project. See the Reanimated installation guide for more details.

FAB appears at the wrong position

Adjust the fabTabIndex prop to match your tab structure. Default is 2 (the middle position for a 5-tab layout).

1<CurvedTabBar
2  {...props}
3  fabTabIndex={1} // For a 3-tab layout, middle position would be 1
4/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT