0

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
  • 1,031
  • 2
  • 19
  • 31

2 Answers2

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.

Josh
  • 1,031
  • 2
  • 19
  • 31
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

Guilherme Cronemberger
  • 754
  • 5
  • 7
  • Thanks for the advice. I tried changing the zIndex of the animated view like so: But it still gives me the same problem. – Josh Oct 09 '17 at 19:36
  • Sorry, but is the animation showing over or under the status bar? – Guilherme Cronemberger Oct 09 '17 at 19:43
  • 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. – Guilherme Cronemberger Oct 09 '17 at 19:45
  • 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 Oct 09 '17 at 19:46
  • I also attempted this, with no luck: – Josh Oct 09 '17 at 19:48
  • I'm using a drawer navigator with a nested stack navigator for the app. Wrapping my react-navigation drawer navigator (mine is called MainNavigator) with a view with a margin doesn't seem to work either: – Josh Oct 09 '17 at 19:56
  • If you follow the answer in the link i put in my answer for you, it has a way to change the backgroundColor of the iOS status bar, which also changes the alpha of it, so you won't have the question problem anymore. – Guilherme Cronemberger Oct 09 '17 at 20:03
  • But if you don't want the animation to go under both the Headers, you should wrap it in a Relative view that is inside the navigator. – Guilherme Cronemberger Oct 09 '17 at 20:04