@ariefw-rn/three-line-menu 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Arief Warazuhudien
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# @ariefw-rn/three-line-menu
+
+A lightweight, pure JavaScript UI component for React Native that provides a highly customizable 'Three-Line' (Hamburger) menu icon. Built with zero external dependencies to ensure maximum performance and seamless integration into any mobile project.
+
+## Features
+
+- Three-line hamburger icon built with View components
+- Pressable wrapper that toggles sidebar visibility
+- Sliding sidebar that animates in from the left
+- Semi-transparent overlay that covers the rest of the screen
+- Tap on overlay to close the menu
+- Fully customizable menu items
+- Customizable icon color and size
+- Smooth animations using React Native's Animated API
+- TypeScript support included
+- Zero external dependencies
+
+## Installation
+
+```bash
+npm install @ariefw-rn/three-line-menu
+```
+
+## Usage
+
+```javascript
+import React from 'react';
+import { View, Text } from 'react-native';
+import ThreeLineMenu from '@ariefw-rn/three-line-menu';
+
+const App = () => {
+  const menuItems = [
+    { label: 'Home', id: 1 },
+    { label: 'Profile', id: 2 },
+    { label: 'Settings', id: 3 },
+    { label: 'About', id: 4 },
+  ];
+
+  const handleMenuAction = (item) => {
+    console.log('Menu item pressed:', item);
+    // Handle menu item press
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ThreeLineMenu
+        items={menuItems}
+        onAction={handleMenuAction}
+        color="#000000" // Icon and text color
+        size={1} // Size multiplier
+      />
+      {/* Your main app content */}
+    </View>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| items | Array | `[]` | Array of menu items with `label` and `id` properties |
+| onAction | Function | `undefined` | Callback function when a menu item is pressed |
+| color | String | `'#000'` | Color for the icon and menu text |
+| size | Number | `1` | Size multiplier for the icon and sidebar |
+
+## MenuItem Interface
+
+```typescript
+interface MenuItem {
+  label: string;  // Display text for the menu item
+  id: string | number;  // Unique identifier for the menu item
+  [key: string]: any;  // Allow additional properties
+}
+```
+
+## Example with all props
+
+```javascript
+<ThreeLineMenu
+  items={[
+    { label: 'Home', id: 1 },
+    { label: 'Profile', id: 2 },
+  ]}
+  onAction={(item) => console.log(item)}
+  color="#FF6B6B"
+  size={1.2}
+/>
+```
+
+## Try it on CodeSandbox
+
+You can try out the ThreeLineMenu component in your browser using the CodeSandbox example:
+
+[![Edit @ariefw-rn/three-line-menu](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/ariefwara/rn-three-line-menu/tree/main/example)
+
+To run the example locally:
+```bash
+git clone https://github.com/ariefwara/rn-three-line-menu.git
+cd rn-three-line-menu
+yarn install
+cd example
+npm install
+expo start
+```
+
+## Performance
+
+- Uses native driver for animations to ensure smooth performance
+- Efficient rendering with proper key props for menu items
+- Minimal re-renders through proper state management
+- Optimized layout with absolute positioning for overlay and sidebar
+
+## License
+
+MIT

package/lib/module/ThreeLineMenu.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=ThreeLineMenu.d.js.map

package/lib/module/ThreeLineMenu.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["ThreeLineMenu.d.ts"],"mappings":"","ignoreList":[]}

package/lib/module/ThreeLineMenu.js

@@ -0,0 +1,178 @@
+"use strict";
+
+import React, { useState, useRef } from 'react';
+import { View, Pressable, StyleSheet, Animated, Text, Dimensions } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  width: SCREEN_WIDTH
+} = Dimensions.get('window');
+
+// Define TypeScript interfaces
+
+const ThreeLineMenu = ({
+  items = [],
+  onAction,
+  color = '#000',
+  size = 1
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const sidebarAnimation = useRef(new Animated.Value(-SCREEN_WIDTH)).current;
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+  const toggleMenu = () => {
+    if (isOpen) {
+      // Close menu
+      Animated.parallel([Animated.timing(sidebarAnimation, {
+        toValue: -SCREEN_WIDTH,
+        duration: 300,
+        useNativeDriver: true
+      }), Animated.timing(overlayOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      })]).start();
+    } else {
+      // Open menu
+      Animated.parallel([Animated.timing(sidebarAnimation, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      }), Animated.timing(overlayOpacity, {
+        toValue: 0.5,
+        duration: 300,
+        useNativeDriver: true
+      })]).start();
+    }
+    setIsOpen(!isOpen);
+  };
+  const closeMenu = () => {
+    if (isOpen) {
+      Animated.parallel([Animated.timing(sidebarAnimation, {
+        toValue: -SCREEN_WIDTH,
+        duration: 300,
+        useNativeDriver: true
+      }), Animated.timing(overlayOpacity, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true
+      })]).start(() => {
+        setIsOpen(false);
+      });
+    }
+  };
+  const handleItemPress = item => {
+    if (onAction) {
+      onAction(item);
+    }
+    closeMenu();
+  };
+  const iconSize = 24 * size;
+  const sidebarWidth = SCREEN_WIDTH * 0.8 * size;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: toggleMenu,
+      style: styles.iconContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [styles.line, {
+          backgroundColor: color,
+          width: iconSize,
+          height: iconSize / 6,
+          marginBottom: iconSize / 6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.line, {
+          backgroundColor: color,
+          width: iconSize,
+          height: iconSize / 6,
+          marginBottom: iconSize / 6
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.line, {
+          backgroundColor: color,
+          width: iconSize,
+          height: iconSize / 6
+        }]
+      })]
+    }), isOpen && /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.overlay, {
+        opacity: overlayOpacity
+      }],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.overlay,
+        onPress: closeMenu
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.sidebar, {
+        width: sidebarWidth,
+        transform: [{
+          translateX: sidebarAnimation
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.menuItemsContainer,
+        children: items.map((item, index) => /*#__PURE__*/_jsx(Pressable, {
+          style: ({
+            pressed
+          }) => [styles.menuItem, pressed && styles.menuItemPressed],
+          onPress: () => handleItemPress(item),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.menuItemText, {
+              color
+            }],
+            children: item.label
+          })
+        }, item.id || index))
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  iconContainer: {
+    padding: 10,
+    zIndex: 100
+  },
+  line: {
+    borderRadius: 2
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 99
+  },
+  sidebar: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    backgroundColor: '#fff',
+    zIndex: 101,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 2,
+      height: 0
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  menuItemsContainer: {
+    flex: 1,
+    paddingTop: 50,
+    paddingLeft: 20
+  },
+  menuItem: {
+    paddingVertical: 15,
+    paddingRight: 20
+  },
+  menuItemPressed: {
+    opacity: 0.7
+  },
+  menuItemText: {
+    fontSize: 16,
+    fontWeight: '500'
+  }
+});
+export default ThreeLineMenu;
+//# sourceMappingURL=ThreeLineMenu.js.map

package/lib/module/ThreeLineMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useRef","View","Pressable","StyleSheet","Animated","Text","Dimensions","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","width","SCREEN_WIDTH","get","ThreeLineMenu","items","onAction","color","size","isOpen","setIsOpen","sidebarAnimation","Value","current","overlayOpacity","toggleMenu","parallel","timing","toValue","duration","useNativeDriver","start","closeMenu","handleItemPress","item","iconSize","sidebarWidth","children","onPress","style","styles","iconContainer","line","backgroundColor","height","marginBottom","overlay","opacity","sidebar","transform","translateX","menuItemsContainer","map","index","pressed","menuItem","menuItemPressed","menuItemText","label","id","create","padding","zIndex","borderRadius","position","top","left","right","bottom","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","flex","paddingTop","paddingLeft","paddingVertical","paddingRight","fontSize","fontWeight"],"sourceRoot":"../../src","sources":["ThreeLineMenu.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import ThreeLineMenu from "./ThreeLineMenu.js";
+export default ThreeLineMenu;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["multiply","a","b"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAO,SAASA,QAAQA,CAACC,CAAS,EAAEC,CAAS,EAAU;EACrD,OAAOD,CAAC,GAAGC,CAAC;AACd","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/ThreeLineMenu.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface MenuItem {
+    label: string;
+    id: string | number;
+    [key: string]: any;
+}
+interface ThreeLineMenuProps {
+    items: MenuItem[];
+    onAction?: (item: MenuItem) => void;
+    color?: string;
+    size?: number;
+}
+declare const ThreeLineMenu: React.FC<ThreeLineMenuProps>;
+export default ThreeLineMenu;
+//# sourceMappingURL=ThreeLineMenu.d.ts.map

package/lib/typescript/src/ThreeLineMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreeLineMenu.d.ts","sourceRoot":"","sources":["../../../src/ThreeLineMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,UAAU,kBAAkB;IAC1B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqJ/C,CAAC;AAoDF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,2 @@
+export declare function multiply(a: number, b: number): number;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/package.json

@@ -0,0 +1,165 @@
+{
+  "name": "@ariefw-rn/three-line-menu",
+  "version": "0.1.0",
+  "description": "A lightweight, pure JavaScript UI component for React Native that provides a highly customizable 'Three-Line' (Hamburger) menu icon. Built with zero external dependencies to ensure maximum performance and seamless integration into any mobile project.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace @ariefw-rn/three-line-menu-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ariefwara/rn-three-line-menu.git"
+  },
+  "author": "Arief Warazuhudien <arief.wara@gmail.com> (https://www.ariefw.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ariefwara/rn-three-line-menu/issues"
+  },
+  "homepage": "https://github.com/ariefwara/rn-three-line-menu#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-safe-area-context": "^5.6.2",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.0"
+  }
+}

package/src/ThreeLineMenu.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+interface MenuItem {
+  label: string;
+  id: string | number;
+  [key: string]: any; // Allow additional properties
+}
+
+interface ThreeLineMenuProps {
+  items: MenuItem[];
+  onAction?: (item: MenuItem) => void;
+  color?: string;
+  size?: number;
+}
+
+declare const ThreeLineMenu: FC<ThreeLineMenuProps>;
+
+export default ThreeLineMenu;

package/src/ThreeLineMenu.tsx

@@ -0,0 +1,228 @@
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  Animated,
+  Text,
+  Dimensions,
+} from 'react-native';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// Define TypeScript interfaces
+interface MenuItem {
+  label: string;
+  id: string | number;
+  [key: string]: any; // Allow additional properties
+}
+
+interface ThreeLineMenuProps {
+  items: MenuItem[];
+  onAction?: (item: MenuItem) => void;
+  color?: string;
+  size?: number;
+}
+
+const ThreeLineMenu: React.FC<ThreeLineMenuProps> = ({
+  items = [],
+  onAction,
+  color = '#000',
+  size = 1
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const sidebarAnimation = useRef(new Animated.Value(-SCREEN_WIDTH)).current;
+  const overlayOpacity = useRef(new Animated.Value(0)).current;
+
+  const toggleMenu = () => {
+    if (isOpen) {
+      // Close menu
+      Animated.parallel([
+        Animated.timing(sidebarAnimation, {
+          toValue: -SCREEN_WIDTH,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(overlayOpacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      // Open menu
+      Animated.parallel([
+        Animated.timing(sidebarAnimation, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(overlayOpacity, {
+          toValue: 0.5,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+    setIsOpen(!isOpen);
+  };
+
+  const closeMenu = () => {
+    if (isOpen) {
+      Animated.parallel([
+        Animated.timing(sidebarAnimation, {
+          toValue: -SCREEN_WIDTH,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(overlayOpacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setIsOpen(false);
+      });
+    }
+  };
+
+  const handleItemPress = (item: MenuItem) => {
+    if (onAction) {
+      onAction(item);
+    }
+    closeMenu();
+  };
+
+  const iconSize = 24 * size;
+  const sidebarWidth = SCREEN_WIDTH * 0.8 * size;
+
+  return (
+    <>
+      {/* Hamburger Icon */}
+      <Pressable
+        onPress={toggleMenu}
+        style={styles.iconContainer}
+      >
+        <View
+          style={[
+            styles.line,
+            {
+              backgroundColor: color,
+              width: iconSize,
+              height: iconSize / 6,
+              marginBottom: iconSize / 6,
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.line,
+            {
+              backgroundColor: color,
+              width: iconSize,
+              height: iconSize / 6,
+              marginBottom: iconSize / 6,
+            },
+          ]}
+        />
+        <View
+          style={[
+            styles.line,
+            {
+              backgroundColor: color,
+              width: iconSize,
+              height: iconSize / 6,
+            },
+          ]}
+        />
+      </Pressable>
+
+      {/* Sidebar Overlay */}
+      {isOpen && (
+        <Animated.View
+          style={[styles.overlay, { opacity: overlayOpacity }]}
+        >
+          <Pressable style={styles.overlay} onPress={closeMenu} />
+        </Animated.View>
+      )}
+
+      {/* Sidebar */}
+      <Animated.View
+        style={[
+          styles.sidebar,
+          {
+            width: sidebarWidth,
+            transform: [{ translateX: sidebarAnimation }],
+          },
+        ]}
+      >
+        <View style={styles.menuItemsContainer}>
+          {items.map((item, index) => (
+            <Pressable
+              key={item.id || index}
+              style={({ pressed }) => [
+                styles.menuItem,
+                pressed && styles.menuItemPressed,
+              ]}
+              onPress={() => handleItemPress(item)}
+            >
+              <Text style={[styles.menuItemText, { color }]}>{item.label}</Text>
+            </Pressable>
+          ))}
+        </View>
+      </Animated.View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    padding: 10,
+    zIndex: 100,
+  },
+  line: {
+    borderRadius: 2,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 99,
+  },
+  sidebar: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    backgroundColor: '#fff',
+    zIndex: 101,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 2,
+      height: 0,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  menuItemsContainer: {
+    flex: 1,
+    paddingTop: 50,
+    paddingLeft: 20,
+  },
+  menuItem: {
+    paddingVertical: 15,
+    paddingRight: 20,
+  },
+  menuItemPressed: {
+    opacity: 0.7,
+  },
+  menuItemText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+
+export default ThreeLineMenu;

package/src/index.js

@@ -0,0 +1,3 @@
+import ThreeLineMenu from './ThreeLineMenu';
+
+export default ThreeLineMenu;

package/src/index.tsx

@@ -0,0 +1,3 @@
+export function multiply(a: number, b: number): number {
+  return a * b;
+}