react-native-side-nav

Contents

• 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. |

Examples

menuWidth

fade

overlay & overlayOpacity

leftAligned

push

burgerIcon

burgerWidth

burgerIconStyles

burgerIconColor1

burgerIconColor2

Roadmap

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

Questions

Feel free to contact me or create an issue

Made with ♥.