CODEWITHSUNDEEP
react-nativeexpo
Omega Uwedia
Omega Uwedia

Reputation: 79

React Native with Expo Status Bar showing white on Android and content pushed down

Please I need help with my React Native Expo App. In android after punishing to Play Store, status bar background turns white instead of the custom background color I gave it, and the content are Pushed down a bit.But on development, it's displaying correctly.

Upvotes: 4

Views: 13390

Answers (3)

Sufian
Sufian

Reputation: 6555

I had the following line in my code but the status bar icons were invisible on Android (no matter what value I was assigning to style prop):

<StatusBar style="auto" />

I cleared the app data of the Expo Go app and then ran the expo cli with:

npx expo start --clear

PS: if you are facing this issue on iOS, your best bet is to uninstall the Expo Go app and run the above command (Expo cli will install the Expo Go app when you ask it to launch your app on iOS), there's no way to clear app data on iOS at the moment.

Upvotes: 1

Wassim Mriri
Wassim Mriri

Reputation: 78

I had the same problem and the only way I found to solve it is to add

<StatusBar barStyle="dark-content" />

make sure to import Statusbar

import { StatusBar } from "expo-status-bar";

Upvotes: 1

gbrl
gbrl

Reputation: 321

Since you do not share some code about how you gave the status bar a color, I'd recommend you to go carrefully through the Expo documentation showing how to configure the status bar.

Also, take note of the translucent property mention in this documentation as this seems to be what is causing your view to be pushed down a bit in production, status bar being translucent in development mode. Quoting the above documentation:

How is expo-status-bar different from the StatusBar component included in React Native?

expo-status-bar builds on top of the StatusBar component that React Native provides in order to give you better defaults when you're building an app with Expo tools. For example, the translucent property of expo-status-bar defaults to true or, if you have changed that property in androidStatusBar, it will use that value instead. The default in React Native for translucent is always false, which can be confusing when in projects created using Expo tools, because the default is true for consistency with iOS.

The recommended way seems to make use of expo-status-bar to set the status bar text color and react-native-safe-area-context to render content of the app in the safe area, while background color is set by parent view.

Upvotes: 5

Related Questions