@eavfw/react-native-curved-tab-bar

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

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

Dependencies

This library depends on the following packages:

# Required peer dependencies
npm install react-native-reanimated react-native-svg react-native-safe-area-context

# Optional (for haptic feedback on native platforms)
npm install expo-haptics

Basic Usage

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Home, User, Bell, Settings, ArrowLeftRight } from 'lucide-react-native';
import CurvedTabBar from 'react-native-curved-tab-bar';

// Your screens
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import NotificationsScreen from './screens/NotificationsScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBar={(props) => (
          <CurvedTabBar 
            {...props} 
            fabIcon={<ArrowLeftRight color="#fff" size={20} />}
            onFabPress={() => console.log('FAB pressed!')}
          />
        )}
      >
        <Tab.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{
            tabBarIcon: ({ color }) => <Home size={24} color={color} />,
          }}
        />
        <Tab.Screen 
          name="Profile" 
          component={ProfileScreen}
          options={{
            tabBarIcon: ({ color }) => <User size={24} color={color} />,
          }} 
        />
        <Tab.Screen 
          name="Notifications" 
          component={NotificationsScreen}
          options={{
            tabBarIcon: ({ color }) => <Bell size={24} color={color} />,
          }} 
        />
        <Tab.Screen 
          name="Settings" 
          component={SettingsScreen}
          options={{
            tabBarIcon: ({ color }) => <Settings size={24} color={color} />,
          }} 
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Advanced Usage

Customizing the Tab Bar

<CurvedTabBar
  {...props}
  backgroundColor="#F8F9FA"
  strokeColor="#E9ECEF"
  strokeWidth={1}
  tabBarHeight={70}
  fabSize={56}
  fabColor="#FF6B6B"
  fabIcon={<Plus color="#fff" size={24} />}
  onFabPress={() => console.log('FAB pressed!')}
  curveHeight={16}
  fabTabIndex={2}
  animateOnMount={true}
  showFAB={true}
/>

Without Floating Action Button

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

Custom Styling

<CurvedTabBar
  {...props}
  style={{ 
    borderTopWidth: 1, 
    borderTopColor: '#E0E0E0',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 10,
  }}
  fabStyle={{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 5,
    elevation: 12,
  }}
/>

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:

<CurvedTabBar
  {...props}
  tabBarHeight={90} // Increase from default 80
/>

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

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

Contributing

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

License

MIT