Home

Awesome

React Native Dropdown

Simple DropDown menu for React Native App!

Introduction

React Native Dropdown is simple, customizable and easy to use dropdown in React Native. Works with both Android and IOS.

Installation

npm i react-native-dropdown --save

Usage

Require it inside your Javascript files. Also supporting components using object-deconstructing. Select Option OptionList, Also a positioning utility method updatePosition.

updatePosition should be called in componentDidMount with refs to the <Select /> component and <OptionList />.

This calculates component's PositionX and PositionY and sets it back into the component. The component uses it to position the <OptionList> using this co-ordinates.

Example

var React = require('react-native');
var {
  Component,
  AppRegistry,
  Text,
  View,
} = React;

const DropDown = require('react-native-dropdown');
const {
  Select,
  Option,
  OptionList,
  updatePosition
} = DropDown;

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      canada: ''
    };
  }

  componentDidMount() {
    updatePosition(this.refs['SELECT1']);
    updatePosition(this.refs['OPTIONLIST']);
  }

  _getOptionList() {
    return this.refs['OPTIONLIST'];
  }

  
  _canada(province) {

	this.setState({
      ...this.state,
      canada: province
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Select
            width={250}
            ref="SELECT1"
            optionListRef={this._getOptionList.bind(this)}
            defaultValue="Select a Province in Canada ..."
            onSelect={this._canada.bind(this)}>
            <Option>Alberta</Option>
            <Option>British Columbia</Option>
            <Option>Manitoba</Option>
            <Option>New Brunswick</Option>
            <Option>Newfoundland and Labrador</Option>
            <Option>Northwest Territories</Option>
            <Option>Nova Scotia</Option>
            <Option>Nunavut</Option>
            <Option>Ontario</Option>
            <Option>Prince Edward Island</Option>
            <Option>Quebec</Option>
            <Option>Saskatchewan</Option>
            <Option>Yukon</Option>
          </Select>

          <Text>Selected province of Canada: {this.state.canada}</Text>
          
          <OptionList ref="OPTIONLIST"/>
      </View>
    );
  }
}

AppRegistry.registerComponent('App', () => App);


For complete implementation checkout example folder.

Configuration

Select:
PropertyTypeDefaultDescription
widthnumber400Width of the selection
heightnumber50Height of the selection
optionListReffunctionrequiredReference to <OptionList /> to display the selection menu
styleobjectnullCustom styles to be applied if supplied
defaultValuestringfirst optionThe value to be displayed if none of the options are selected.
Option:
PropertyTypeDefaultDescription
styleobjectnullStyles to be applied on 'Option' component
styleTextobjectnullStyles to be applied on text inside of 'Option'

Demo

<p align="center"> <img src ="https://raw.githubusercontent.com/alinz/react-native-dropdown/master/dropdown.gif" /> </p>