Building my app with Expo causes extra padding on the top of my app's screen (React Native)

Question

I'm building my first app with React Native and I'm using Expo to build my app. My problem is whenever I build my app there comes this extra white space / padding on top of my app. I have tried using SafeAreaView with flex: 1 but it doesn't fix the issue. Has anyone had this kind of issue before?

Nightlong

Did you find any solution? I got same issue after i migrate to expo SDK version 46. – Beamends

Same, Im seeing the same issue on sdk 45. Keen to know if anyone has found any solutions for this as well – Nasya

Answer 1

Managed to solve it using StatusBar component inside my header title component

See: https://reactnavigation.org/docs/headers/

Nasya

Answer 2

I had the same issue.

Adding this to App.tsx solved it for me:

Platform.OS === "android" && StatusBar.setBackgroundColor("transparent");
Platform.OS === "android" && StatusBar.setTranslucent(true);

Trueblood

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Septillion

Answer 3

For me, it was the Android StatusBar.

https://docs.expo.dev/guides/configuring-statusbar/

androidStatusBar.translucent Value type - boolean. This option can be used to specify whether the status bar should be translucent. When false, the system status bar pushes the content of your app down (similar to position: relative). When true, the status bar floats above the content in your app (similar to position: absolute).

So I updated app.json, adding:

"androidStatusBar": {
  "backgroundColor": "#00000000",
  "translucent": true
},

Rookie

Answer 4

What happened to me, is that I forgot to setup the expo-router. You need to use the property headerShown: false.

in my scenario, thats how it goes: screenshot of the code

Yt

Please read why we ask that you not post text as images. Please Edit your post to include the text in-addition-to or in-place-of the image. Thanks! – Dust