Date picker resets itself

[Borges53]

Bug report

Summary

Hi, I am creating a component to be able to fill the date in a form but when I try to select the date it restarts by itself. I am using the latest version of the app

Reproducible sample code

`
import React, {useEffect, useMemo, useState} from 'react';
import {
View,
Platform,
TouchableOpacity,
Text,
Image,
Modal,
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import moment from 'moment';
import {PressableOpacity} from 'react-native-pressable-opacity';
import {icons} from '../../../constants';
import {useTranslation} from 'react-i18next';
import DatePicker from 'react-native-date-picker';
import Button from '../../Button';
import {CONTENT_SPACING} from '../../Camera/Constants';

interface LocalDatePickerProps {
onChange: (date: Date) => void;
value: Date;
disabled: boolean;
placeholder?: string;
containerStyle?: any;
iconStyle?: any;
textStyle?: any;
errorTextStyle?: any;
error?: string | null;
type: 'date' | 'time' | 'datetime';
maximumDate?: Date | undefined;
minimumDate?: Date | undefined;
}

function isValidDate(d) {
return d instanceof Date && !isNaN(d);
}

const LocalDatePicker = ({
onChange,
value,
disabled,
placeholder = undefined,
containerStyle,
iconStyle,
textStyle,
errorTextStyle,
error,
type,
maximumDate = undefined,
minimumDate = undefined,
}: LocalDatePickerProps) => {
const [open, setOpen] = useState(false);
const [localDate, setLocalDate] = useState(new Date());
const {t} = useTranslation();
const format = type == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm';
return (

<PressableOpacity
style={containerStyle}
onPress={() => {
if (!disabled) {
if (value && moment(value).isValid()) {
setLocalDate(moment(value).toDate());
}
setOpen(true);
}
}}>


{!value || !moment(value).isValid()
? t(placeholder || 'selectDate')
: moment(value).format(format)}


{error && (
{error || 'This is required.'}
)}

  <Modal visible={open} animationType="slide">
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        gap: 10,
        padding: 20,
      }}>
      {/* <Text style={{fontSize: 20, fontWeight: 'bold', marginBottom: 10}}>
      {t("yearSelected")}: {localDate.getFullYear()}
      </Text> */}

      {type !== 'time' && (
        <>
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>
            {t('selectDate')}
          </Text>
          {useMemo(() => {
            if(!open) return null;
            return (
              <DatePicker
                mode="date"
                maximumDate={maximumDate}
                minimumDate={minimumDate}
                date={localDate}
                onDateChange={date => {
                  setLocalDate(date);
                }}
              />
            );
          }, [open])}
        </>
      )}
      {type !== 'date' && (
        <>
          <Text style={{fontSize: 20, fontWeight: 'bold'}}>
            {t('selectTime')}
          </Text>
          {useMemo(() => {
             if(!open) return null;
            return (
              <DatePicker
                mode="time"
                maximumDate={maximumDate}
                minimumDate={minimumDate}
                date={localDate}
                onDateChange={date => {
                  setLocalDate(date);
                }}
              />
            );
          }, [open])}
        </>
      )}

      <View
        style={{
          flexDirection: 'row',
          gap: 10,
          position: 'absolute',
          bottom: 20,
        }}>
        <Button title={t('cancel')} onPress={() => setOpen(false)} />
        <Button
          title={t('save')}
          onPress={() => {
            setOpen(false);
            onChange(localDate);
          }}
        />
      </View>
    </View>
  </Modal>
</View>

);
};

export default LocalDatePicker;
`

Steps to reproduce

WhatsApp.Video.2025-02-11.at.18.39.36.mp4

Describe what you expected to happen:

In theory, it should not restart by itself.

Environment info

npx react-native info output:

System:
  OS: Windows 11 10.0.22631
  CPU: "(16) x64 AMD Ryzen 7 5700G with Radeon Graphics         "
  Memory: 2.42 GB / 15.37 GB
Binaries:
  Node:
    version: 22.12.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Program Files\nodejs\yarn.CMD
  npm:
    version: 10.9.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-242.23339.11.2421.12700392
  Visual Studio: Not Found
Languages:
  Java: 17.0.13
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.11
    wanted: ^0.73.9
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

datetimepicker version: ^4.4.2

iOS / Android version: x.x

[abdelrahmanayaad]

I have the same problem

[spyshower]

Same issue here

[spyshower]

This happens when component rerenders