Custom drawer menu

Customizable drawer menu

Create customizable drawer menu

Installation

Install custom-sidebar-menu

npm i stark-custom-sidebar-menu

Usage

Import this in your Bottom navigation configuration file.

import CustomSidebarMenu from 'stark-custom-sidebar-menu';

Use this in your tab navigator

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

// some code

const Drawer = createDrawerNavigator();

// some code

render() {
    return (
        <NavigationContainer>
            <Drawer.Navigator drawerContent={props => <CustomSidebarMenu {...props} />} >
                // Drawer screens
            </Drawer.Navigator>
        </NavigationContainer>
    )
}

Configurable props

• topContainer

<CustomSidebarMenu
    topContainer={
        () => (
            <Image
                source={{ uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/react_logo.png' }}
                style={{
                resizeMode: 'center', width: 100, height: 100, borderRadius: 100 / 2, alignSelf: 'center',
                }}
            />
        )
    }
  {...props}
/>

Configurable props for <Drawer.Screen />

• options (Object)

    <NavigationContainer>
        <Drawer.Navigator drawerContent={props => <CustomSidebarMenu {...props} />} >
            <Drawer.Screen
                name="Home"
                component={Home}
                options={{
                    activeTintColor: "#ddd",
                    inactiveTintColor: "#000",
                    activeBackgroundColor: "#6ecbe3",
                    inactiveBackgroundColor: "#fff",
                    labelStyle: {},
                    style: {}
                }}
            />
        </Tab.Navigator>
    </NavigationContainer>