Skip to content

Conversation

@malkailany
Copy link
Contributor

@malkailany malkailany commented Dec 17, 2024

Overview

Added menu open/close event handlers

This PR adds two new events - onOpenMenu and onCloseMenu - so you can track when the menu appears and disappears. This is useful for analytics, UI state management, and accessibility features.

Works across both platforms:

  • iOS: Implemented for both the modern UIMenu (iOS 14+) and older UIAlertController
  • Android: Uses the native event system to match iOS behavior

Added TypeScript types and docs for the new events. Let me know if anything needs tweaking!

Test Plan

Manual Testing

  • Tested on iOS 14+ with UIMenu implementation
  • Tested on iOS 13 with UIAlertController implementation
  • Tested on Android with PopupMenu

Test Scenarios

  • Opening menu via tap (default behavior)
  • Opening menu via long press (when shouldOpenOnLongPress={true})
  • Closing menu by:
    • Selecting an action
    • Tapping outside
    • System back button (Android)
    • Swiping to dismiss (iOS 14+)

#Inspiration
While working with menus in FlatList, I ran into the same issue as #334 where tapping to dismiss the menu would trigger unwanted tap events on the underlying FlatList. To solve this, I added onOpenMenu and onCloseMenu events so developers can better control interactions during menu state changes.

mohammed and others added 15 commits December 16, 2024 18:54
Add onMenuClose event that fires when menu is dismissed.
- Implement for both iOS and Android platforms
- Add event at start of dismissal for better responsiveness
- Support both old and new React Native architectures
- Add tests and update documentation

The event fires when:
- User taps outside the menu
- User selects a menu item
@malkailany malkailany marked this pull request as ready for review December 17, 2024 21:32
@marcosrdz
Copy link
Contributor

@Naturalclar would be awesome to have

Copy link
Member

@Naturalclar Naturalclar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍🏻 thank you so much!

@Naturalclar Naturalclar merged commit d7dcacd into react-native-menu:master Dec 27, 2024
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants