React-native-material-dropdown-dgjoy NPM

react-native-material-dropdown

Material dropdown with consistent behaviour on iOS and Android

example

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