react-native-slide-modal-picker
v1.2.1
Published
A convenient cross-platform picker component
Downloads
202
Readme
SlideModalPicker
A nice little wrapper for pickers. On iOS, they slide up from the bottom, and on Android the dialogs appear like normal. Only needs one implementation. Should save you some trouble.
Here's a link to the Github, you can look through files and stuff there: https://github.com/philipshen/react-native-slide-modal-picker
Usage
Note: When testing the parent component in enzyme, refer to this as "ModalPicker" (e.g. wrapper.find('ModalPicker')
)
Example
Like always, do yarn add react-native-slide-modal-picker
or npm install react-native-slide-modal-picker --save
Then just go ahead and use it like so. Here's an example of a date and time picker:
import React, { Component } from 'react';
import {
View,
Button
} from 'react-native';
import Picker from 'react-native-slide-modal-picker'
export default class App extends Component {
_datetimePicker;
constructor(props) {
super(props);
this.state = {
date: new Date(),
}
}
render() {
const { date } = this.state;
const datestring = `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}, ${date.getHours()}:${date.getMinutes()}`;
return (
<View>
<Button style={{marginTop: 50}}
title={datestring}
onPress={() => this._datetimePicker.togglePicker()}
/>
<Picker
type={"datetime"}
initialValue={date}
onValueChange={(val) => {
this.setState({date: val});
}}
ref={ref => (this._datetimePicker = ref)}
/>
</View>
);
}
}
That's all you need to implement it.
Here are some gifs so you get a feel for what it's like. It's the same code here for both iOS and Android; you can find it on Github here (link). It's highly customizable, so don't mind the ugliness. You can observe the default styles in the time picker (iOS) or anywhere (Android).
Props
type: "time"|"date"|"datetime"|picker
The type of picker, and the only required prop. Regular "picker" doesn't support Android.
pickerItems: string[]
For normal pickers only
initialValue: string
for "picker", else Date
By default, either the first item in pickerItems
or the current date (depending on the type
)
onValueChange: (val) => void
When a new date is selected.
- Android only
androidPickerCellStyle: object
The style of the individual cell of the regular Android picker
androidPickerCellTextStyle: object
The style of the text in the cells of the regular Android picker
- IOS only
style: object
Style of the actual picker
title: string
titleStyle: object
padding: number
Just in case for whatever reason the modal' position isn't right (it should have a marginTop equal to the height of the screen), you can use this to change the padding.
The following are all the same as DatePickerIOS:
maximumDate: Date
minimumDate: Date
minuteInterval: 1|2|3|4|5|6|10|12|15|20|30
timeZoneOffsetInMinutes: number
locale: string