Done and cross icon hiding behind the notch

[SharfMohiuddin]

Current behavior:
When clicking to open the date picker modal in the react-native-paper-dates library, the Done and cross icons are hidden behind the iOS notch on devices with a notch (e.g., iPhone X or newer). Additionally, the text color of selected dates cannot be changed, and the selected range line color is too dark, lacking the desired light color opacity.

Expected behavior:
When opening the date picker modal, the Done and cross icons should be visible and not obscured by the iOS notch on devices with a notch.
There should be an option to change the text color of selected dates.
The selected range line color should have a light color opacity to achieve the desired visual appearance.
How to reproduce?
Run the application on a device with a notch (e.g., iPhone X or newer).
Open the date picker modal by triggering the relevant event (e.g., button press).
Observe that the Done and cross icons are hidden behind the notch.
Attempt to change the text color of selected dates in the date picker.
Select a date range and observe that the selected range line color is too dark.
Preview:

const customDarkTheme = {
...DarkTheme,
roundness: 1,
colors: {
...DarkTheme.colors,
primary: Colors.PRIMARY_GREEN,
background: Colors.background,
accent: "#ff1744",
text: Colors.WHITE,
surface: Colors.card_bg,
// You can add more color customizations as needed
},
fonts: {
regular: {
fontFamily: typography.font_monsterrat_regular,
text: Colors.WHITE,
},
},
};
<SafeAreaView style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
<DatePickerModal
saveLabel={
<Text style={{ color: Colors.PRIMARY_GREEN, fontWeight: "bold" }}>
Done

}
locale="en"
mode="range"
visible={open}
onDismiss={onDismiss}
startDate={range.startDate}
endDate={range.endDate ? range.endDate : range.startDate} // Set the end date to the start date by default
onConfirm={handleDateRangeSelect}
validRange={{
startDate: new Date(2021, 1, 2), // optional
endDate: new Date(), // optional
}}
allowEditing={false}
label="Select Date"
animationType="fade"
startLabel=""
endLabel=""
/>

What have you tried so far?

The provided code does not include any attempts to address the mentioned issues. However, potential solutions to consider are:

Notch Issue:

Adjust the position of the date picker modal using the marginTop property to ensure the icons are not hidden behind the notch. (As suggested in the previous response)
Text Color of Selected Dates:

Check the documentation of react-native-paper-dates to see if there is a direct prop for changing the text color of selected dates. If not, consider using the style prop and custom CSS to target and modify the text color of selected dates.
Selected Range Line Color:

Similar to the text color, check the documentation for the date picker to see if there is a prop to directly change the selected range line color. If not, use the style prop and custom CSS to target and modify the appearance of the selected range line, including adjusting its color opacity.
Please try these potential solutions and let us know if you encounter any difficulties or if any of the suggestions resolve the issues you are facing.

Your Environment

software	version
ios	16.4
android	x
react-native	0.67.3
react-native-paper	"4.12.1"
node	16.0.0
npm or yarn	1.22.19
expo sdk	x.x.x

[stackunderflows]

I am also having this problem.

[dah-projects]

Same problem here

[github-actions]

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.

[SharfMohiuddin]

datepickermodal.zip

Please find the attached repro

[stackunderflows]

I figured out a way to fix my issue. For me, I had a view (banner at the top of the app) above the <SafeAreaProvider> and the rest of the app was inside. Even though the date picker modal was inside the <SafeAreaProvider>, it wasn't respecting the safe area. After moving the banner inside <SafeAreaProvider>, I had to tweak the position of the rest of the content because it was putting some extra whitespace between the banner and the rest of the page. After moving the banner, the DatePickerModal properly respected the safe area.

[iM-GeeKy]

All of the snacks in the example in the documentation do not seem to have this issue. Feel free to check them out.

[SharfMohiuddin]

@iM-GeeKy Is there any possibility that we have a prop for this presentationStyle="pageSheet"? By default it is "overFullScreen" but I want this "pageSheet".

[iM-GeeKy]

@iM-GeeKy Is there any possibility that we have a prop for this presentationStyle="pageSheet"? By default it is "overFullScreen" but I want this "pageSheet".

PRs are welcome!