react-native-curved-bottom-bar

react-native-curved-bottom-bar

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

Source code demo

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

Getting started

    npm install react-native-curved-bottom-bar react-native-svg react-native-pager-view --save

or

    yarn add react-native-curved-bottom-bar react-native-svg react-native-pager-view

IOS

    cd ios && pod install

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, selectTab, navigate }) => JSX.Element	Yes	Function that returns a React element to display as the tab bar
renderCircle	({ selectTab, navigate }) => JSX.Element	Yes	Function that returns a React element to display as the center tab item
circleWidth	Number	No	Width of the center tab item
style	ViewStyle	No
width	Number	No
height	Number	No
borderTopLeftRight	Boolean	No
bgColor	String	No
strokeWidth	Number	No
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 tab item
component	({ navigate }) => JSX.Element	Yes	Screen params to merge into the destination route

Usage

    import React, { useState, useRef } from 'react';
    import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
    import { CurvedBottomBar } from 'react-native-curved-bottom-bar';
    import Ionicons from 'react-native-vector-icons/Ionicons';

    StatusBar.setBarStyle('dark-content');

    const ThemeScreen = props => {
        const ref = useRef();
        const [type, setType] = useState<'down' | 'up'>('down');

        const onClickButton = () => {
            if (type === 'up') {
                setType('down');
                alert('Change type curve down');
            } else {
                setType('up');
                alert('Change type curve up');
            }
        }

        const _renderIcon = (routeName: string, selectTab: string) => {
            let icon = '';

            switch (routeName) {
            case 'title1':
                icon = 'ios-home-outline';
                break;
            case 'title2':
                icon = 'apps-outline';
                break;
            case 'title3':
                icon = 'bar-chart-outline';
                break;
            case 'title4':
                icon = 'person-outline';
                break;
            }

            return (
                <Ionicons name={icon} size={23} color={routeName === selectTab ? '#FF3030' : 'gray'} />
            );
        };

        return (
            <View style={styles.container}>
                <CurvedBottomBar.Navigator
                    ref={ref}
                    style={[type === 'down' && {backgroundColor: '#F5F5F5'}]}
                    type={type}
                    height={60}
                    circleWidth={55}
                    bgColor="white"
                    borderTopLeftRight={true}
                    initialRouteName="title1"
                    renderCircle={({ selectTab, navigate }) => (
                        <TouchableOpacity
                            style={[type === 'down' ? styles.btnCircle : styles.btnCircleUp]} onPress={onClickButton}
                        >
                            <Ionicons name="chatbubbles-outline" size={23} />
                        </TouchableOpacity>
                    )}
                    tabBar={({ routeName, selectTab, navigate }) => {
                    return (
                        <TouchableOpacity
                            onPress={() => navigate(routeName)}
                            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                        >
                            {_renderIcon(routeName, selectTab)}
                        </TouchableOpacity>
                    );
                    }}>
                    <CurvedBottomBar.Screen
                        name="title1"
                        position="left"
                        component={({ navigate }) => <View style={{ backgroundColor: '#BFEFFF', flex: 1 }} />}
                    />
                    <CurvedBottomBar.Screen
                        name="title2"
                        component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
                        position="left"
                    />
                    <CurvedBottomBar.Screen
                        name="title3"
                        component={({ navigate }) => <View style={{ backgroundColor: '#BFEFFF', flex: 1 }} />}
                        position="right"
                    />
                    <CurvedBottomBar.Screen
                        name="title4"
                        component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
                        position="right"
                    />
                </CurvedBottomBar.Navigator>
            </View>
        );
    };

    export default ThemeScreen;

    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        btnCircle: {
            width: 60,
            height: 60,
            borderRadius: 30,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'white',
            shadowColor: "#000",
            shadowOffset: {
            width: 0,
            height: 1,
            },
            shadowOpacity: 0.20,
            shadowRadius: 1.41,
            elevation: 1,
            bottom: 28
        },
        btnCircleUp: {
            width: 60,
            height: 60,
            borderRadius: 30,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#E8E8E8',
            bottom: 18,
            shadowColor: "#000",
            shadowOffset: {
            width: 0,
            height: 1,
            },
            shadowOpacity: 0.20,
            shadowRadius: 1.41,
            elevation: 1,
        },
        imgCircle: {
            width: 30,
            height: 30,
            tintColor: '#48CEF6'
        },
        img: {
            width: 30,
            height: 30,
        }
    });