react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native. Implemented using react-native-svg and @react-navigation/bottom-tabs.

1If you love this library, give us a star, you will be a ray of sunshine in our lives :)

Free React Native Boilerplate

React Native Template with a beautiful UI.

Getting started

1npm install react-native-curved-bottom-bar --save

or

1yarn add react-native-curved-bottom-bar

Now we need to install react-native-svg and @react-navigation/bottom-tabs.

Demo

CurvedBottomBar.Navigator

Props	Params	isRequire	Description
type	'DOWN' or 'UP'	Yes	Type of the center tab item, downward curve or upward curve
circlePosition	'CENTER' or 'LEFT' or 'RIGHT'	No	Position of circle button
initialRouteName	String	Yes	The name of the route to render on first load of the navigator
tabBar	({ routeName, selectedTab, navigate }) => JSX.Element	Yes	Function that returns a React element to display as the tab bar
renderCircle	({ routeName, selectedTab, navigate }) => JSX.Element	Yes	Function that returns a React element to display as the center tab item
circleWidth	Number	No	Customize width of the center tab item. Minimum is 50px and Maximum is 60px
style	ViewStyle	No	Styling for container view
shadowStyle	ViewStyle	No	Styling for shadow view.
width	Number	No	Customize width for container view
height	Number	No	Customize height for container view, Minimum is 50px and Maximum is 90px
borderTopLeftRight	Boolean	No	Border radius top left and top right of container view
borderColor	String	No	Border color
borderWidth	Number	No	Border width
bgColor	String	No	Background color of container view

CurvedBottomBar.Screen

Props	Params	isRequire	Description
name	String	Yes	Name of the route to jump to
position	'LEFT' or 'RIGHT' or 'CIRCLE'	Yes	Set position of tabbar icon to the left or right of the circle button. Use type "CIRCLE" only when you want the circle button is a tabview
component	(props) => JSX.Element	Yes	Screen params to merge into the destination route

API

Function	Params	Description
setVisible	Boolean	Used to hide/show the tab bar. Ex: ref.current.setVisible(false)

Use in Expo

1import React from 'react';
2import {
3  Alert,
4  Animated,
5  StyleSheet,
6  TouchableOpacity,
7  View,
8} from 'react-native';
9import { CurvedBottomBarExpo } from 'react-native-curved-bottom-bar';
10import Ionicons from '@expo/vector-icons/Ionicons';
11import { NavigationContainer } from '@react-navigation/native';
12
13const Screen1 = () => {
14  return <View style={styles.screen1} />;
15};
16
17const Screen2 = () => {
18  return <View style={styles.screen2} />;
19};
20
21export default function App() {
22  const _renderIcon = (routeName, selectedTab) => {
23    let icon = '';
24
25    switch (routeName) {
26      case 'title1':
27        icon = 'ios-home-outline';
28        break;
29      case 'title2':
30        icon = 'settings-outline';
31        break;
32    }
33
34    return (
35      <Ionicons
36        name={icon}
37        size={25}
38        color={routeName === selectedTab ? 'black' : 'gray'}
39      />
40    );
41  };
42  const renderTabBar = ({ routeName, selectedTab, navigate }) => {
43    return (
44      <TouchableOpacity
45        onPress={() => navigate(routeName)}
46        style={styles.tabbarItem}
47      >
48        {_renderIcon(routeName, selectedTab)}
49      </TouchableOpacity>
50    );
51  };
52
53  return (
54    <NavigationContainer>
55      <CurvedBottomBarExpo.Navigator
56        type="DOWN"
57        style={styles.bottomBar}
58        shadowStyle={styles.shawdow}
59        height={55}
60        circleWidth={50}
61        bgColor="white"
62        initialRouteName="title1"
63        borderTopLeftRight
64        renderCircle={({ selectedTab, navigate }) => (
65          <Animated.View style={styles.btnCircleUp}>
66            <TouchableOpacity
67              style={styles.button}
68              onPress={() => Alert.alert('Click Action')}
69            >
70              <Ionicons name={'apps-sharp'} color="gray" size={25} />
71            </TouchableOpacity>
72          </Animated.View>
73        )}
74        tabBar={renderTabBar}
75      >
76        <CurvedBottomBarExpo.Screen
77          name="title1"
78          position="LEFT"
79          component={() => <Screen1 />}
80        />
81        <CurvedBottomBarExpo.Screen
82          name="title2"
83          component={() => <Screen2 />}
84          position="RIGHT"
85        />
86      </CurvedBottomBarExpo.Navigator>
87    </NavigationContainer>
88  );
89}
90
91export const styles = StyleSheet.create({
92  container: {
93    flex: 1,
94    padding: 20,
95  },
96  shawdow: {
97    shadowColor: '#DDDDDD',
98    shadowOffset: {
99      width: 0,
100      height: 0,
101    },
102    shadowOpacity: 1,
103    shadowRadius: 5,
104  },
105  button: {
106    flex: 1,
107    justifyContent: 'center',
108  },
109  bottomBar: {},
110  btnCircleUp: {
111    width: 60,
112    height: 60,
113    borderRadius: 30,
114    alignItems: 'center',
115    justifyContent: 'center',
116    backgroundColor: '#E8E8E8',
117    bottom: 30,
118    shadowColor: '#000',
119    shadowOffset: {
120      width: 0,
121      height: 1,
122    },
123    shadowOpacity: 0.2,
124    shadowRadius: 1.41,
125    elevation: 1,
126  },
127  imgCircle: {
128    width: 30,
129    height: 30,
130    tintColor: 'gray',
131  },
132  tabbarItem: {
133    flex: 1,
134    alignItems: 'center',
135    justifyContent: 'center',
136  },
137  img: {
138    width: 30,
139    height: 30,
140  },
141  screen1: {
142    flex: 1,
143    backgroundColor: '#BFEFFF',
144  },
145  screen2: {
146    flex: 1,
147    backgroundColor: '#FFEBCD',
148  },
149});
150

