React-native-side-nav NPM

react-native-side-nav

Contents
Usage
Props
Examples
Roadmap

Usage

import React from "react";
import { View, TouchableOpacity } from "react-native";
import SideMenu from "react-native-side-nav";

const MenuComponent = () => {
  return <View style={styles.animatedBox}>
         // Your menu content here
         </View>;
};

const App = () => {
  const [menuExpanded, setMenuExpanded] = useState(false);

  return (
    <View>
      <SideMenu
        menuExpanded={menuExpanded}
        menuComponent={<MenuComponent />}
        burgerIcon
        onToggle={() => setMenuExpanded(!menuExpanded)}
      >
        // Your App components
      </SideMenu>
    </View>
  );
};

export default App;

Props

Prop	Default	Type	Description
menuExpanded	false	`boolean`	Set to `true` or `false` to open or close the menu.
menuComponent		`ReactNode`	The content of your drawer. (see example)
menuWidth optional	80	`number`	The width of the menu, as a percentage of the screen width.
animationDuration optional	300	`number`	The length of the animation in ms.
fade optional	false	`boolean`	Set to `true` to make the menu fade in on top of the content. Only works if `push` is set to `false`.
overlay optional	false	`boolean`	Set to `true` adds a dark overlay on top of the app when the menu is open.
overlayOpacity optional	0.4	`number`	Sets the opacity of the overlay. Only works if `overlay` is set to `true`.
leftAligned optional	false	`boolean`	Set to `true` to make the menu come in from the left side of the screen.
push optional	false	`boolean`	Set to `true` to make the menu 'push' your app contents to one side.
burgerIcon optional	false	`boolean`	Set to `true` to add an absolutely positioned burger icon to toggle your menu.
onToggle required if burgerIcon={true}	null	`() => any`	Your toggle function for the burger icon. (see example)
onHide optional	null	`() => any`	The menu's hide function, pass this down if you want users to be able to close the menu by tapping outside of it. Ex `onHide={() => setShow(false)`
burgerWidth optional	35	`number`	The width of the burger icon.
burgerIconStyles optional	{}	`ViewStyle`	Edit the burger X and Y position. Example: `burgerIconStyles={{top: 30, left: 20}}`. You can try passing other styles although they haven't been tested. Use the burger icon color props instead.
burgerIconColor1 optional	'#ffffff'	`string`	The color you want your burger icon to be.
burgerIconColor2 optional	''	`string`	If the background of your menu doesn't match the rest of your app, you can change the color of the icon when the menu is expanded. If you don't set this value it will default to burgerIconColor1.