discussions-and-proposals icon indicating copy to clipboard operation
discussions-and-proposals copied to clipboard

Published 20 hours ago • verified publisher icon react-native-community

Support for iOS 14 pull-down menu

Open pinarol opened this issue 4 years ago • 5 comments

Introduction

Taken from iOS Human Interface Guidelines: In iOS 14 and later, a button can display a pull-down menu that lists items or actions from which people can choose. You can use a pull-down menu — or simply menu — to offer items that are directly related to the button's action or to provide a list of actions that are useful in the current context.

I was wondering if there's any interest in adding this component to React Native core, or building a React Native library for it.

Screen Shot 2020-06-30 at 15 49 01 Screen Shot 2020-06-30 at 15 49 09

Why it is needed

We wish to replace almost all the ActionSheetiOS usages with pull-down menus in our React Native App because it is more easy for users understand the relationship between the menu's items and the action they're performing. And it is a less interruptable UX for them.

Details

From iOS Human Interface Guidelines:

  • It is possible to use separators to group items
  • You can let people reveal a menu by performing a specific gesture on an existing button. For example, in iOS 14 and later, Safari responds to a touch and hold gesture on the tabs button
  • Menus use red text to highlight actions that you identify as potentially destructive. When people choose a destructive action, the system displays an action sheet (iOS) or popover (iPadOS) in which they can confirm their choice or cancel the action.

Discussion points

  • Is there a high demand?
  • Is there any obstacles/restrictions to this?

pinarol avatar Jun 30 '20 12:06 pinarol

This seems like something that could live as a separate module with an API similar to ActionSheet

elicwhite avatar Jun 30 '20 16:06 elicwhite

I've seen some third party packages tackle this like this package https://www.npmjs.com/package/react-native-popover-menu

It may not be a native solution to the platform, but the experience is the same.

m4rcoperuano avatar Jul 21 '20 14:07 m4rcoperuano

I've created https://github.com/react-native-menu/menu component which supports Native UIMenu for iOS14+, with fall backs to Actionsheet for verisions lower than iOS 14.

iOS 14

Naturalclar avatar Nov 08 '20 17:11 Naturalclar

@Naturalclar is the Expo managed workflow support on the roadmap? I really love the library, and I think it would really make the native UIMenu more accessible!

filiptronicek avatar Jun 06 '21 16:06 filiptronicek

@filiptronicek I don't have any control over expo support, but it seems like support for the ui menu component library is indeed on the roadmap :+1: https://blog.expo.io/introducing-expo-run-commands-835ae8da4813

Naturalclar avatar Jun 06 '21 21:06 Naturalclar