Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS statusbar height #354

Closed
joeburghard opened this issue Nov 15, 2023 · 8 comments
Closed

iOS statusbar height #354

joeburghard opened this issue Nov 15, 2023 · 8 comments
Labels
bug Something isn't working enhancement New feature or request question Further information is requested

Comments

@joeburghard
Copy link

joeburghard commented Nov 15, 2023

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.

Screenshot 2023-11-15 at 9 52 46 AM

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

Screenshot 2023-11-15 at 9 49 02 AM

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
@joeburghard joeburghard added the bug Something isn't working label Nov 15, 2023
@iM-GeeKy
Copy link
Collaborator

Can you verify if this fixes the problem? #352 I need to review and merge it once the pipeline succeeds.

@joeburghard
Copy link
Author

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

@RichardLindhout RichardLindhout added enhancement New feature or request question Further information is requested labels Dec 7, 2023
@RichardLindhout
Copy link
Member

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.
Scherm­afbeelding 2023-12-07 om 17 47 37

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

@RichardLindhout
Copy link
Member

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

@joeburghard
Copy link
Author

@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"
Screenshot 2023-12-20 at 10 01 21 AM

@RichardLindhout
Copy link
Member

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

@RichardLindhout
Copy link
Member

Scherm­afbeelding 2023-12-21 om 19 50 08 Scherm­afbeelding 2023-12-21 om 19 50 30 Scherm­afbeelding 2023-12-21 om 19 52 37 Scherm­afbeelding 2023-12-21 om 19 52 44 Scherm­afbeelding 2023-12-21 om 19 52 59

@RichardLindhout
Copy link
Member

New release soon avalailable!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants