Unable to close the DateTimePickerModal after setting the time in ReactNative - react-native

Question

I am learning to set the time in ReactNative.
I was able to set the time with the onConfirm process of DateTimePickerModal, but I am having trouble closing the DateTimePicker at the same time.
Here is the source.
import React, {Component} from 'react';
import{
Text,
View,
Button,
}from 'react-native';
//import DateTimePicker from '#react-native- community/datetimepicker';
import DateTimePickerModal from "react-native-modal-datetime-picker";
export default class App extends Component<{}>{
constructor(){
super()
this.state={
vibrate: false,
date: new Date(),
isShowDatePicker: false
}
}
render(){
var {date} = this.state
return (
<View style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: "F5FCFF"
}}>
<Text>{date.getFullYear()}Y {date.getMonth() + 1}M {date.getDate()}D</Text>
<Button
title={'Press'}
onPress={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })} />
<DateTimePickerModal
isVisible={this.state.isShowDatePicker}
mode="date"
date={this.state.date}
onConfirm={
date=>{this.setState({date})}
}
onCancel={() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })}
headerTextIOS='Please Select Date'
confirmTextIOS='OK' />
</View>
);
}
}
I would like to write the process in OnConfirm like this, but I can't do it.
onConfirm={
date=>{this.setState({date})},
() => this.setState({ isShowDatePicker: !this.state.isShowDatePicker })
}
This description only closes the window and does not set the time.
I would appreciate it if someone could tell me how to do this.

Answer 1

Write your onConfirm like this..This would close the modal
onConfirm={(data) => {
this.setState({date})
this.setState({ isShowDatePicker: false })
}
Also your onCancel like this
onCancel={() => this.setState({ isShowDatePicker: false })}
Don't set the state to !isShowDatePicker as we know onCancel and onConfirm we need to close the modal..so set it to false rather than setting it to !isShowDatePicker
Also change your Button onPress to this
<Button
title={'Press'}
onPress={() => this.setState({ isShowDatePicker:true })} />
See working example here