iOS statusbar height

[joeburghard]

Current behaviour

Greetings! I'm seeing an issue within iOS devices for DatePickerModal where the modal is under the statusbar. The view that's styling the top of the modal to provide space is doing the following.

This works all but for ios. Looking further into react native docs the StatusBar.currentHeight is strictly android and returns undefined for iOS.

Expected behaviour

The expected behaviour is the header of DatePickerModal should be directly under statusbar without disabling statusbar padding

How to reproduce?

Using the latest versions of react-native-paper( 5.11.1 ) and react-native-paper-dates( 0.20.04 ) create the react-native-paper-dates-range-picker example from docs and launch through iPhone14 simulator or real device.

Preview

What have you tried so far?

Your Environment

software	version
ios	x
android	x
react-native	x.x.x
react-native-paper	x.x.x
node	x.x.x
npm or yarn	x.x.x
expo sdk	x.x.x

[iM-GeeKy]

Can you verify if this fixes the problem? https://github.com/web-ridge/react-native-paper-dates/pull/352 I need to review and merge it once the pipeline succeeds.

[joeburghard]

Unfortunately that did not work either. I've found success using StatusBarManager.getHeight(({ height }: { height: number }) => { setIOSHeight(height) });

[RichardLindhout]

I think we need to use react-native-safe-area-context always and not the other solutions. But it looks like some people do not have correctly configured this library.

When it's configured well it looks like it's now applied 2 two times.

https://snack.expo.dev/@richardlindhout/react-native-paper-dates-ios-statusbar?platform=android

[RichardLindhout]

Also the safe area should be disabled when presentation mode is sheet + color should be better based on same logic as headerBackgroundColor

[joeburghard]

@RichardLindhout Still not getting the desired result. I upgraded my dependencies and tested using the range example in the documentation

 "react-native-paper": "^5.10.0",
 "react-native-paper-dates": "^0.18.12",
 "react-native-safe-area-context": "4.5.0"

[RichardLindhout]

@joeburghard do you have safe-area-context correctly configured?

[RichardLindhout]

[RichardLindhout]

New release soon avalailable!