Use in RN CLI

1import React from 'react';
2import {
3  Alert,
4  Animated,
5  StyleSheet,
6  TouchableOpacity,
7  View,
8} from 'react-native';
9import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
10import Ionicons from 'react-native-vector-icons/Ionicons';
11import { NavigationContainer } from '@react-navigation/native';
12
13const Screen1 = () => {
14  return <View style={styles.screen1} />;
15};
16
17const Screen2 = () => {
18  return <View style={styles.screen2} />;
19};
20
21export default function App() {
22  const _renderIcon = (routeName, selectedTab) => {
23    let icon = '';
24
25    switch (routeName) {
26      case 'title1':
27        icon = 'ios-home-outline';
28        break;
29      case 'title2':
30        icon = 'settings-outline';
31        break;
32    }
33
34    return (
35      <Ionicons
36        name={icon}
37        size={25}
38        color={routeName === selectedTab ? 'black' : 'gray'}
39      />
40    );
41  };
42  const renderTabBar = ({ routeName, selectedTab, navigate }) => {
43    return (
44      <TouchableOpacity
45        onPress={() => navigate(routeName)}
46        style={styles.tabbarItem}
47      >
48        {_renderIcon(routeName, selectedTab)}
49      </TouchableOpacity>
50    );
51  };
52
53  return (
54    <NavigationContainer>
55      <CurvedBottomBar.Navigator
56        type="UP"
57        style={styles.bottomBar}
58        shadowStyle={styles.shawdow}
59        height={55}
60        circleWidth={50}
61        bgColor="white"
62        initialRouteName="title1"
63        borderTopLeftRight
64        renderCircle={({ selectedTab, navigate }) => (
65          <Animated.View style={styles.btnCircleUp}>
66            <TouchableOpacity
67              style={styles.button}
68              onPress={() => Alert.alert('Click Action')}
69            >
70              <Ionicons name={'apps-sharp'} color="gray" size={25} />
71            </TouchableOpacity>
72          </Animated.View>
73        )}
74        tabBar={renderTabBar}
75      >
76        <CurvedBottomBar.Screen
77          name="title1"
78          position="LEFT"
79          component={() => <Screen1 />}
80        />
81        <CurvedBottomBar.Screen
82          name="title2"
83          component={() => <Screen2 />}
84          position="RIGHT"
85        />
86      </CurvedBottomBar.Navigator>
87    </NavigationContainer>
88  );
89}
90
91export const styles = StyleSheet.create({
92  container: {
93    flex: 1,
94    padding: 20,
95  },
96  shawdow: {
97    shadowColor: '#DDDDDD',
98    shadowOffset: {
99      width: 0,
100      height: 0,
101    },
102    shadowOpacity: 1,
103    shadowRadius: 5,
104  },
105  button: {
106    flex: 1,
107    justifyContent: 'center',
108  },
109  bottomBar: {},
110  btnCircleUp: {
111    width: 60,
112    height: 60,
113    borderRadius: 30,
114    alignItems: 'center',
115    justifyContent: 'center',
116    backgroundColor: '#E8E8E8',
117    bottom: 18,
118    shadowColor: '#000',
119    shadowOffset: {
120      width: 0,
121      height: 1,
122    },
123    shadowOpacity: 0.2,
124    shadowRadius: 1.41,
125    elevation: 1,
126  },
127  imgCircle: {
128    width: 30,
129    height: 30,
130    tintColor: 'gray',
131  },
132  tabbarItem: {
133    flex: 1,
134    alignItems: 'center',
135    justifyContent: 'center',
136  },
137  img: {
138    width: 30,
139    height: 30,
140  },
141  screen1: {
142    flex: 1,
143    backgroundColor: '#BFEFFF',
144  },
145  screen2: {
146    flex: 1,
147    backgroundColor: '#FFEBCD',
148  },
149});
150