Samsung Galaxy S10+ notch

Hi guys,
My team and I are building an App with Expo and since last month I bought a Samsung Galaxy S10+.
Here is my problem: The camera cutout is inside the display and it looks somewhat like the left screen…

Is it possible to do something in Expo to detect the device Galaxy S10 and S10+ and force to hide the camera cutout so the App would look more like the right screen ?..

Thanks alot for your insights!!
Paul-François

Hi

See SafeAreaContext and SafeAreaView, which I think will do what you’re looking for.

Thanks alot for the quick reply!
My UI teammate is off until next week, but I’ll make sure to share with him those two options. I am aware that he tried something with areas however it wasn’t working since the area where the camera cutout is located is part of the screen display and therefore using safeArea was leaving a white stripe on other devices than the Galaxy S10 and S10+.
Meabe one of the two options you proposed wasn’t tried yet.
Thank you :slight_smile:

No problem. Give it a try and let us know if there’s still a problem.

Hi!
I’m the UI teammate mentioned earlier. I tried both SafeAreaContext and SafeAreaView, and sadly, it didn’t work :frowning: .

Hi. Could you provide more info? Maybe someone can figure it out if you post some sample code and maybe screenshots and a description of what’s wrong/what you expect to see.

We are getting the left side screen and we would like a display like the right side screen.
Left Side: displays a white stripe at the bottom which is the same height as the cutout height.
Right Side: If I use the… Display Settings > Full screen apps > Advanced settings > ‘Hide camera cutout’
I get the black stripe on top which hide the cutout, moves down the app display and fix the unwanted white stripe.
We would like our app to automatically hide the camera cutout which is part of the display and isn’t screen area. Using ‘SafeArea’ will display another weird white stripe at the top of the screen on any other device.
This video https://www.youtube.com/watch?v=UVHbVMs-g-g shows the difference between the two display mode.
We would like our code done in Expo to overwrite the settings and display the app without the cutout to avoid having the whole screen moving up and leaving that height as a white stripe on Galaxy S10, S10+ and note 10.
We’re trying to figure out the code to use…
Thanks again for your replies!
PF

Hi,

The problem was cause by our UI template, Native Base. To solve the problem, I added the following code to our style:

const hasNotch = () => {
  if (Platform.OS === 'android') {
    return StatusBar.currentHeight > 24
  }
}

const deviceHeight = Platform.OS === 'android' && hasNotch() ? Dimensions.get('screen').height - StatusBar.currentHeight : Dimensions.get('window').height

Thank you for the fast replies ! :slight_smile:

I’m glad you found a workaround. I’ll have to have another look at this at some point. If I figure out a way to do it using SafeAreaContext I’ll let you know.

1 Like

Hi –

Small note: I think it is likely possible to make SafeAreaContext work to help solve this problem but the SafeAreaView in react-native only works on iOS and has some issues.

A little more info here:
https://reactnavigation.org/docs/en/handling-safe-area.html

Awesome, Thanks Alot for the additional information. :slight_smile: