CODEWITHSUNDEEP
javascriptreact-native
LucasSaladini
LucasSaladini

Reputation: 101

How to use datetimepicker from react-native-community

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

Upvotes: 1

Views: 2012

Answers (1)

Shahanshah Alam
Shahanshah Alam

Reputation: 605

use export default const App instead of export const App.

Please refer to this for more explanation.

Upvotes: 1

Related Questions