# react-native-bottom-select-picker

> A React Native library that provides a customizable Picker component for React Native applications.

Latest version **0.1.2** (published 2024-04-08) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2024-04-08 |
| First published | 2023-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 2 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huukhuong |
| Maintainers | kayden.khuong |
| Keywords | react-native, ios, android, menu, components, material, dropdown, lazy loading, load more, elements, multiselect, picker, select, bottom, bottom select, bottom picker, bottom select picker, bottom picker select |

## Links

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

## Dependencies (2)

- [expo](https://npm.io/package/expo.md) ^49.0.7
- [react-native-modal](https://npm.io/package/react-native-modal.md) ^13.0.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.1.2 (latest) — 2024-04-08
- 0.1.1 — 2024-04-08
- 0.1.0 — 2024-04-08
- 0.0.2 — 2023-08-10
- 0.0.1 — 2023-08-10

## README

# react-native-bottom-select-picker

React Native Bottom Select Picker is a library that provides a customizable Picker component for React Native applications. <br />
This library simplifies the process of creating picker menus and provides a variety of options to customize the picker

# Getting started

```
npm install react-native-bottom-select-picker
```

or

```
yarn add react-native-bottom-select-picker
```

## Linking

```
cd ios && pod install
```

# Picker Props

| #   | Prop              | Params                                 | isRequired | Description                                                                                |
| --- | ----------------- | -------------------------------------- | ---------- | ------------------------------------------------------------------------------------------ |
| 1   | data              | PickerItem[]                           | true       | { label: string, value: string }                                                           |
| 2   | value             | String                                 | true       | Default value                                                                              |
| 3   | onChange          | (value: string) => void                | true       | Selection callback                                                                         |
| 4   | placeholder       | String                                 | true       | The string that will be rendered before picker has been selected, and show in header title |
| 5   | search            | Boolean                                | no         | Show search input in picker modal                                                          |
| 6   | searchPlaceholder | String                                 | no         | Placeholder in TextInput search                                                            |
| 7   | disable           | Boolean                                | no         | Specifies the disabled state of the Picker                                                 |
| 8   | containerStyle    | ViewStyle                              | no         | Styling for container Picker                                                               |
| 9   | containerTextStyle| TextStyle                              | no         | Styling for container text Picker                                                          |
| 10  | renderArrow       | (pickerShown) => ReactNode             | no         | Custom arrow icon                                                                          |
| 11  | closeIcon         | () => ReactNode                        | no         | Custom close icon modal header                                                             |
| 12  | renderItem        | ({ item, isSelected }) => ReactElement | no         | Custom render item in list modal                                                           |
| 13  | multiple          | boolean                                | no         | Multiple select values                                                                     |

# Picker Example

<div style="display: flex; gap: 5px;">
  <img src="./example/assets/1.png" style="height: 300px" />
  <img src="./example/assets/2.png" style="height: 300px" />
  <img src="./example/assets/3.png" style="height: 300px" />
  <img src="./example/assets/4.png" style="height: 300px" />
</div>

```jsx

const data: PickerItem[] = [
  {
    label: 'Apple',
    value: 'Apple',
  },
  {
    label: 'Orange',
    value: 'Orange',
  },
  ...
];
```

## Simple Picker
<img src="./example/assets/2.png" style="height: 300px" />

```jsx
import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [value, setValue] = useState<string>('');

<View>
  <Text>Simple Picker</Text>
  <Picker
    placeholder={'Select your favorite color'}
    data={data}
    value={value}
    onChange={setValue}
  />
</View>;
```

## Picker with search
<img src="./example/assets/3.png" style="height: 300px" />

```jsx
import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [value, setValue] = useState<string>('');

<View>
  <Text>Picker with search</Text>
  <Picker
    placeholder={'Select your favorite fruit'}
    data={data}
    value={value}
    onChange={setValue}
    search
  />
</View>;
```

## Picker disabled
<img src="./example/assets/1.png" style="height: 300px" />

```jsx
import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [value, setValue] = useState<string>('');

<View>
  <Text>Picker disabled</Text>
  <Picker
    placeholder={'Select your favorite fruit'}
    data={data}
    value={value}
    onChange={setValue}
    disable
  />
</View>;
```

## Picker with multiple item choices
<img src="./example/assets/4.png" style="height: 300px" />
<img src="./example/assets/5.png" style="width: 300px" />

```jsx
import { Picker, type PickerItem } from 'react-native-bottom-select-picker';

const [multipleValue, setMultipleValue] = useState<string[]>([]);

<View>
  <Text>Picker with multiple item choices</Text>
  <Picker
    placeholder={'Select your favorite fruits'}
    data={data}
    value={multipleValue}
    onChange={setMultipleValue}
    multiple
  />
</View>
```

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