React-native-slide-modal-picker NPM

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.