react-native-ios-popup-menu

Ios native popup menu for react-native. Falls back to ActionSheet for versions below IOS14.

Installation

Using npm:

1npm install react-native-ios-popup-menu

Using yarn:

1yarn add react-native-ios-popup-menu

Usage

1import { IosPopupMenu } from "react-native-ios-popup-menu";
2
3// ...
4
5<IosPopupMenu
6  title="Menu Options"
7  options={[
8    {
9      title: 'Copy',
10      titleColor: '#F9B02B',
11      iconColor: '#F9B02B',
12      icon: 'doc.on.doc',
13      id: 'copy',
14    },
15    {
16      title: 'Save',
17      icon: 'bookmark',
18      id: 'save',
19      destructiveButton: true,
20    },
21    {
22      title: 'Share',
23      titleColor: '#00D35C',
24      iconColor: '#00D35C',
25      icon: 'square.and.arrow.up',
26      id: 'share',
27    },
28    {
29      title: 'Cancel',
30      id: 'cancel',
31      cancelButton: true,
32      onlyIos13OrBelow: true,
33    },
34  ]}
35  onOptionSelect={(id) => console.log(`Selected: ${id}`)}
36  onCloseMenu={() => console.log('Menu closed')}
37  onOpenMenu={() => console.log('Menu opened')}
38>
39  <View style={styles.button}>
40    <Text style={styles.buttonText}>Open Menu</Text>
41  </View>
42</IosPopupMenu>

Reference

IosPopupMenuProps

Property	Type	Required	Description	Version
testIDIos14Later	string	false	TestID for ios14 or later version	IOS14+
testIDIos14Later	string	false	TestID for ios13 or below version	IOS13-
title	string	false	Menu title	All
options	IosPopupMenuOptionProps[]	true	List of menu options	All
userInterfaceStyle	enum('light', 'dark')	false	Menu theme color, if not provided, will use the system color	All
menuItemColor	string	false	Menu text color, if not provided, will use the system color	IOS13-
onOptionSelect	(id: string) => void	true	Callback when menu option is selected Returns the selected option id	All
onOpenMenu	() => void	false	Callback when menu is opened	All
onCloseMenu	() => void	false	Callback when menu is closed. Note: In IOS14+ this callback is called only when an option is selected	All

IosPopupMenuOptionProps

Property	Type	Required	Description	Version
id	string	true	Menu option identify	All
title	string	true	Menu option text	All
titleColor	string	false	Menu option text color, if not provided, will use the system color	IOS14+
icon	string	false	Menu option icon. Note: only SF Symbols (Apple icons system)	IOS14+
iconColor	string	false	Menu option icon color, if not provided, will use the system color	ISO14+
disabled	boolean	false	Menu option disable	All
destructiveButton	boolean	false	Menu option destructive style	IOS13-
cancelButton	boolean	false	Menu option cancel style. Note: if this is not set in any option, the menu will not close without choosing an option	IOS13-
onlyIos13OrBelow	boolean	false	Menu option will onlly be shown on IOS13- version	IOS13-

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT