Module not found: Can't resolve './picker'

Expo SDK
1

Please provide the following:

  1. SDK Version: 46
  2. Platforms(Android/iOS/web/all): all
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

When I am using DateTimePicker from GitHub - react-native-datetimepicker/datetimepicker: React Native date & time picker component for iOS, Android and Windows as given in (DateTimePicker - Expo Documentation)
I am getting 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';
2

hmmm… it looks like their example has some issues. However, I did not run into the error you’re getting.

I did get something weird, though. I had an existing SDK-46 test app and I used expo install @react-native-community/datetimepicker to install the DateTime picker (as per the Expo documentation.) I believe with Expo SDK 46 we’re now supposed to use npx expo install instead of the global expo command. Maybe that’s why I ran into some problems initially.

When I tried running npx expo start I got some “expo doctor”-like complaints about package versions, including the version of @react-native-community/datetimepicker!
After I ran expo-cli doctor --fix-dependencies those warnings went away.

I managed to get the example code working by making some changes. See the modified example below:

import { useState } from 'react';
import { Button, Text, View } from 'react-native';
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';

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

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate;
    setDate(currentDate);
  };

  const showMode = (currentMode) => {
    DateTimePickerAndroid.open({
      value: date,
      onChange,
      mode: currentMode,
      is24Hour: true,
    });
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <View style={{ flex: 1, justifyContent: "space-around", marginTop: 20 }}>
      <Button onPress={showDatepicker} title="Show date picker!" />
      <Button onPress={showTimepicker} title="Show time picker!" />
      <Text>selected: {date.toLocaleString()}</Text>
    </View>
  );
}

I made a few changes along the way, but in the end it was just the import that I needed to change:

import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
3

My Expo just started to not find an unamed dependency and cant start, this sucks a lot

4

@dverde.ribeiro does your problem have anything to do with DateTimePicker? You’re going to have to provide more information if you want help with your problem.

5

Sorry it doesn’t have specifically to do with DatePicker

6

I tried non Android version example.
And the error is causing web version to break

7

I’ve just tried it now… That one also has issues. I wonder if they’ve actually tried their examples recently.

This works for me on Android:

import { useState } from 'react';
import { Button, Platform, Text, View } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
  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) => {
    if (Platform.OS === 'android') {
      setShow(false);
      // for iOS, add a button that closes the picker
    }
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
    setShow(true);
  };

  const showTimepicker = () => {
    showMode('time');
    setShow(true);
  };

  return (
    <View style={{ flex: 1, justifyContent: "space-around", marginTop: 20 }}>
      <Button onPress={showDatepicker} title="Show date picker!" />
      <Button onPress={showTimepicker} title="Show time picker!" />
      <Text>selected: {date.toLocaleString()}</Text>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          onChange={onChange}
        />
      )}
    </View>
  );
};

If you try that on Web you’ll get the following warning in the browser’s console:

DateTimePicker is not supported on: web

8

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.