day range missing on first open

[ddikodroid]

Current behaviour

when I open DatePickerModal for the first time, the range isn't fully selected

Expected behaviour

when I choose the same date range, the range is fully selected

How to reproduce?

const DateRangePicker = forwardRef(
  (
    {
      label,
      onDismiss,
      onConfirm,
    }: {
      label: string;
      onDismiss?: () => void;
      onConfirm?: ({ startDate, endDate }: any) => void;
    },
    ref
  ) => {
    const [open, setOpen] = useState(false);
    const [range, setRange] = useState({
      startDate: dayjs().toDate(),
      endDate: dayjs().add(1, 'week').toDate(),
    });

    const _onDismiss = useCallback(() => {
      setOpen(false);
    }, []);

    const _onConfirm = useCallback(
      ({ startDate, endDate }: any) => {
        setRange({ startDate, endDate });
        setOpen(false);
      },
      [setOpen, setRange]
    );

    useImperativeHandle(ref, () => ({
      open: () => {
        setOpen(true);
      },
      close: () => {
        setOpen(false);
      },
    }));

    const currentLanguage = getLanguage();

    return (
      <View>
        <Text style={globalStyles.textInputLabel}>{label}</Text>
        <Pressable onPress={() => setOpen(true)}>
          <View style={styles.container}>
            <TextInput
              onPressIn={() => setOpen(true)}
              editable={false}
              //outlineStyle is working on web, but not detected on mobile
              // @ts-ignore:next-line
              style={[styles.textInput, isWeb ? { outlineStyle: 'none' } : {}]}
              value={getDateRange(range)}
            />
            <Image
              source={require('@/assets/icons/calendar-days.png')}
              style={{ width: 24, height: 24 }}
              resizeMode='contain'
            />
          </View>
        </Pressable>
        <DatePickerModal
          locale={getLanguageCode(currentLanguage)}
          mode='range'
          visible={open}
          startWeekOnMonday
          onDismiss={() => {
            onDismiss?.();
            _onDismiss();
          }}
          onConfirm={({ startDate, endDate }) => {
            if (dayjs(startDate).isAfter(dayjs(endDate))) {
              Alert.alert(
                i18n.t('error-state.title'),
                i18n.t('error-state.range.quantification-period')
              );
              return;
            }
            onConfirm?.({ startDate, endDate });
            _onConfirm({ startDate, endDate });
          }}
          startDate={range.startDate}
          endDate={range.endDate}
          presentationStyle='pageSheet'
          validRange={{ startDate: dateAfter, endDate: dateBefore }}
        />
      </View>
    );
  }
);

Preview

Above

What have you tried so far?

Try to see where the code responsible for day range on DayRange.tsx

Your Environment

software	version
ios	17.4
android	-
react-native	0.73.6
react-native-paper	^5.12.3
node	20.11.0
yarn	1.22.21
expo sdk	~50.0.20

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.