CODEWITHSUNDEEP
react-native
André
André

Reputation: 2020

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

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';

Upvotes: 0

Views: 727

Answers (2)

Reite
Reite

Reputation: 1667

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.

Upvotes: 2

Artem Avanesyan
Artem Avanesyan

Reputation: 56

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/

Upvotes: 0

Related Questions