stark-custom-sidebar-menu
v0.0.2
Published
**Customizable drawer menu**
Downloads
4
Maintainers
Readme
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>