Demo

iOS | Android :--- | :--- |

You can try the demo app here.

Installation

npm install @tele2/react-native-select-input --save

Usage

import React, { Component } from 'react';
import SelectInput from '@tele2/react-native-select-input';

class MyComponent extends Component {
  render() {
    <SelectInput
      options={[{
        value: 'my-option-value',
        label: 'My option label',
      }]}
    />
  }
}

export default MyComponent;

You can see more examples in the example app.

API

Property | Type | Required | Default value | Description :--- | :--- | :--- | :--- | :--- label|string|no|null|Label to be shown on the top of the input. placeholder|string|no|string|Placeholder to be shown if the input has no value. done|string|no|string|String that shows on the header of the select input in iOS. value|string/number|no|null|Current input value. options|arrayOf|yes|Check here|Options available to be selected. disabled|bool|no|false|Whether the input is disabled or not. loading|bool|no|false|Whether the input is on loading state or not. colors|shape|no|Check here|Colors to easily personalize the input. onChange|function|no|null|Function to be called whenever the input value is changed. renderLabel|function|no|null|Function to render a custom label. labelProps|object|no|null|Props to be passed to the label <Text /> component. valueProps|object|no|null|Props to be passed to the value <Text /> component. renderArrowIcon|function|no|null|Function to render a custom arrow icon. labelStyle|custom|no|null|Custom label style. loadingContainerStyle|custom|no|null|Custom style for the loading container. valueContainerStyle|custom|no|null|Custom style for the value container. valueStyle|custom|no|null|Custom value style. containerStyle|custom|no|null|Custom style for the container of the input. innerContainerStyle|custom|no|null|Custom style for the inner container of the input. arrowIcon||no|null| testProperty|string|no|Property for setting a testID (iOS) / accessibilityLabel (Android) for testing|

License

MIT © Tele2 Netherlands.