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
name | description |
---|---|
type |
'date' or 'time' (default 'date' ) |
value | the current date (required) |
onChangeDate | called when the date has changed (required) |
disabled | equivalent to the TouchableRipple disabled prop and the TextInput disabled prop |
onFocus | equivalent to the TouchableRipple onFocus prop |
onBlur | equivalent to the TouchableRipple onBlur prop |
style | all properties except flexGrow, alignSelf, and margins are applied to the inner TextInput; flexGrow, alignSelf, and margins are applied to the outer TouchableRipple |
theme | equivalent to the TouchableRipple theme prop and the TextInput theme prop |
editable | if false, clicking on the component has no effect (default true ) |
borderless | equivalent to the TouchableRipple borderless prop |
background | equivalent to the TouchableRipple background prop |
centered | equivalent to the TouchableRipple centered prop |
rippleColor | equivalent to the TouchableRipple rippleColor prop |
underlayColor | equivalent to the TouchableRipple underlayColor prop |
touchableStyle | all properties except flexGrow, alignSelf, and margins are applied to the outer TouchableRipple |
mode | equivalent to the TextInput mode prop |
label | equivalent to the TextInput label prop |
error | equivalent to the TextInput error prop |
selectionColor | equivalent to the TextInput selectionColor prop |
underlineColor | equivalent to the TextInput underlineColor prop |
activeUnderlineColor | equivalent to the TextInput activeUnderlineColor prop |
outlineColor | equivalent to the TextInput outlineColor prop |
activeOutlineColor | equivalent to the TextInput activeOutlineColor prop |
dense | equivalent to the TextInput dense prop |
iconColor | equivalent to the TextInput.Icon color prop |
iconStyle | equivalent to the TextInput.Icon style prop |
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>
);
}