Flash Message under the notch on iPhone X and higher versions

[ilyas-shah]

My setup includes:

• react-native: 0.63.2
• react: 16.13.1
• Flash Message: 0.1.23

Flash Message instance added at the root

showMessage code:

Result:

@lucasferreira Please help here.

[lucasferreira]

Hi @ilyas-shah

As you can see in this part of README: https://github.com/lucasferreira/react-native-flash-message#iphone-x

Our component (FlashMessage) are tested in notch iPhones likes iPhone X, XS and XR. Currently my personal smartphone it's a iPhone XR (with notch) and everything works OK.

We use this 3rd party package to deal with notch detect: https://github.com/ptelad/react-native-iphone-x-helper So we delegate this kind of "deal with notch" situation to this package above.

Looking into react-native-iphone-x-helper issues (https://github.com/ptelad/react-native-iphone-x-helper/issues) I could see that some people, sometimes had some problems with iPhone 12. Is it iPhone 12 your test device?

[radko93]

I think it would be better to use a library like this, Android phones also has notches https://github.com/th3rdwave/react-native-safe-area-context We also have this bug on iPhone XS.

[jcisz]

Hi, im having the same issue but in a redmi device

Im fixing it using useSafeAreaInsets from react-native-safe-area-context and adding the statusBarHeight option in the showMessage function

[lucasferreira]

Hi guys @ilyas-shah @radko93 and @jcisz

Thanks for the report and tips about react-native-safe-area-context.

Apparently react-native-iphone-x-helper it's no more a trustable solution to carry this "statusBarHeight" calc task.

But the problem with react-native-safe-area-context is the fact that this package works on native side, so to this to work on older RN versions (<= 0.59) we could add some friction in the easy proccess that is "just install and use" of our package react-native-flash-message.

But I will think in some "optional way" to use react-native-safe-area-context like @jcisz did, OK?

[radko93]

@lucasferreira sounds good. @lucasferreira I think most people now use RN 0.60, and while on older versions it could still be manually integrated? Of course it's up to you in the end.

[lucasferreira]

@radko93 there is other problem: Expo users, I don't know if they could easily install 3rd-party native packages.

[radko93]

@lucasferreira this library is supported by expo https://docs.expo.dev/versions/latest/sdk/safe-area-context/

[giacomocerquone]

@radko93 there is other problem: Expo users, I don't know if they could easily install 3rd-party native packages.

react-native-safe-area-context is the current industry standard solution to manage this issue. As per the other issue you have, I'd suggest making a major version release to introduce this lib

UPDATE: actually now that I think about it, I'd isolate the two issues and completely remove all the props in flash-message related to the safearea concept and just write an installation/quickstart/integration guide both on the website and in the readme that showcase the usage of react-native-safe-context to manually apply the padding and spacing values to the flash-message

I think this is the correct way to go in order to simplify the code, avoid breaking changes and avoid doing magic in the background. For example if this lib includes safearea, the developer will need to instantiate the safeareaprovider by itself which is not ideal

[Etaliya]

When text doesn't fit, it will not move to next line