Numerous Panicky Mimes

    react-native-material-menu
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    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 (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

    Install

    npm i react-native-material-menu

    DownloadsWeekly Downloads

    7,471

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    17

    Last publish

    Collaborators

    • mxck