Custom Date Picker won't show in react native

Question

Good afternoon. I'm newbie to react native and I'm still learning it. I just want to ask why my datepicker won't show. I follow this tutorial from youtube. https://www.youtube.com/watch?v=Imkw-xFFLeE&ab_channel=Indently

So this is how I implement the code.

//this file is createAccountModule.js

return(

const [date, setDate] = useState(new Date());
  const [mode,setMode]=useState('date');
  const [show,setShow]=useState(false);

  const showMode=(currentMode)=>{
      setShow(true);
      setMode(currentMode);
  }

  const onChange=(event,selectedDate)=>{
    const currentDate= selectedDate || date;
    setShow(Platform.OS==='android');
    setDate(currentDate);

    
  }
  
  <SafeAreaView>
  <TouchableWithoutFeedback>
  <ScrollView>
  <View> -->container
    <View>  --->form
     <View>   -->for birthday
     
     <TextInput
     placeholder='Birth Date'
     keyboardType='default'
     editable={false}
     />
     
      <TouchableOpacity style={globalStyles.btnClickEye} 
                onPress={()=>showMode('date')}>
                  <Fontisto name="date" size={23} color="black" style={{marginRight:-5}}/>
                </TouchableOpacity>
     
     
     
     </View>
     
      {/*for birth datepicker */}
              {show &&(
                <DateTimePickerAndroid
                testID='dateTimePicker'
                value={date}
                mode={mode}
                is24Hour={true}
                display='default'
                onChange={onChange}
                />
              )}
    </View>
  </View>
  </ScrollView>
  </TouchableWithoutFeedback>
  </SafeAreaView>
  
  
  
)

and when I click the icon of date, Igot this error. -- Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of CreateAccountPage.

Thank you friend.

Answer 1

The DateTimePickerAndroid isn't a react component, but a object from a native react native module, as it can be seen here

You have two options:

• Either implement using the imperative API following the linked documentation
• Use the correct component (I assume that's what you want to do most likely)

For that, just change your import to:

import DateTimePicker from '@react-native-community/datetimepicker';

Then change the component name used from DateTimePickerAndroid to DateTimePicker