The highlight color is overflow on range picker

[ddikodroid]

Current behaviour

So when I choose a range of date on the web browser, the highlight color on start date is overflow compared to the selected date color. the highlight range is shifted.

Expected behaviour

It should behave the same as on mobile.

How to reproduce?

import { breakpoints } from '@/constants/breakpoints';
import { colors } from '@/constants/colors';
import { isAndroid, isWeb } from '@/constants/platforms';
import { spacing } from '@/constants/spacing';
import { globalStyles } from '@/constants/styles';
import dayjs from 'dayjs';
import React, {
  forwardRef,
  useCallback,
  useImperativeHandle,
  useState,
} from 'react';
import {
  Image,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { DatePickerModal } from 'react-native-paper-dates';

const DateRangePicker = forwardRef(
  (
    {
      label,
      onDismiss,
      onConfirm,
      ...rest
    }: {
      label: string;
      onDismiss: () => void;
      onConfirm: ({ startDate, endDate }: any) => void;
    },
    ref
  ) => {
    const [open, setOpen] = useState(false);

    const [range, setRange] = useState({
      startDate: undefined,
      endDate: undefined,
    });

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

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

    const startDate = useCallback(() => {
      dayjs('01-01-2020').toDate();
    }, []);

    return (
      <View>
        <Text style={globalStyles.textInputLabel}>{label}</Text>
        <Pressable onPress={() => setOpen(true)}>
          <View style={styles.container}>
            <TextInput
              editable={false}
              //outlineStyle is working on web, but not detected on mobile
              // @ts-ignore:next-line
              style={[styles.textInput, isWeb ? { outlineStyle: 'none' } : {}]}
              value={'10-April'}
            />
            <Image
              source={require('@/assets/icons/calendar-days.png')}
              style={{ width: 24, height: 24 }}
              resizeMode='contain'
            />
          </View>
        </Pressable>
        <DatePickerModal
          locale='id'
          mode='range'
          visible={open}
          onDismiss={() => {
            onDismiss();
            _onDismiss();
          }}
          onConfirm={({ startDate, endDate }) => {
            onConfirm({ startDate, endDate });
            _onConfirm({ startDate, endDate });
          }}
          startDate={range.startDate}
          endDate={range.endDate}
          presentationStyle='pageSheet'
          inputEnabled={false}
          validRange={{ startDate }}
        />
      </View>
    );
  }
);

export default DateRangePicker;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: spacing.s,
    borderRadius: spacing.s,
    paddingHorizontal: spacing.s,
    backgroundColor: colors.white,
    borderColor: colors.gray.light,
    borderWidth: StyleSheet.hairlineWidth,
  },
  textInput: {
    flex: 1,
    height: 48,
    fontSize: 14,
    width: '100%',
    marginRight: spacing.xs,
    color: colors.gray.dark,
    maxWidth: breakpoints.xl,
  },
});

Preview

Web

iOS

Your Environment

software	version
ios	15.5
react-native	0.73.6
react-native-paper	5.12.3
expo sdk	50.0.14

[iM-GeeKy]

PRs are welcome!

[iM-GeeKy]

This should be fixed by #387. @ddikodroid Feel free to try it out.

[ddikodroid]

This should be fixed by #387. @ddikodroid Feel free to try it out.

thank you so much!