Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
Aug 23, 2021
Oct 30, 2017
Aug 23, 2021
Aug 23, 2021

react-native-material-menu · npm license

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

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 ViewStyle -
onRequestClose Callback when menu has become hidden Function -
animationDuration Changes show/hide animation 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 Function -
style Container style ViewStyle -
textStyle Text style TextStyle -
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