search

web-ridge / react-native-paper-dates

Smooth and fast cross platform Material Design date and time picker for React Native Paper
https://www.reactnativepaperdates.com
MIT License
637 stars 161 forks source link

Unable to Customize Selected Date Style in DatePicker Modal #394

Open pegahkhavari opened 2 weeks ago

pegahkhavari commented 2 weeks ago

Current behaviour

The selected date inside the Date Picker modal is not padded properly in our app.

Expected behaviour

The selected date inside the Date Picker modal should be padded properly.

How to reproduce?

This issue can be reproduced by opening the DatePicker modal and selecting a date. The padding of the selected date is not as expected. The issue might also occur with different theme that using different font sizes or …

Preview

Screenshot 2023-12-04 at 11 58 47

What have you tried so far?

Tried to fix this issue temporarily, by adding a style to the DatePickerModalContentHeader component as a patch in our app. Here’s the modified code:

export function HeaderContentSingle({
  state,
  emptyLabel = ' ',
  color,
  locale,
}: HeaderContentProps & { color: string }) {

  // ...

  return (
    <Text
      maxFontSizeMultiplier={1.5}
      style={[styles.singleHeaderText, { color: dateColor, lineHeight: 25 }]} // Added lineHeight here
    >
      {state.date ? formatter.format(state.date) : emptyLabel}
    </Text>
  )
}

It would be great if there was a prop for the DatePickerInput that could customize the HeaderContent style from the consumer side.

Your Environment

software version
react-native 0.72.5
react-native-paper 5.12.3
react-native-paper-dates 0.22.11