# react-native-smart-picker

> React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android

Latest version **1.0.5** (published 2019-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-smart-picker
pnpm add react-native-smart-picker
yarn add react-native-smart-picker
bun add react-native-smart-picker
```

## 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.5 |
| Published | 2019-05-24 |
| First published | 2017-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Paul McBride |
| Maintainers | thepaulmcbride |
| Keywords | react-component, react-native, ios, android, toggle, picker, select |

## Links

- npm: https://www.npmjs.com/package/react-native-smart-picker
- Repository: https://github.com/thepaulmcbride/react-native-smart-picker
- Homepage: https://github.com/thepaulmcbride/react-native-smart-picker#readme
- Issues: https://github.com/thepaulmcbride/react-native-smart-picker/issues
- npm.io page: https://npm.io/package/react-native-smart-picker

## Dependencies (1)

- [react-native-togglebox](https://npm.io/package/react-native-togglebox.md) 1.0.3

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-05-24
- 1.0.4 — 2017-12-04
- 1.0.3 — 2017-12-04
- 1.0.2 — 2017-07-20
- 1.0.1 — 2017-07-20
- 1.0.0 — 2017-07-20

## README

# react-native-smart-picker
React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android.

* The `SmartPicker` scene should be wrapped in a `ScrollView` to allow the page to grow as the toggle opens
* Works on Android but there are no toggle effect (follows native UX guidelines)
* PRs welcome

## Demo

![Showtime](.github/react-native-toggle-picker.gif?raw=true "Showtime")

## Installation

```bash
npm i react-native-smart-picker --save
```

or

```bash
yarn add react-native-smart-picker --save
```

## Use

```javascript
import SmartPicker from 'react-native-smart-picker'

...

 this.state = {
            selected: "A",
           
        };

 handleChange(value: string) {
        this.setState({
            selected: value
        });
    }

<ScrollView style={"Your custom styles here"}>
  <View style={{flex: 1, marginTop: 20}}>
    <ScrollView style={styles.container}>
      <SmartPicker
        selectedValue={this.state.selected}
        label='Set you favorite country'
        onValueChange={this.handleChange.bind(this)}
      >
        <Picker.Item label='Austria' value='A' />
        <Picker.Item label='Czechia' value='CZ' />
        <Picker.Item label='Germany' value='DE' />
        <Picker.Item label='Poland' value='PL' />
        <Picker.Item label='Slovakia' value='SLO' />
      </SmartPicker>
    </ScrollView>
  </View>
</ScrollView>
```

## Props

|Prop name | Default prop | Required | Note
| --- | --- | --- | --- |
| `androidBoxStyle` | `{}` | - | Custom styles |
| `androidPickerTitle` | `true` | No | Enable or disable title in android picker box
| `androidPickerStyle` | `{}` | - | Custom styles |
| `androidPickerWrapperStyle` | `{}` | - | Custom styles |
| `androidBoxStyle` | `{}` | - | Custom styles |
| `arrowColor` | `rgb(178, 178, 178)` | - | - |
| `arrowSize` | `30` | - | - |
| `arrowDownType` | `'keyboard-arrow-down'` | - | Icon name from`react-native-vector-icons/MaterialIcons` |
| `arrowUpType` | `'keyboard-arrow-up'` | - | Icon name from`react-native-vector-icons/MaterialIcons` |
| `expanded` | `false` | - | Boolean if box should be expanded or not |
| `iosBoxStyle` | `{}` | - | Custom styles |
| `iosPickerStyle` | `{}` | - | Custom styles |
| `iosPickerWrapperStyle` | `{}` | - | Custom styles |
| `onValueChange` | - | Yes | Prop from RNPicker (expects func) |
| `label` | - | Yes | Left label on the left of title |
| `selectedValue` | - | Yes | Prop from RNPicker (expects any) |
| `value` | `null` | - | Value on the right title |

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