react-native-curved-bottom-bar

To use the library in an Expo project, import CurvedBottomBarExpo from react-native-curved-bottom-bar and wrap your application in a NavigationContainer from @react-navigation/native.

import React from 'react';
import { Alert, Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
import { CurvedBottomBarExpo } from 'react-native-curved-bottom-bar';
import Ionicons from '@expo/vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';

// ... Screen components ...

export default function App() {
  const renderTabBar = ({ routeName, selectedTab, navigate }) => {
    return (
      <TouchableOpacity onPress={() => navigate(routeName)} style={styles.tabbarItem}>
        {/* Icon logic here */}
      </TouchableOpacity>
    );
  };

  return (
    <NavigationContainer>
      <CurvedBottomBarExpo.Navigator
        type="DOWN"
        initialRouteName="title1"
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={styles.btnCircleUp}>
            <TouchableOpacity onPress={() => Alert.alert('Click Action')}>
              <Ionicons name={'apps-sharp'} color="gray" size={25} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}
      >
        <CurvedBottomBarExpo.Screen
          name="title1"
          position="LEFT"
          component={() => <Screen1 />}
        />
        <CurvedBottomBarExpo.Screen
          name="title2"
          position="RIGHT"
          component={() => <Screen2 />}
        />
      </CurvedBottomBarExpo.Navigator
    </NavigationContainer>
  );
}

For React Native CLI projects, import CurvedBottomBar from react-native-curved-bottom-bar. Ensure you have installed vector icons (e.g., react-native-vector-icons) as required by your implementation.

import React from 'react';
import { Alert, Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';

// ... Screen components ...

export default function App() {
  const renderTabBar = ({ routeName, selectedTab, navigate }) => {
    return (
      <TouchableOpacity onPress={() => navigate(routeName)} style={styles.tabbarItem}>
        {/* Icon logic here */}
      </TouchableOpacity>
    );
  };

  return (
    <NavigationContainer>
      <CurvedBottomBar.Navigator
        type="UP"
        initialRouteName="title1"
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={styles.btnCircleUp}>
            <TouchableOpacity onPress={() => Alert.alert('Click Action')}>
              <Ionicons name={'apps-sharp'} color="gray" size={25} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}
      >
        <CurvedBottomBar.Screen
          name="title1"
          position="LEFT"
          component={() => <Screen1 />}
        />
        <CurvedBottomBar.Screen
          name="title2"
          position="RIGHT"
          component={() => <Screen2 />}
        />
      </CurvedBottomBar.Navigator
    </NavigationContainer>
  );
}

The CurvedBottomBar.Navigator is the main component used to manage the curved bottom navigation. It accepts several props to control the visual style and behavior of the bar.

Required Props

• type: 'DOWN' or 'UP'. Determines if the center tab item has a downward or upward curve.
• initialRouteName: String. The name of the route to render on first load.
• tabBar: ({ routeName, selectedTab, navigate }) => JSX.Element. A function that returns the React element to display as the tab bar.
• renderCircle: ({ routeName, selectedTab, navigate }) => JSX.Element. A function that returns the React element for the center tab item.

Optional Props

• circlePosition: 'CENTER', 'LEFT', or 'RIGHT'. Position of the circle button.
• circleWidth: Number. Width of the center tab item (Min: 50px, Max: 60px).
• height: Number. Height of the container (Min: 50px, Max: 90px).
• width: Number. Width of the container.
• bgColor: String. Background color of the container.
• style: ViewStyle. Styling for the container view.
• shadowStyle: ViewStyle. Styling for the shadow view.
• borderTopLeftRight: Boolean. Applies border radius to the top left and top right of the container.
• borderColor: String. Border color.
• borderWidth: Number. Border width.

The BottomBarComponent (exported as default) is a custom navigator built on top of @react-navigation/bottom-tabs. It allows you to create a navigation bar with a curved shape and a central action button (circle).

Key Props

Child Configuration

Children are passed as Tab.Screen equivalents. To control the layout, use the position prop on the children:

• position='LEFT': Renders to the left of the circle.
• position='RIGHT': Renders to the right of the circle.
• position='CIRCLE' or 'CENTER': Defines the route used for the central action button.

<BottomBarComponent
  type="DOWN"
  circlePosition="CENTER"
  bgColor="white"
  renderCircle={({ routeName, selectedTab, navigate }) => (
    <TouchableOpacity onPress={() => navigate('SpecialRoute')}>
      <View style={{ width: 50, height: 50, borderRadius: 25, backgroundColor: 'blue' }} />
    </TouchableOpacity>
  )}
>
  <Tab.Screen name="Home" component={HomeScreen} position="LEFT" />
  <Tab.Screen name="Settings" component={SettingsScreen} position="RIGHT" />
  <Tab.Screen name="SpecialRoute" component={SpecialScreen} position="CIRCLE" />
</BottomBarComponent>