Menu

The Menu display a list of options. Their placement depends on the container location. They can be opened up or down.

Import

import { Menu } from '@tra-tech/react-native-kitra';

Usage

import { Menu, Icon } from '@tra-tech/react-native-kitra';
import { View } from 'react-native';

const MenuData = [  
{ label: 'Add',left: <Icon type="ant-design" name="addfolder" size={17} color="#D7D1E9" />,right: <Icon type="ant-design" name="addfile" size={17} color="#D7D1E9" />,onPress(){console.log('pressed')}},
{ label: 'Delete', left: <Icon type="ant-design" name="delete" size={17} color="#D7D1E9" /> },
{ label: 'Update', left: <Icon type="ant-design" name="upcircleo" size={17} color="#D7D1E9" /> },
{ label: 'Skip', right: <Icon type="ant-design" name="fastforward" size={12} color="#D7D1E9" /> }];

const App = () => (
  <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
    <Menu
      menuStyle={{ backgroundColor: '#8973CD' }}
      button={() => <Icon name="plus" type="ant-design" size={30} color="#8973CD" />}
      labelStyle={{ color: '#D7D1E9' }}
      dividerColor="#EDEAF8"
      items={MenuData}
    />
  </View>
);

export default App;

Props

Prop name	Type	Required	Description
items	Array<{label:string, left?: React.ReactNode, right?:React.ReactNode, onPress ?: ()=>void}>	Yes	Items to be listed in the menu.
containerStyle	StyleProp<ViewStyle>	No	Additional styles to apply to the menu container.
labelStyle	StyleProp<TextStyle>	No	Additional styles to apply to the label text.
rowStyle	StyleProp<TextStyle>	No	Additional styles to apply to the row container.
dividerColor	string	No	Color of divider.
menuStyle	StyleProp<ViewStyle>	No	Additional styles to apply to the menu.
button	(isOpen: boolean)=> React.ReactNode	No	This button opens the menu. It also returns whether the menu is open or closed.
closeOnPress	boolean	No	Indicates that it should close when an option is selected
theme	UITheme	No	The theme to use for the component.
typography	UITypography	No	The typography to use for the component.