Expo-status-bar doesn't work after reload

Question

I'm trying to use expo-status-bar in my project and, from what I understand, it creates a component that has the same size as the user's status-bar (please correct me if I'm wrong). Anyway, when I reload my project, the StatusBar component just don't work, I have to remove the line, save it and then paste it again, so it works and apply the stilization.

This is my actual code:

<View style={{ flex: 1, backgroundColor: "#f8f8f8" }}>
 <StatusBar style="dark" backgroundColor={"#f8f8f8"} hidden={false} translucent={false} />
 <View style={styles.headerContainer} />
...

When I open the app from a refresh or a restart, it's like the StatusBar component doesn't exists.

Answer 1

I had the same problem, the color were not respected on the initial app load, but if I'd got to another route and come back or make change to the initial screen - it was ok.

I ended up removing the <Statusbar ... /> component from the return function and actually set the status bar styles before it.

So this should do the trick

  StatusBar.setBarStyle('dark-content', true);
  StatusBar.setBackgroundColor('#f8f8f8');