till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-20 16:29:24 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5
managarten/apps/reader/apps/mobile/CONTEXT_MENU_SOLUTION.md
Wuesteon d36b321d9d style: auto-format codebase with Prettier 
Applied formatting to 1487+ files using pnpm format:write
  - TypeScript/JavaScript files
  - Svelte components
  - Astro pages
  - JSON configs
  - Markdown docs

  13 files still need manual review (Astro JSX comments)
2025-11-27 18:33:16 +01:00

1.9 KiB
Raw Blame History

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:

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