A simple animated menu for React Native apps.

react-native-side-nav

Contents

• Installation
• Contents
• Usage
• Props
• Examples
• Roadmap

Installation

npm i react-native-side-nav

Usage

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

const MenuComponent = () => {
  return <View style={styles.yourMenuStyles}>
         // 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.

Examples

menuWidth

fade

overlay & overlayOpacity

leftAligned

push

burgerIcon

burgerWidth

burgerIconStyles

burgerIconColor1

burgerIconColor2

Roadmap

• Improve animation
• Android support
• Update docs examples
• Typescript
• Add burger icon
• Testing
• Add overlay opacity prop

Questions

Feel free to contact me or create an issue

Made with ♥.