mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-25 08:14:38 +02:00
64 lines
1.9 KiB
Markdown
64 lines
1.9 KiB
Markdown
# Context Menu Solution
|
|
|
|
I've fixed the "View config not found for component 'ContextMenu'" error by replacing the native `react-native-context-menu-view` with a cross-platform solution that works with Expo Go.
|
|
|
|
## What was changed:
|
|
|
|
1. **Removed the native dependency**: Uninstalled `react-native-context-menu-view` which requires native code and doesn't work with Expo Go.
|
|
|
|
2. **Created two alternative solutions**:
|
|
|
|
### Option 1: ActionMenu (Currently Active)
|
|
|
|
- Located in `/components/ActionMenu.tsx`
|
|
- Uses native ActionSheetIOS on iOS for a truly native experience
|
|
- Custom modal implementation for Android that slides up from bottom
|
|
- Triggered by long press on list items
|
|
|
|
### Option 2: ContextMenu (Alternative)
|
|
|
|
- Located in `/components/ContextMenu.tsx`
|
|
- Custom modal-based context menu that appears near the pressed item
|
|
- Works on both platforms with consistent behavior
|
|
- More traditional context menu appearance
|
|
|
|
## How it works:
|
|
|
|
The ActionMenu component wraps your list items and provides a long-press gesture handler. When activated:
|
|
|
|
- On iOS: Shows native ActionSheetIOS
|
|
- On Android: Shows a custom bottom sheet modal
|
|
|
|
## Usage:
|
|
|
|
```tsx
|
|
<ActionMenu
|
|
options={[
|
|
{ title: 'Open', systemIcon: 'doc.text' },
|
|
{ title: 'Share', systemIcon: 'square.and.arrow.up' },
|
|
{ title: 'Delete', systemIcon: 'trash', destructive: true },
|
|
]}
|
|
onSelect={(index) => {
|
|
// Handle selection
|
|
}}
|
|
>
|
|
<YourComponent />
|
|
</ActionMenu>
|
|
```
|
|
|
|
## Benefits:
|
|
|
|
- Works with Expo Go (no development build required)
|
|
- Native feel on iOS
|
|
- Consistent experience across platforms
|
|
- No native dependencies
|
|
|
|
## If you need a development build:
|
|
|
|
If you prefer to use the native context menu and are willing to use a development build:
|
|
|
|
1. Re-install `react-native-context-menu-view`
|
|
2. Run `npx expo prebuild`
|
|
3. Run `npx expo run:ios` or `npx expo run:android`
|
|
|
|
The current solution allows you to continue using Expo Go for development while providing a good user experience.
|