Make status bar not be translucent (React Native)

Question

I'm creating an app in React Native that uses react-navigation.

I have some views that animate off the screen towards the top of the screen. While animating, the view goes behind the react-navigation navigation header. It goes behind the iOS status bar, but the status bar is translucent, so it shows the status bar text on top of the view. The status bar is no longer white, but the color of the view under it.

This doesn't look right and I would like the status bar to be always on top and not translucent. What is the best way to go about this?

Josh · Accepted Answer · 2017-11-02 23:50:38Z

1

I was finally able to avoid content overlapping the status bar by placing this element in my topmost container:

<View 
    style = {{
        height: 20, 
        width: width, 
        backgroundColor: 'white', 
        zIndex: 3, 
        position: 'absolute', 
        top: 0,  
        left: 0,
    }} 
/>

The status bar still shows but animated content never overlaps it.

answered Nov 2, 2017 at 23:50

Josh

1,0893 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guilherme Cronemberger · Accepted Answer · 2017-10-09 19:53:34Z

0

It's because your react-navigation header has a elevation property, that works strangely (i think just in some cases) as a zIndex in Android, you probably can fix this by adding a higher zIndex to your iOS status bar than you have in the animation.

EDIT: Solved in How to set iOS status bar background color

edited Oct 9, 2017 at 19:53

answered Oct 9, 2017 at 19:05

Guilherme Cronemberger

8146 silver badges7 bronze badges

8 Comments

Josh Over a year ago

Thanks for the advice. I tried changing the zIndex of the animated view like so: <View style = {{height: 232, zIndex: -5}}> But it still gives me the same problem.

Guilherme Cronemberger Over a year ago

Sorry, but is the animation showing over or under the status bar?

Guilherme Cronemberger Over a year ago

If the problem is it showing under, you can just create a position: relative view to be a parent of the absolute animation so it won't go under IOS translucent status bar.

Josh Over a year ago

The animation seems to go under the status bar text, but since the status bar is translucent, it shows the view underneath it, instead of the white color of the status bar.

Josh Over a year ago

I also attempted this, with no luck: <StatusBar style = {{zIndex: 99}} />

|

Collectives™ on Stack Overflow

Make status bar not be translucent (React Native)

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related