react-native-datepicker-nougat v0.1.1

react-native-datepicker-nougat

A declarative cross-platform react-native datetime-picker.

Description

This library exposes a cross-platform interface for showing the native date and time pickers inside a modal.
You will have an unified user experience, you won't have to worry anymore about testing the device platform and you won't have to programmatically call the Android TimePicker/DatePicker APIs.

Setup

This library is available on npm, install it with npm install --save react-native-datepicker-nougat or yarn add react-native-datepicker-nougat.

Link Library

Run react-native link rn-datepicker-nougat-spinner-fix

Manual

Follow how to manually link a library here https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content

Usage

import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker from 'react-native-datepicker-nougat';

export default class DateTimePickerTester extends Component {
  state = {
    isDateTimePickerVisible: false,
  };

  _showDateTimePicker = () => this.setState({ isDateTimePickerVisible: true });

  _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false });

  _handleDatePicked = (date) => {
    console.log('A date has been picked: ', date);
    this._hideDateTimePicker();
  };

  render () {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showDateTimePicker}>
          <Text>Show TimePicker</Text>
        </TouchableOpacity>
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
        />
      </View>
    );
  }

}

Available props

All the DatePickerIOS props are also supported!

Notes

Just remember to always set the isVisible prop to false in both onConfirm and onCancel (like in the example above).

Under the hood this library is using react-native-modal for the iOS modal implementation.

Pull requests and suggestions are welcome!