iOS14+ UIMenu component for react-native.
Falls back to ActionSheet for versions below iOS14.
iOS 14+ | iOS 13 |
---|
| |
Installation
via npm:
npm install @react-native-menu/menu
via yarn:
yarn add @react-native-menu/menu
Linking
The package is automatically linked when building the app. All you need to do is:
npx pod-install
Usage
import { MenuView } from '@react-native-menu/menu';
const App = () => {
return (
<View style={styles.container}>
<MenuView
title="Menu Title"
onPressAction={({ nativeEvent }) => {
console.warn(JSON.stringify(nativeEvent));
}}
actions={[
{
id: 'add',
title: 'Add to List',
image: 'plus',
},
{
id: 'share',
title: 'Share Action',
subtitle: 'Share action on SNS',
image: 'square.and.arrow.up',
state: 'on',
},
{
id: 'destructive',
title: 'Destructive Action',
attributes: {
destructive: true,
},
image: 'trash',
},
]}
>
<View style={styles.button}>
<Text style={styles.buttonText}>Test</Text>
</View>
</MenuView>
</View>
);
};
Reference
Props
title
The title of the menu.
actions
Actions to be displayed in the menu.
Type | Required |
---|
MenuAction[] | Yes |
Object representing Menu Action.
export type MenuAction = {
id?: string;
title: string;
subtitle?: string;
attributes?: MenuAttributes;
state?: MenuState;
image?: string;
};
The attributes indicating the style of the action.
type MenuAttributes = {
destructive?: boolean;
disabled?: boolean;
hidden?: boolean;
};
The state of the action.
type MenuState = 'off' | 'on' | 'mixed';
onPressAction
Callback function that will be called when selecting a menu item.
It will contain id of the given action.
Type | Required |
---|
({nativeEvent}) => void | No |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT