@eavfw/react-native-curved-tab-bar v1.0.1

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

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