react-native-material-dropdown-dgjoy
v0.1.6
Published
Material dropdown
Downloads
33
Maintainers
Readme
react-native-material-dropdown
Material dropdown with consistent behaviour on iOS and Android
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
- Pure javascript implementation
Installation
npm install --save react-native-material-dropdown
Usage
import React, { Component } from 'react';
import { Dropdown } from 'react-native-material-dropdown';
class Example extends Component {
render() {
let data = [{
value: 'Banana',
}, {
value: 'Mango',
}, {
value: 'Pear',
}];
return (
<Dropdown
label='Favorite Fruit'
data={data}
/>
);
}
}
Properties
name | description | type | default :----------------- |:--------------------------------------------- | --------:|:------------------ label | Text field label text (required) | String | - error | Text field error text | String | - 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) itemColor | Dropdown item text color (inactive items) | String | rgba(0, 0, 0, .54) textColor | Dropdown item text color (active item) | String | rgba(0, 0, 0, .87) itemCount | Dropdown visible item count | Number | 4 data | Dropdown item data | Object | - value | Selected value | String | - containerStyle | Styles for container view | Object | - onChangeText | Selection callback (args: value, index, data) | Function | -
Other TextField and TextInput 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
git clone https://github.com/n4kz/react-native-material-dropdown
cd react-native-material-dropdown/example
npm install
npm run ios # or npm run android
Copyright and License
BSD License
Copyright 2017 Alexander Nazarov. All rights reserved.