react-native-material-dropdown

Material dropdown with consistent behaviour on iOS and Android This fork contain a fix for the dropdown icon

Features

• Easy to use
• Consistent look and feel on iOS and Android
• Customizable font size, colors and animation duration
• Dynamic dropdown size and position
• Configurable visible item count
• RTL support
• Pure javascript implementation

Installation

1npm install --save react-native-material-dropdown-v2-fixed

Usage

1import React, { Component } from 'react';
2import { Dropdown } from 'react-native-material-dropdown-v2-fixed';
3
4class Example extends Component {
5  render() {
6    let data = [{
7      value: 'Banana',
8    }, {
9      value: 'Mango',
10    }, {
11      value: 'Pear',
12    }];
13
14    return (
15      <Dropdown
16        icon='chevron-down'
17        iconColor='#E1E1E1'
18        label='Favorite Fruit'
19        data={data}
20      />
21    );
22  }
23}

Properties

name	description	type	default
label	Text field label text	String	-
error	Text field error text	String	-
icon	Text field right icon	String	chevron-down
animationDuration	Text field animation duration in ms	Number	225
fontSize	Text field font size	Number	16
labelFontSize	Text field label font size	Number	12
baseColor	Text field base color	String	rgba(0, 0, 0, .38)
textColor	Text field text color	String	rgba(0, 0, 0, .87)
iconColor	Text field icon color	String	rgba(0, 0, 0, 1)
itemColor	Dropdown item text color (inactive item)	String	rgba(0, 0, 0, .54)
selectedItemColor	Dropdown item text color (active item)	String	rgba(0, 0, 0, .87)
disabledItemColor	Dropdown item text color (disabled item)	String	rgba(0, 0, 0, .38)
dropdownPosition	Dropdown position (dynamic if undefined)	Number	-
itemCount	Dropdown visible item count	Number	4
itemPadding	Dropdown item vertical padding	Number	8
itemTextStyle	Dropdown item text styles	Object	-
dropdownOffset	Dropdown offset	Object	{ top: 32, left: 0 }
dropdownMargins	Dropdown margins	Object	{ min: 8, max: 16 }
data	Dropdown item data	Array	[]
value	Selected value	String	-
containerStyle	Styles for container view	Object	-
overlayStyle	Styles for overlay view	Object	-
pickerStyle	Styles for item picker view	Object	-
shadeOpacity	Shade opacity for dropdown items	Number	0.12
rippleOpacity	Opacity for ripple effect	Number	0.54
rippleInsets	Insets for ripple on base component	Object	{ top: 16, bottom: -8 }
rippleCentered	Ripple on base component should be centered	Boolean	false
renderBase	Render base component	Function	-
renderAccessory	Render text field accessory	Function	-
valueExtractor	Extract value from item (args: item, index)	Function	({ value }) => value
labelExtractor	Extract label from item (args: item, index)	Function	({ label }) => label
propsExtractor	Extract props from item (args: item, index)	Function	() => null
onChangeText	Selection callback (args: value, index, data)	Function	-

Other TextField, TextInput and TouchableWithoutFeedback properties will also work

Methods

name	description	returns
focus()	Acquire focus (open dropdown)	-
blur()	Release focus (close dropdown)	-
value()	Get current value	String
selectedIndex()	Get selected index	Number
selectedItem()	Get selected item	Object
isFocused()	Get current focus state	Boolean

Example

1git clone https://github.com/mdslab87/react-native-material-dropdown
2cd react-native-material-dropdown/example
3npm install
4npm run ios # or npm run android

Copyright and License

BSD License

Copyright 2017-2018 Alexander Nazarov. All rights reserved.