Android: DateTimePicker keeps resetting to default value

My DateTimePicker keeps resetting to the default value while open.

Code:

const CustomDateTimePicker = React.memo((onChange) => {

    console.log('Rerender CustomDateTimePicker');

    const [date, setDate] = useState(new Date('1985/01/01'));
    const [show, setShow] = useState(Platform.OS === 'ios');

    const onDateChange = useCallback((event, date) => {
        setShow(Platform.OS === 'ios');
        setDate(date);
        onChange(date);
    }, []);

    useEffect(() => {
        console.log('Date changed');
    }, [date]);

    return (
        <View style={{ flexDirection: 'row' }}>
            {Platform.OS === 'android' &&
                <TouchableOpacity
                    onPress={() => setShow(true)}
                    style={{
                        flex: 1,
                        marginVertical: 10,
                        padding: 10,
                    }}
                >
                    <Text style={{ fontSize: 16 }}>{date && date.toLocaleDateString()}</Text>
                </TouchableOpacity>
            }
            {show &&
                <DateTimePicker
                    testID="dateTimePicker"
                    textColor={'#ffffff'}
                    value={date}
                    mode={'date'}
                    display='default'
                    onChange={onDateChange}
                />
            }
        </View>
    )
});

export default CustomDateTimePicker;

When the dialog is open and I select a date, the component will undo my change and go back to the default value after a second or two.

I don’t the console prints while this is happening.

[PaulOskarSoe]

I had a similar issue. I think the problem comes from the re-rendering of the calendar component. Try wrapping your parent component inside useMemo hook and render the component only if show calendar state changes. It worked for me 😃

        {/* ONLY RENDER CALENDAR WHEN SHOW CALENDAR CHANGES */}
        {React.useMemo(() => {
          return (
            <CalendarDatesPicker
              pickDate={pickDate}
              selectedDate={selectedDate}
              language={language}
              closeCalendar={() => setCalendar(false)}
              showCalendar={showCalendar}
            />
          );
        }, [showCalendar])}

[vonovak]

🎉 This issue has been resolved in version 3.0.9 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