{"_id":"@ariefw-rn/three-line-menu","_rev":"6-34d9a77bd7c31e797e346e71da057fde","name":"@ariefw-rn/three-line-menu","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.2":{"name":"@ariefw-rn/three-line-menu","version":"0.1.2","keywords":["react-native","expo","@ariefw-rn/three-line-menu","ThreeLineMenu"],"author":{"url":"https://github.com/ariefwara","name":"Arief Warazuhudien","email":"arief.wara@gmail.com"},"license":"MIT","_id":"@ariefw-rn/three-line-menu@0.1.2","maintainers":[{"name":"ariefw","email":"arief.wara@gmail.com"}],"homepage":"https://github.com/ariefwara/rn-three-line-menu#readme","bugs":{"url":"https://github.com/ariefwara/rn-three-line-menu/issues"},"dist":{"shasum":"a37469b15018304b19fc9dbeb1de3d0d44eb42b1","tarball":"https://registry.npmjs.org/@ariefw-rn/three-line-menu/-/three-line-menu-0.1.2.tgz","fileCount":27,"integrity":"sha512-L3ELwNRv0Xo6ktbuAaKm2QiX50PMwr9H4Iwp/MFji962/BwO5oEG1p5mkWh+oc1EaQ7qgeJYFBiG7Qu1hAyE4Q==","signatures":[{"sig":"MEQCIADG5Bw+6tAl1oXsbr59DqdxUNhMVM4Mkpr+LQGbk0d+AiAYbslVaohGfxbxdGvXIXmbzy98ab6qKTkB7CzyOWtT0g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35214},"main":"build/index.js","types":"build/index.d.ts","gitHead":"6ba53e5301485be867a8dac708b9d34a9d93ec35","scripts":{"lint":"expo-module lint","test":"expo-module test","build":"expo-module build","clean":"expo-module clean","prepare":"expo-module prepare","open:ios":"xed example/ios","expo-module":"expo-module","open:android":"open -a \"Android Studio\" example/android","prepublishOnly":"expo-module prepublishOnly"},"_npmUser":{"name":"ariefw","email":"arief.wara@gmail.com"},"repository":{"url":"git+https://github.com/ariefwara/rn-three-line-menu.git","type":"git"},"_npmVersion":"10.9.2","description":"The ariefw-rn three-line-menu module functions as a specialized UI component that bridges the React layer with the underlying layout engine to provide a responsive touch interactive navigation trigger. It programmatically manages the visual transitions be","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react-native-safe-area-context":"^5.6.2"},"_hasShrinkwrap":false,"devDependencies":{"expo":"^54.0.27","@types/react":"~19.1.0","react-native":"0.81.5","expo-module-scripts":"^5.0.8"},"peerDependencies":{"expo":"*","react":"*","react-native":"*"},"_npmOperationalInternal":{"tmp":"tmp/three-line-menu_0.1.2_1766984001264_0.3533868102415765","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@ariefw-rn/three-line-menu","version":"0.1.3","description":"The ariefw-rn three-line-menu module functions as a specialized UI component that bridges the React layer with the underlying layout engine to provide a responsive touch interactive navigation trigger. It programmatically manages the visual transitions be","main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"expo-module build","clean":"expo-module clean","lint":"expo-module lint","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module","open:ios":"xed example/ios","open:android":"open -a \"Android Studio\" example/android"},"keywords":["react-native","expo","@ariefw-rn/three-line-menu","ThreeLineMenu"],"repository":{"type":"git","url":"git+https://github.com/ariefwara/rn-three-line-menu.git"},"bugs":{"url":"https://github.com/ariefwara/rn-three-line-menu/issues"},"author":{"name":"Arief Warazuhudien","email":"arief.wara@gmail.com","url":"https://github.com/ariefwara"},"license":"MIT","homepage":"https://github.com/ariefwara/rn-three-line-menu#readme","dependencies":{"react-native-safe-area-context":"^5.6.2"},"devDependencies":{"@types/react":"~19.1.0","expo":"^54.0.27","expo-module-scripts":"^5.0.8","react-native":"0.81.5"},"peerDependencies":{"expo":"*","react":"*","react-native":"*"},"_id":"@ariefw-rn/three-line-menu@0.1.3","gitHead":"2d602b99d02984a16deb38b684a9799f7f8b113b","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-MSPopkjsH5jOlKLZyz4wi8RPg2ETb4Z0igNnroIKApVcZtdTOi4X9RrbizfCM2cMTrmprIL5WAKNeumo9bYv9A==","shasum":"1aaada3ce47303e7b1f20c13e721dfbdbd8c5272","tarball":"https://registry.npmjs.org/@ariefw-rn/three-line-menu/-/three-line-menu-0.1.3.tgz","fileCount":27,"unpackedSize":35306,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC0u2e+F4Pst8vvdmhPI2OlQvUys4OeQg+buLqGheq/XwIgJQO6P+Y4PfbWBcwDwfiMun5DU8elXl4TGEcBv9WaOlM="}]},"_npmUser":{"name":"ariefw","email":"arief.wara@gmail.com"},"directories":{},"maintainers":[{"name":"ariefw","email":"arief.wara@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/three-line-menu_0.1.3_1766984633469_0.33709892384041495"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-29T04:53:21.143Z","modified":"2025-12-29T05:03:53.849Z","0.1.0":"2025-12-28T07:40:07.649Z","0.1.1":"2025-12-28T08:03:14.573Z","0.1.2":"2025-12-29T04:53:21.424Z","0.1.3":"2025-12-29T05:03:53.627Z"},"bugs":{"url":"https://github.com/ariefwara/rn-three-line-menu/issues"},"author":{"name":"Arief Warazuhudien","email":"arief.wara@gmail.com","url":"https://github.com/ariefwara"},"license":"MIT","homepage":"https://github.com/ariefwara/rn-three-line-menu#readme","keywords":["react-native","expo","@ariefw-rn/three-line-menu","ThreeLineMenu"],"repository":{"type":"git","url":"git+https://github.com/ariefwara/rn-three-line-menu.git"},"description":"The ariefw-rn three-line-menu module functions as a specialized UI component that bridges the React layer with the underlying layout engine to provide a responsive touch interactive navigation trigger. It programmatically manages the visual transitions be","maintainers":[{"name":"ariefw","email":"arief.wara@gmail.com"}],"readme":"# @ariefw-rn/three-line-menu\n\nA responsive and animated three-line menu (hamburger menu) component for React Native applications. This component provides a sleek animated sidebar that works seamlessly across iOS, Android, and Web platforms. The menu features smooth slide-in animations, backdrop dimming, and safe area handling for modern mobile devices.\n\n## Demo\n\nTry it out on [Expo Snack](https://snack.expo.dev/@ariefwara/rn-three-line-menu)!\n\n## Background\n\nThis component follows an old-school philosophy similar to Java Swing components, focusing on functionality over appearance. It's designed for developers who prioritize getting things done quickly rather than spending time on extensive UI customization. The component provides a ready-to-use solution that requires minimal setup - you only need to provide the menu items themselves. This approach allows for fast development without the need for complex styling or detailed customization, making it ideal for applications where functionality takes precedence over visual appearance.\n\n## Features\n\n- 🎨 Smooth slide-in/slide-out animations\n- 📱 Cross-platform support (iOS, Android, Web)\n- 🛡️ Safe area awareness for notch devices\n- 🎯 Touch-optimized interface\n- 🎭 Backdrop dimming effect\n- 📋 Customizable menu items\n- ⚡ High-performance rendering\n\n## Installation\n\n### Expo Managed Projects\n\n```bash\nnpx expo install @ariefw-rn/three-line-menu\n```\n\n### Bare React Native Projects\n\n```bash\nnpm install @ariefw-rn/three-line-menu\n```\n\nFor iOS, run:\n```bash\nnpx pod-install\n```\n\n## Usage\n\nHere's a basic example of how to use the ThreeLineMenu component:\n\n```tsx\nimport React from 'react';\nimport { StyleSheet, View, Alert } from 'react-native';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport { ThreeLineMenuView, MenuOption } from '@ariefw-rn/three-line-menu';\n\nexport default function App() {\n  const menuData: MenuOption[] = [\n    {\n      label: 'Dashboard',\n      onPress: () => Alert.alert('Dashboard selected')\n    },\n    {\n      label: 'Profile',\n      onPress: () => Alert.alert('Profile selected')\n    },\n    {\n      label: 'Settings',\n      onPress: () => Alert.alert('Settings selected')\n    },\n    {\n      label: 'Help & Support',\n      onPress: () => Alert.alert('Help & Support selected')\n    },\n  ];\n\n  return (\n    <SafeAreaProvider style={styles.container}>\n      <View style={styles.header}>\n        <ThreeLineMenuView data={menuData} />\n        <Text style={styles.title}>My App</Text>\n      </View>\n      {/* Your main app content goes here */}\n    </SafeAreaProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#FAFAFA',\n  },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    backgroundColor: '#FFF',\n    paddingHorizontal: 15,\n    paddingTop: 10,\n    paddingBottom: 10,\n    borderBottomWidth: 1,\n    borderBottomColor: '#EEE',\n  },\n  title: {\n    marginLeft: 15,\n    fontSize: 18,\n    fontWeight: 'bold',\n  }\n});\n```\n\n## API\n\n### Components\n\n#### `ThreeLineMenuView`\n\nThe main component that renders the hamburger menu and sidebar.\n\n##### Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `data` | `MenuOption[]` | Yes | Array of menu options to display in the sidebar |\n\n#### `MenuOption`\n\nInterface for menu items in the sidebar.\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `label` | `string` | Yes | The text displayed for the menu item |\n| `onPress` | `() => void` | Yes | Function executed when the menu item is pressed |\n\n## Platform Support\n\n- ✅ iOS\n- ✅ Android\n- ✅ Web\n\n## Dependencies\n\nThis component relies on:\n- `react-native-safe-area-context` - For handling safe areas on iOS devices\n- `@expo/vector-icons` - For menu and close icons (you may need to install this separately)\n\n## Contributing\n\nContributions are welcome! Please follow these steps:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Make your changes\n4. Add tests if applicable\n5. Commit your changes (`git commit -m 'Add amazing feature'`)\n6. Push to the branch (`git push origin feature/amazing-feature`)\n7. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on the [GitHub repository](https://github.com/ariefwara/rn-three-line-menu/issues).\n","readmeFilename":"README.md"}