How to use datetimepicker from react-native-community

Question

I'm building an app with a booking section. The booking section has a datetimepicker to, obviously, select a date and a time.

Searching in the web for this I found the @react-native-community/datetimepicker and installed via npm and copy and paste the example on their GitHub. However, when I run the app on expo start I got an error message:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of SceneView.

I don't know where is my error. Could anyone help me?

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

export const 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 || date;
    setShow(Platform.OS === 'ios');
    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>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}
    </View>
  );
};

Shahanshah Alam · Accepted Answer · 2021-02-23T09:31:53.763

1

use export default const App instead of export const App.

Please refer to this for more explanation.

edited Feb 23 '21 at 09:31

answered Feb 22 '21 at 13:23

Shahanshah Alam

435
2
16

1

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn and eventually apply that knowledge to their own code. You are also likely to have positive feedback/upvotes from users, when the code is explained. – Amit Verma Feb 23 '21 at 03:06
Export default only works with functions but I changed from const to function – LucasSaladini Feb 23 '21 at 11:15

How to use datetimepicker from react-native-community

1 Answers1