react-native-material-menu ·

Pure JavaScript material menu component for React Native with automatic RTL support.

Install

Using yarn

yarn add react-native-material-menu

or using npm

npm install --save react-native-material-menu

Usage example (expo demo)

import React from 'react';
import React, { useState } from 'react';

import { View, Text } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';

export default function App() {
  const [visible, setVisible] = useState(false);

  const hideMenu = () => setVisible(false);

  const showMenu = () => setVisible(true);

  return (
    <View style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
      <Menu
        visible={visible}
        anchor={<Text onPress={showMenu}>Show menu</Text>}
        onRequestClose={hideMenu}
      >
        <MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
        <MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
        <MenuItem disabled>Disabled item</MenuItem>
        <MenuDivider />
        <MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
      </Menu>
    </View>
  );
}

Menu

| name | description | type | default | | :---------------- | :------------------------------------- | --------: | :------ | | children | Components rendered in menu (required) | ReactNode | - | | anchor | Button component (required) | ReactNode | - | | visible | Whether the Menu is currently visible | Boolean | - | | style | Menu style | Style | - | | onRequestClose | Callback when menu has become hidden | Function | - | | animationDuration | Changes show() and hide() duration | Number | 300 |

MenuItem

| name | description | type | default | | :---------------- | :--------------------------- | --------: | :---------- | | children | Rendered children (required) | ReactNode | - | | disabled | Disabled flag | Boolean | false | | disabledTextColor | Disabled text color | String | '#bdbdbd' | | onPress | Called function on press | Func | - | | style | Container style | Style | - | | textStyle | Text style | Style | - | | pressColor | Pressed color | String | '#e0e0e0' |

Children must be based on <Text> component (like text itself, strings, react-native-vector-icons or expo icons) otherwise you may get an error on a real device.

MenuDivider

| name | description | type | default | | :---- | :---------- | -----: | :------------------- | | color | Line color | String | 'rgba(0,0,0,0.12)' |

Pietile native kit

Also take a look at other our components for react-native - pietile-native-kit

License

MIT License. © Maksim Milyutin 2017-2021