Fixing Date Picker Modal Overlapping StatusBar in iOS

[AnassHmida]

Hello,

This PR resolves the issue where the content of the date picker modal in iOS is displayed under the StatusBar, preventing users from interacting with the close and save buttons. The problem arose due to the use of an incorrect property for calculating the StatusBar height in the DatePickerModal component for iOS. This fix replaces the incorrect property StatusBar.currentHeight with the appropriate StatusBarManager.HEIGHT for iOS. The changes ensure that the content is properly displayed and the user can interact with the necessary buttons within the date picker modal.

Changes Made:

• Replaced the usage of StatusBar.currentHeight with StatusBarManager.HEIGHT for calculating the StatusBar's height in the DatePickerModal component for iOS.
• Tested the changes on iOS to ensure the proper functioning of the date picker modal and the interaction with the buttons.

Fixes: https://github.com/web-ridge/react-native-paper-dates/issues/258#issue-1602789368

Thanks.

[joeburghard]

This approach did not resolve my issue with modal positioning underneath statusbar. I did have a better experience using the getHeight method from nativemodules

  const [iosHeight, setIOSHeight] = React.useState<number>(0)
 NativeModules.StatusBarManager.getHeight(({ height }: { height: number }) => {
    setIOSHeight(height)
  })

<View
                  style={[
                    {
                      height: Platform.select({
                        ios: iosHeight,
                        ...

[RichardLindhout]

I think the best approach is to use react-native-safe-area-context for this (which we already have as a dependency)

[joeburghard]

@AnassHmida Could you refactor your changes to try the solution @RichardLindhout suggested?

[RichardLindhout]

I did a fix myself, can you verify this change @AnassHmida

[AnassHmida]

Hello @joeburghard , the fix you mentioned causes a crash in android , you need to limit it to IOS only :

Platform.OS === "ios" &&  NativeModules.StatusBarManager.getHeight(({ height }: { height: number }) => {
setIOSHeight(height)
})

but other than that , it works great !

[AnassHmida]

Hey @RichardLindhout , one second , i'm verifying this

[AnassHmida]

Hey again @RichardLindhout , it seems that the 'react-native-safe-area-context' doesn't seem to work here , i tried the latest version that you released , but now the problem seems to persist , for IOS and Android , i'm going to create a pull request based on @joeburghard 's answer with an android fix.

[RichardLindhout]

No it should work I think you did not use the provider

import { SafeAreaProvider } from 'react-native-safe-area-context';
function App() {
  return <SafeAreaProvider>

...other providers
</SafeAreaProvider>;
}

[RichardLindhout]

react-native-safe-area-context is already a dependency for react-native-paper and this works great! I never saw this problem in my apps so it should be the provider :)

[RichardLindhout]

Hmm looks like its double applied now :)

I think we may need to improve docs on this

[AnassHmida]

Hmm looks like its double applied now :)

I think we may need to improve docs on this

Humm i don't know , i'm wrapping my views in a SafeAreaProvider tag , but that doesn't seem to fix anything , and i don't think it should be conditioned to be like that in the first place , i made a second PR based on @joeburghard 's answer which should be WAI.

Thanks.

[RichardLindhout]

Please let me know if newest release work for you, on my device it works. We have also support for all the different use cases and the pagesheet presentation style