Menu
Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them.


Usage
import * as React from 'react';
import { View } from 'react-native';
import { Button, Menu, Divider, Provider } from 'react-native-paper';
const MyComponent = () => {
const [visible, setVisible] = React.useState(false);
const openMenu = () => setVisible(true);
const closeMenu = () => setVisible(false);
return (
<Provider>
<View
style={{
paddingTop: 50,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Menu
visible={visible}
onDismiss={closeMenu}
anchor={<Button onPress={openMenu}>Show menu</Button>}>
<Menu.Item onPress={() => {}} title="Item 1" />
<Menu.Item onPress={() => {}} title="Item 2" />
<Divider />
<Menu.Item onPress={() => {}} title="Item 3" />
</Menu>
</View>
</Provider>
);
};
export default MyComponent;
Note
When using Menu
within a React Native's Modal
component, you need to wrap all
Modal
contents within a Provider
in order for the menu to show. This
wrapping is not necessary if you use Paper's Modal
instead.
Props
React.ReactNode | { x: number; y: number }
The anchor to open the menu from. In most cases, it will be a button that opens the menu.
'top' | 'bottom'
Whether the menu should open at the top of the anchor or at its bottom. Applied only when anchor is a node, not an x/y position.
number
APPROX_STATUSBAR_HEIGHT
Extra margin to add at the top of the menu to account for translucent status bar on Android.
If you are using Expo, we assume translucent status bar and set a height for status bar automatically.
Pass 0
or a custom value to and customize it.
This is automatically handled on iOS.
() => void
Callback called when Menu is dismissed. The visible
prop needs to be updated when this is called.
string
'Close menu'
Accessibility label for the overlay. This is read by the screen reader when the user taps outside the menu.
InternalTheme
Static properties
These properties can be accessed on Menu
by using the dot notation, e.g. Menu.Item
.
Item
static