# react-native-default-select

> a react native select component showed as select in safari in ios and showed as android way in android

Latest version **1.0.16** (published 2016-07-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-default-select
pnpm add react-native-default-select
yarn add react-native-default-select
bun add react-native-default-select
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2016-07-27 |
| First published | 2016-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | zhaotai |
| Maintainers | zhaotai |
| Keywords | react, native, select |

## Links

- npm: https://www.npmjs.com/package/react-native-default-select
- Repository: https://github.com/zhaotai/react-native-select
- Homepage: https://github.com/zhaotai/react-native-select#readme
- Issues: https://github.com/zhaotai/react-native-select/issues
- npm.io page: https://npm.io/package/react-native-default-select

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.16 (latest) — 2016-07-27
- 1.0.15 — 2016-07-18
- 1.0.14 — 2016-07-18
- 1.0.13 — 2016-06-30
- 1.0.11 — 2016-06-08
- 1.0.10 — 2016-06-01
- 1.0.9 — 2016-05-26
- 1.0.8 — 2016-04-18
- 1.0.7 — 2016-04-18
- 1.0.6 — 2016-03-28
- 1.0.5 — 2016-03-24
- 1.0.4 — 2016-03-18
- 1.0.3 — 2016-03-18
- 1.0.2 — 2016-03-18
- 1.0.1 — 2016-03-18
- … 1 more at https://npm.io/package/react-native-default-select/versions

## README

## Introduction

This is a select component simulating the select input in safari and show as a default way in android.

It will automatically show the current option and if you tap it, there will be a picker.

In IOS, the picker will show from the bottom of the screen, and cover all other views. I used Modal inside to simulate this.

In android, the picker just shows as the android`s default.

**If you have some suggestions to me. I`m glad to receive your message.**

## How to use

	npm install react-native-default-select

and import it to your code

	import Select from 'react-native-default-select'
And then you can use it.

## Props

* **options:** Required

``` javascript
var options = {
	key1: {
		label: 'label1',
		xx: {},
		xxx: {}
	},
	key2: {
		label: 'label2',
		xx: {},
		xxx: {}
	}
}

```

> options is the structrue to pass to the PickerIOS and Picker. So the structure is kind of similar to PickerIOS. You need to pass an object with sorts of keys to identify the options. And in each of the key object, one field is nessarrary, it is 'label'. The 'label' is the word of the option you want to show and the others are content of this option.

* **selectedKey:** Optional

> **selectedKey** is the one of the key in options representing the default option.If you don\`t use this prop, the default option is nothing.

* **onChange:<Function>** Required

> **onChange(key)** is a callback function with parameter 'key'. It will expose the selected key of the option to you so that you can do more things.

* **style:** Optional

> **style** will be passed to View as its style, you can customize style of the View

* **doneLabel** Optional

> **doneLabel** will replace the default Chinese label '完成'.

* **doneLabelColor** Optional

> **doneLabelColor** changes the color on the doneLabel. Default is black if no color is set.

* **labelStyle:** Optional

> **labelStyle** will be passed to the control label of the input, you can customize the font, color etc..

* *others:* Optional

> You can also pass other props included in View, it will be automatically append the View props.
	For example: accessibilityLabel, accessible

## Example

``` js
var CAR_MAKES_AND_MODELS = {
  amc: {
    label: 'AMC',
    models: ['AMX', 'Concord', 'Eagle', 'Gremlin', 'Matador', 'Pacer'],
  },
  alfa: {
    label: 'Alfa-Romeo',
    models: ['159', '4C', 'Alfasud', 'Brera', 'GTV6', 'Giulia', 'MiTo', 'Spider'],
  },
  aston: {
    label: 'Aston Martin',
    models: ['DB5', 'DB9', 'DBS', 'Rapide', 'Vanquish', 'Vantage'],
  }
};

class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carMake: 'alfa'
    };
  }

  render() {
    return (
      <View style={{height: 600, paddingTop: 20}}>
        <ScrollView>
          <Select models={CAR_MAKES_AND_MODELS}
                  selectedKey={'alfa'}
                  onChange={(key) => this.setState({carMake: key})}
          />
          <View><Text>12345678</Text></View>
          <View><Text>12345678</Text></View>
          <View><Text>12345678</Text></View>
        </ScrollView>
      </View>
    )
  }
}

```

---
_Source: https://npm.io/package/react-native-default-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._