I'm trying to create a date picker. When the user press on the "OK" button the modal should have closed but it keeps reopening. I'm using react-native-datetimepicker. I did tried putting setShow(false) when the "OK" button is pressed but it still open for a split second.

const [receiptDate, setReceiptDate] = React.useState("");
const [date, setDate] = React.useState(new Date()); 
const [today, setToday] = React.useState(new Date()); 
const [show, setShow] = React.useState(false); 

const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
    if (event.type == "dismissed") {  
        console.log("CANCEL")
        setShow(false) 
        return null;
    } else { 
        setShow(false)
        console.log("OK")
        let tempDate = new Date(currentDate);
        let fDate = tempDate.getFullYear()   "-"   tempDate.getDate()   "-"   (tempDate.getMonth()   1)
        setReceiptDate(fDate);
        console.log(fDate);
        return;
    }
}

                     <View>
                        <TouchableOpacity activeOpacity={0.9} onPress={() => setShow(true)}>
                            <TextInput
                                editable={false} 
                                placeholder="YYYY-MM-DD (2022-05-22)" 
                                value={receiptDate}
                            />
                        </TouchableOpacity>
                        {show && (
                            <DateTimePicker
                                testID='dateTimePicker'
                                value={date}
                                mode={'date'} 
                                display='default'
                                onChange={onChange}
                                maximumDate={today}
                        />)}
                    </View>

CodePudding user response：

In my opinion, you are not setting show to false, in case if the user selects an option. Please try this and let me know if it fixes your problem or not:

const onChange = (event, selectedDate) => {
        if (event.type == 'set') {
            const currentDate = selectedDate || startDate;
            let tempDate = new Date(currentDate);
            let fDate = tempDate.getFullYear()   "-"   tempDate.getDate()   "-"   (tempDate.getMonth()   1)
            setReceiptDate(fDate);
            setDate(currentDate);
        }
        setShow(false) 
    }