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 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';
...
<ScrollPicker
// We need to tell the picker the current picked value
currentValue={pickedValue}
// The picker is a pure component so we need to tell it
// what data it needs to subscribe to, otherwise it won't
// re-render
extraData={pickedValue}
// The array of objects which makes up the list
list={MOCK_DATA}
// Callback function to update the picked value
onItemPress={setPickedValue}
// Changes the text color in the list
labelColor="blue"
// Changes color of the row separator in the list
separatorColor="purple"
// Changes color of the text of the picked item in the list
selectedColor="red"
/>
...
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 (
<View style={styles.Container}>
<Text style={styles.Title}>Basic Example</Text>
<Text>Current Value Picked: {pickedValue}</Text>
<View style={styles.PickerContainer}>
<ScrollPicker
currentValue={pickedValue}
extraData={pickedValue}
list={MOCK_DATA}
onItemPress={setPickedValue}
/>
</View>
<Text style={{fontSize: 22, textAlign: 'center'}}>
We can customize the look by setting the labelColor, separatorColor and
selectedColor props
</Text>
<View style={styles.PickerContainer}>
<ScrollPicker
// We need to tell the picker the current picked value
currentValue={pickedValue}
// The picker is a pure component so we need to tell it
// what data it needs to subscribe to, otherwise it won't
// re-render
extraData={pickedValue}
// The array of objects which makes up the list
list={MOCK_DATA}
// Callback function to update the picked value
onItemPress={setPickedValue}
// Changes the text color in the list
labelColor="blue"
// Changes color of the row separator in the list
separatorColor="purple"
// Changes color of the text of the picked item in the list
selectedColor="red"
/>
</View>
</View>
);
}
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
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 (
<View style={styles.Container}>
...
<RBSheet
ref={refRBSheet}
closeOnDragDown={true}
closeOnPressMask={true}
height={300}
customStyles={{
draggableIcon: {
backgroundColor: '#000',
},
container: {
borderRadius: 12,
},
}}>
{/* 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.
*/}
<View style={styles.SheetView}>
<ScrollPicker
// We need to tell the picker the current picked value
currentValue={pickedValue}
// The picker is a pure component so we need to tell it
// what data it needs to subscribe to, otherwise it won't
// re-render
extraData={pickedValue}
// The array of objects which makes up the list
list={MOCK_DATA}
// Callback function to update the picked value
onItemPress={setPickedValue}
/>
</View>
{/* End of Scroll Picker */}
</RBSheet>
</View>
);
}
const styles = StyleSheet.create({
... see the example file for styles ...
});
export default BottomSheetExample;