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-native-pager-view.

Getting started

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

or

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

Now we need to install react-native-svg and react-native-pager-view.

1    npm install react-native-svg react-native-pager-view --save

or

1    yarn add react-native-svg react-native-pager-view

Source code demo

react-native-template-components A beautiful template for React Native.

Demo

CurvedBottomBar.Navigator

Props	Params	isRequire	Description
type	'down' or 'up'	Yes	Type of the center tab item, downward curve or upward curve
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	({ 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
style	ViewStyle	No	Styling for container view
width	Number	No	Customize width for container view
height	Number	No	Customize height for container view
borderTopLeftRight	Boolean	No	Border radius top left and top right of container view
bgColor	String	No	Background color of container view
strokeWidth	Number	No	Border width of container view
swipeEnabled	Boolean	No	Indicating whether to enable swipe gestures
lazy	Boolean	No	If "lazy" is true then "swipeEnabled" is disabled

Method

API	Params	Description
navigate	() => void	Navigate to a tabbar
getRouteName	String	Return route name

CurvedBottomBar.Screen

Props	Params	isRequire	Description
name	String	Yes	Name of the route to jump to
position	left, right, center	Yes	Set position of screen to the left or right of the center button. Use type "center" only when you want the center button is a tabview
component	({ navigate }) => JSX.Element	Yes	Screen params to merge into the destination route
renderHeader	({ navigate }) => JSX.Element	Yes	Customize header in screen

Example 1

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

Example 2

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