React Native Expo StackNavigator overlaps Notification bar

Question

I am trying to implement navigation bar for my React Native Expo app. Here is a problem:

"dependencies": {
    "expo": "^18.0.3",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.45.1",
    "react-navigation": "^1.0.0-beta.11"
}

I don't know where and how I can set up styles for this component to make it not overlap with notifications bar. I tried to set marginTop: StatusBar.currentHeight for my root View but it didn't work. It applied the margin on the View but not on the navigation bar.

My App:

import {StackNavigator} from 'react-navigation';
import Home from './app/screens/Home';

export default App = StackNavigator({
  Home: { screen: Home }
})

Home:

export default class Home extends Component {
    constructor() {
        super();  
        // <...>
    }

    static navigationOptions = {
        title: 'Welcome'
    };

    // <...>
}

score 41 · Accepted Answer · edited Jul 11 '17 at 22:13

If you wrap your entire app in a View with a top margin, it will work.

Example: https://snack.expo.io/r1gb9TGH-

In the future, we're going to build this into react-navigation so it happens for you automatically.

import React, {Component} from 'react';
import {StatusBar, View} from 'react-native'
import {StackNavigator} from 'react-navigation';
import Home from './app/screens/Home';

const RootNavigator = StackNavigator({
  Home: { screen: Home }
})

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
        <RootNavigator />
      </View>
    )
  }
}

**Exactly what I was looking for!** – Andrei Jul 11 '17 at 22:12 — Andrei, Jul 11 '17 at 22:12

score 3 · Answer 2 · answered Apr 03 '20 at 11:22

3

add this line to app.json file

"translucent": false

in "androidStatusBar"

like this:

"androidStatusBar": {
  "barStyle": "light-content",
  "backgroundColor": "#3a81fd",
  "hidden": false,
  "translucent": false
},

read more in : Configuring StatusBar Docs

answered Apr 03 '20 at 11:22

Rasoul707

95
3
7

this is a better solution for recent versions of expo – maroof shittu Apr 09 '20 at 15:22
how about iOS status bar? – Roy Ryando Jun 10 '20 at 05:23

React Native Expo StackNavigator overlaps Notification bar

2 Answers2

Linked