react-native-menu-list
an alternative to react-native Picker component, cross-platform, iOS style menu for react-native.
Preview
Installation
npm install --save react-native-menu-list
Properties
Prop | Optional | Default | Description | |
---|---|---|---|---|
data |
No | [] | array of items to be shown in menu list | |
onChange |
Yes | () => {} | callback function, when the users has selected an option | |
keyExtractor |
Yes | (data) => data.key | ||
labelExtractor |
Yes | (data) => data.label | ||
firstTitleText |
Yes | Tap Top Open! |
text that is shown on the button before selection | |
style |
Yes | style | style of main container | |
itemButtonStyle |
Yes | style | . | |
itemButtonTextStyle |
Yes | style | . | |
itemStyle |
Yes | style | . | |
itemTextStyle |
Yes | style | . | |
itemContainerStyle |
Yes | style | . | |
childrenViewStyle |
Yes | style | . | |
openButtonStyle |
Yes | style | . | |
closeContainerStyle |
Yes | style | . | |
closeStyle |
Yes | style | . | |
closeTextStyle |
Yes | style | . | |
closeText |
Yes | Close |
text of the close button. | |
disabled |
Yes | false | menu is not able to show up if disabled is set to true . |
|
selectedKey |
Yes | '' | Key of item to be selected on start up |
Example
Component data = id: 0 name: "item 1" id: 1 name: "item 2" id: 0 name: "item 3" id: 1 name: "item 4" id: 0 name: "item 5" id: 1 name: "item 6" ; data2 = number: 0 label: "item 1" number: 1 label: "item 2" number: 0 label: "item 3" number: 1 label: "item 4" number: 0 label: "item 5" number: 1 label: "item 6" ; { return <View> <MenuList data=thisdata /> <MenuList data=thisdata2 keyExtractor= itemnumber labelExtractor= itemlabel /> </View> ; }