@hashiprobr/react-native-paper-datetimepicker v1.2.0

react-native-paper-datetimepicker

A React Native Paper TextInput for picking date or time

• In Android and iOS, the DateTimePicker component is a non-editable TextInput wrapped by a TouchableRipple. When the touchable is clicked, the component uses Matteo Mazzarolo's react-native-modal-datetime-picker to change the input value. The code was heavily inspired by Fateh Farooqui's react-native-paper-dropdown and my own fork of it.

• In the web, the DateTimePicker component is a date input or time input wrapped by a TextInput. The value can be either typed or chosen from a popup.

  

Peer dependencies

{
    "@react-native-community/datetimepicker": "6.1.2",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-modal-datetime-picker": "13.1.2",
    "react-native-paper": "4.12.3"
}

Install

With npm:

npm install @hashiprobr/react-native-paper-datetimepicker

With yarn:

yarn add @hashiprobr/react-native-paper-datetimepicker

If using Expo, add the module to webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: [
                '@hashiprobr/react-native-paper-datetimepicker',
            ],
        },
    }, argv);
    return config;
};

If webpack.config.js does not exist, create it with:

expo customize:web

Props

Example

import React, { useState } from 'react';

import { View } from 'react-native';

import { Provider } from 'react-native-paper';

import { DateTimePicker } from '@hashiprobr/react-native-paper-datetimepicker';

export default function MyComponent() {
    const [date, setDate] = useState(new Date());

    return (
        <Provider>
            <View>
                <DateTimePicker
                    type="date"
                    value={date}
                    onChangeDate={setDate}
                />
            </View>
        </Provider>
    );
}