CODEWITHSUNDEEP
iosreact-native
Josh
Josh

Reputation: 1089

Make status bar not be translucent (React Native)

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?

Upvotes: 0

Views: 4804

Answers (2)

Josh
Josh

Reputation: 1089

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.

Upvotes: 1

Guilherme Cronemberger
Guilherme Cronemberger

Reputation: 814

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

Upvotes: 0

Related Questions