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>
);
}