The datepicker reopens after selecting date

[sljovshin]

Bug report

Summary

The datepicker reopens once after selecting date, and tapping "done". when tapping done the second time is closes and updates my state. This is tested on Android.

Reproducible sample code

`
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView,} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function MyComponent() {
const [ date, setDate ] = useState(new Date);
const [ displayDate, setDisplayDate ] = useState('');

const changeDate = (event, selectedDate) => {
console.log(selectedDate);
if(selectedDate) {
setDate(selectedDate);
}
setShowDatePicker(false)
}

return (


{showDatePicker && }
<TouchableOpacityonPress={() => setShowDatePicker(true)}>
Placeholder text



)
}
`

Steps to reproduce

1. Import the example component and run the app.
2. press the "Placeholder text" to open the datepicker
3. select a date and press done to trigger the change event.

Describe what you expected to happen:

1. Expectet behavior is that the datepicker closes and the change method updates my state. without reopening

Environment info

npx react-native info output:

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
Memory: 481.89 MB / 15.86 GB
Binaries:
Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 23, 25, 28, 29
Build Tools: 23.0.1, 28.0.3, 29.0.2, 29.0.3
System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
Windows SDK:
AllowAllTrustedApps: Disabled
Versions: 10.0.17763.0
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312
Visual Studio: 16.9.31105.61 (Visual Studio Professional 2019)
Languages:
Java: 1.8.0_201 - C:\Program Files\Java\jdk1.8.0_201\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.1 => 0.64.1
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

datetimepicker version: 2.4.0

Android version: API 29

[MarouaniALA]

Hi same problem here did you find a solution plz?

[atitpatel]

Facing the same issue!!

[sljovshin]

Hi same problem here did you find a solution plz?

I did not, im afraid!

[MarouaniALA]

@atitpatel @sljovshin

Hi i think i found a solution i put my date picker inside useMemo hook and add the visibility state to the useMemo deps it worked perfectly
code exemple:

export function AppDatePicker({mode, onChange, value}) {
    const [pickerVisible, setPickerVisible] = useState(Platform.OS === 'ios');

    const localChange = (event, selectedDate) => {
        onChange(event, selectedDate)
        setPickerVisible(Platform.OS === 'ios');
    };

    return useMemo(() => (
        <>
            <TouchableWithoutFeedback
                onPress={() => {
                    setPickerVisible(true)
                }}>
                {pickerVisible && (
                    <DateTimePicker
                        testID="dateTimePicker"
                        value={value}
                        mode={mode ? mode : "datetime"}
                        is24Hour={true}
                        display={"default"}
                        onChange={localChange}
                        locale={"fr-FR"}
                    />
                )}
                {Platform.OS === 'android' && (
                    <MonoText style={{fontSize: 16}}> {Moment(value).format('D MMMM yyyy HH:mm')} </MonoText>
                )}

            </TouchableWithoutFeedback>

        </>
    ), [pickerVisible, mode]);
}

[Keldryn56]

Same problem

[xdajay]

I've faced the same issue with directly using state in value prop, instead use this value={new Date(this.state.clock)}

[ZackWard]

I think that this is a duplicate of #54
Here is another possible solution: #54 (comment)

[vonovak]

closing as duplicate of #54