Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ugglr/react-native-value-picker
Cross-Platform iOS(ish) style picker for react native.
https://github.com/ugglr/react-native-value-picker
android javascript npm npm-package npmjs package picker react react-component react-components react-hooks react-native react-native-component yarn yarn-package
Last synced: 4 months ago
JSON representation
Cross-Platform iOS(ish) style picker for react native.
- Host: GitHub
- URL: https://github.com/ugglr/react-native-value-picker
- Owner: ugglr
- License: mit
- Created: 2020-05-07T03:19:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-21T04:54:34.000Z (12 months ago)
- Last Synced: 2024-09-30T17:30:57.457Z (4 months ago)
- Topics: android, javascript, npm, npm-package, npmjs, package, picker, react, react-component, react-components, react-hooks, react-native, react-native-component, yarn, yarn-package
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-value-picker
- Size: 15.9 MB
- Stars: 20
- Watchers: 2
- Forks: 3
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-value-picker
Cross-Platform iOS style picker for react native.
Small, Performant
The Native picker on Android is a modal / dropdown design which is vastly different from the native iOS picker. In my current project we wanted a design more similar to the iOS native picker, and thus I created this Scroll Picker as a replacement on Android, but it works equally well on iOS for instance as an alternative to [@react-native-community/picker](https://github.com/react-native-community/react-native-picker) native iOS picker module.
### Examples
| Basic Example | Bottom Sheet Example |
| -------------------------------------------- | ---------------------------------------------------------- |
|  |  |
### Install into project
```
yarn add react-native-value-picker
```
**import and usage**
```
import {ScrollPicker} from 'react-native-value-picker';
...
...
```
**Picker List Data Structure**
the list prop requires an array of Objects according to the below structure.
- value: the API value
- label: the text rendered into the picker list.
```
export const MOCK_DATA = [
{
value: 1,
label: 'Number 1',
},
{
value: 2,
label: 'Number 2',
},
{
value: 15,
label: 'Number 15',
},
{
value: 16,
label: 'Number 16',
},
];
```
### Run the examples Locally
Clone project
```
git clone https://github.com/ugglr/react-native-value-picker.git
```
move into the examples folder.
```
cd react-native-value-picker && cd examples
```
in examples root
```
yarn
```
**iOS**
Install pods and go back to examples root
```
cd ios && pod install && cd ..
```
Run react native
```
yarn run ios
```
**Android**
run react native in examples root
```
yarn run android
```
### ScrollPicker Props
| Prop | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `currentValue` | Tells the picker the current picked value |
| `extraData` | The underlying RN component which creates the list is FlatList. Which means, as a FlatList it is a pure component and won't re-render, unless it subscribes to a piece of data that will trigger a re-render. |
| `list` | The array of objects which makes up the list. Each Object in the Array needs to have a value-field, and a label-field. Value is the API value which the developer needs to user to pick. Label is the verbose friendly String which is displayed to the user. |
| `onItemPress` | Callback which get's executed when user presses an Item in the picker list. |
| `labelColor` | Changes the un-picked text color of the Items in the list |
| `separatorColor` | Changes color of the separator lines between the Items in the list. |
| `selectedColor` | Changes the picked Item text color |
### Example Code
**BasicExample.js**
```
import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {ScrollPicker} from 'react-native-value-picker';
import {MOCK_DATA} from './mockData';
function BasicExample() {
const [pickedValue, setPickedValue] = useState(7);
return (
Basic Example
Current Value Picked: {pickedValue}
We can customize the look by setting the labelColor, separatorColor and
selectedColor props
);
}
const styles = StyleSheet.create({
... see example file for styles ...
});
export default BasicExample;
```
**Bottom Sheet Example**
> Note:
> The bottom sheet component is not included in the package. I'm using [react-native-raw-bottom-sheet](https://github.com/nysamnang/react-native-raw-bottom-sheet)
```
import React, {useRef, useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import RBSheet from 'react-native-raw-bottom-sheet';
import {ScrollPicker} from 'react-native-value-picker';
import {MOCK_DATA} from './mockData';
function BottomSheetExample() {
const [pickedValue, setPickedValue] = useState(7);
const refRBSheet = useRef();
return (
...
{/* Start of Scroll Picker */}
{/*
The underlying FlatList is not wrapped with a View.
So to align it in the sheet I wrap the picker and control
the positioning. I like that approach because devs has full control
over how the picker is placed & aligned.
*/}
{/* End of Scroll Picker */}
);
}
const styles = StyleSheet.create({
... see the example file for styles ...
});
export default BottomSheetExample;
```