Module not found: Can't resolve './picker' with React Native DateTimePicker - react-native

Question

I would like to have a date input field in a react-native form and I installed React Native DateTimePicker with the command: expo install #react-native-community/datetimepicker
To get started I used the following component almost exactly as described in the documentation:
import DateTimePicker from '#react-native-community/datetimepicker';
import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
export default function Picker () {
const [date, setDate] = useState(new Date(1598051730000));
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate;
setShow(false);
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
};
return (
<View>
<View>
<Button onPress={showDatepicker} title="Show date picker!" />
</View>
<View>
<Button onPress={showTimepicker} title="Show time picker!" />
</View>
<Text>selected: {date.toLocaleString()}</Text>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={date}
mode={mode}
is24Hour={true}
onChange={onChange}
/>
)}
</View>
);
}
Then imported in another component.
However I get the following error:
./node_modules/#react-native-community/datetimepicker/src/DateTimePickerAndroid.js:23
Module not found: Can't resolve './picker'
21 | validateAndroidProps,
22 | } from './androidUtils';
> 23 | import pickers from './picker';
24 |
25 | function open(props: AndroidNativeProps) {
26 | const {
./node_modules/#react-native-community/datetimepicker/src/androidUtils.js:6
Module not found: Can't resolve './picker'
4 | */
5 | import {ANDROID_DISPLAY, ANDROID_MODE, MIN_MS} from './constants';
> 6 | import pickers from './picker';
7 | import type {AndroidNativeProps, DateTimePickerResult} from './types';
8 | import {sharedPropsValidation} from './utils';
9 | import invariant from 'invariant';

Answer 1

This error shows up when importing this package in the web version of react-native. Since the picker doesn't work on web anyway the easiest workaround is to not import it on web.
The way to do that is to create a separate file for native code. If you have a DateTimePicker.jsx file then rename it to DateTimePicker.native.jsx, then create a new file named DateTimePicker.jsx with the content:
export default function Picker() {
return <Text>Picker does not work on web.</Text>
}
Now you can import DateTimePicker from "DateTimePicker" and the android/ios version will import the picker, while on web you will get the noop version.

Answer 2

Try to back version to 6.0.2
Seems it is the actual issue for some people: https://github.com/react-native-datetimepicker/datetimepicker/issues/626
UPD:
I've tried to run your example and it works. My package.json:
"dependencies": {
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-web": "0.17.7",
"#react-native-community/datetimepicker": "6.1.2"
},
If it won't help, try to reinstall node_modules and clear cash: https://facebook.github.io/metro/docs/troubleshooting/