How to prevent layout from overlapping with iOS status bar

Question

I am working on tutorial for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them. Is this the actual way to do it? I don' think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

Below shows the screenshots before and after the padding is added.

stackoverflow.com/a/39300715/1540350 <- this answer will not just fix the problem mentioned here, but even give you the possibility to color the background of the status bar in iOS and Android. — Martin Braun
– Martin Braun, Commented Aug 2, 2019 at 18:31

Aᴄʜᴇʀᴏɴғᴀɪʟ · Accepted Answer · 2018-03-19 06:15:11Z

82

Now you can use SafeAreaView which is included in React Navigation:

<SafeAreaView>
    ... your content ...
</SafeAreaView>

edited Mar 19, 2018 at 6:15

Aᴄʜᴇʀᴏɴғᴀɪʟ

3,0974 gold badges28 silver badges51 bronze badges

answered Mar 13, 2018 at 2:46

Greg Ennis

15.5k2 gold badges73 silver badges77 bronze badges

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

7 Comments

Aᴄʜᴇʀᴏɴғᴀɪʟ Over a year ago

Might be good to note that this component is included in react-navigation now by default.

izikandrw Over a year ago

this doesn't solve the issue of status bar overlap--I wrapped my app in SafeAreaView and my app still overlaps the StatusBar. It seems to be geared towards the iPhone X notch/rounded corners situation

Greg Ennis Over a year ago

You don't wrap your app in it, you wrap a screen in it.

Asaf Katz Over a year ago

Ohh, that's nice! I like that one.

Fellow Stranger Over a year ago

@AndreFigueiredo Not correct. Works fine on all iPhone devices, as long as it's > iOS 11.

|

Luis Rizo · Accepted Answer · 2018-06-27 20:11:04Z

44

There is a very simple way to fix this. Make a component.

You can create a StatusBar component and call it first after the first view wrapper in your parent components.

Here is the code for the one I use:

'use strict'
import React, {Component} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';

class StatusBarBackground extends Component{
  render(){
    return(
      <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop
      </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBarBackground: {
    height: (Platform.OS === 'ios') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar)
    backgroundColor: "white",
  }

})

module.exports= StatusBarBackground

After doing this and exporting it to your main component, call it like this:

import StatusBarBackground from './YourPath/StatusBarBackground'

export default class MyScene extends Component {
  render(){
    return(
      <View>
        <StatusBarBackground style={{backgroundColor:'midnightblue'}}/>
      </View>
    )
  }
}

edited Jun 27, 2018 at 20:11

answered Mar 5, 2017 at 1:39

Luis Rizo

2,1094 gold badges17 silver badges34 bronze badges

6 Comments

Raptor Over a year ago

MidnightBlue is invalid, told by React Native: Warning: Failed prop type: Invalid prop backgroundColor supplied

bblincoe Over a year ago

It should be midnightblue.

edA-qa mort-ora-y Over a year ago

The iOS status bar is not a fix size. It can be larger when sharing Wifi or in a call.

Yasir Over a year ago

How do I use this when using React navigation hookup with redux, all pages are either in a stack navigator or tab navigator (nested) and hook with redux

mrroot5 Over a year ago

If you import the react native component "StatusBar" and then use: height: (Platform.OS === 'ios') ? 20 : StatusBar.currentHeight, instead of ? 20 : 0, you get the same result on Android.

|

Gaurav Saluja · Accepted Answer · 2019-02-27 16:33:08Z

40

I tried a more simple way for this.

We can get the height of Status Bar on android and use SafeAreaView along with it to make the code work on both platforms.

import { SafeAreaView, StatusBar, Platform } from 'react-native';

If we log out Platform.OS and StatusBar.currentHeight we get the logs,

console.log('Height on: ', Platform.OS, StatusBar.currentHeight);

Height on: android 24 and Height on: android 24

We can now optionally add margin/padding to our container view using

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

The final code in App.js is below:

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.container}>
          <Text>Hello World</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

answered Feb 27, 2019 at 16:33

Gaurav Saluja

7136 silver badges8 bronze badges

4 Comments

manuelwaldner Over a year ago

I tried it on android and it's working. I cannot test it on iOS yet, but as i know what the SafeArea is on iOS, i'm pretty sure it should work there too.

rosmcmahon Over a year ago

*** This should be set to accepted answer *** The other solutions here provide arbitrary fixed heights based on their own single test situation

Pradeep Over a year ago

A perfect answer but SafeAreaView is not applicable for the iPhone devices with version below 11

sarfrazanwar Over a year ago

Best One. Worked. Why are we checking for ios here ?

Asaf Katz · Accepted Answer · 2018-04-16 11:03:18Z

@philipheinser solution does work indeed.

However, I would expect that React Native's StatusBar component will handle that for us.

It doesn't, unfortunately, but we can abstract that away quite easily by creating our own component around it:

./StatusBar.js

import React from 'react';
import { View, StatusBar, Platform } from 'react-native';

// here, we add the spacing for iOS
// and pass the rest of the props to React Native's StatusBar

export default function (props) {
    const height = (Platform.OS === 'ios') ? 20 : 0;
    const { backgroundColor } = props;

    return (
        <View style={{ height, backgroundColor }}>
            <StatusBar { ...props } />
        </View>
    );
}

./index.js

import React from 'react';
import { View } from 'react-native';

import StatusBar from './StatusBar';

export default function App () {
    return (
      <View>
        <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" />
        { /* rest of our app */ }
      </View>
    )
}

Before:

After:

AndyO · Accepted Answer · 2020-07-08 13:25:16Z

9

The react-navigation docs have a great solution for this. First off, they recommend not to use the SafeAreaView included with React Native because:

While React Native exports a SafeAreaView component, it has some inherent issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. In addition, this component only supports iOS 10+ with no support for older iOS versions or Android. We recommend to use the react-native-safe-area-context library to handle safe areas in a more reliable way.

Instead, they recommend react-native-safe-area-context - with which it would look like this:

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import { useSafeArea } from 'react-native-safe-area-context';

export default function MyScene({title = 'MyScene'}) {
    const insets = useSafeArea();

    return (
        <View style={{paddingTop: insets.top}}>
            <Text>Hi! My name is {title}.</Text>
        </View> 
    )   
}

I would like to note that it's probably a better idea to use the SafeAreaView that this library offers though, since phones these days may also have elements at the bottom that can overlap UI elements. It all depends on your app of course. (For more detail on that, see the react-navigation docs I linked to in the beginning.)

edited Jul 8, 2020 at 13:25

answered Mar 21, 2020 at 22:06

AndyO

1,77221 silver badges29 bronze badges

5 Comments

Acauã Pitta Over a year ago

this is deprecated

AndyO Over a year ago

@AcauãPitta Please provide a source when you make claims

Guilherme Samuel Over a year ago

useSafeArea is deprecated according to the docs: github.com/th3rdwave/react-native-safe-area-context#usesafearea. They reccomend utilizing the useSafeAreaInsets hook.

Guilherme Samuel Over a year ago

Use this hook for cases where you need more flexibility, but if you don't, as you said, use SafeAreaView with the SafeAreaProvider as it's the cleanest solution

Diogo Alves Nov 29, 2024 at 20:53

This is deprecated. Use "useSafeAreaInsets" instead. Same logic, just replace useSafeArea to useSafeAreaInsets

Broda Noel · Accepted Answer · 2021-10-21 03:07:06Z

5

If you combine SaveAreaView and StatusBar, you get it.

https://reactnative.dev/docs/statusbar https://reactnative.dev/docs/safeareaview

Just do this:

<SafeAreaView>
  <View style={{flex: 1}}>
    <StatusBar translucent={false} backgroundColor="#fff" />

    // Your dark magic here
  </View>
</SafeAreaView>

answered Oct 21, 2021 at 3:07

Broda Noel

2,0931 gold badge27 silver badges40 bronze badges

1 Comment

sean le roy Over a year ago

This is great, nice and easy!

edu_shin · Accepted Answer · 2018-10-24 01:56:48Z

2

Here is a way that works for iOS:

<View style={{height: 20, backgroundColor: 'white', marginTop: -20, zIndex: 2}}>
   <StatusBar barStyle="dark-content"/></View>

edited Oct 24, 2018 at 1:56

answered Jul 17, 2018 at 13:27

edu_shin

517 bronze badges

Comments

philipheinser · Accepted Answer · 2017-03-04 18:52:43Z

0

You can handle this by adding a padding to you navigation bar component or just ad a view that has the same hight as the statusbar at the top of your view tree with a backgroundcolor like the facebook app does this.

answered Mar 4, 2017 at 18:52

philipheinser

3111 silver badge6 bronze badges

1 Comment

nbkhope Over a year ago

Is that height value fixed and does not change no matter what phone you have? If so, where can I find information about the correct specific value for iOS / Android?

Safi Deraiya · Accepted Answer · 2020-03-17 17:54:44Z

0

Just Simple User React native Default StatusBar to achieve this funcationality.

<View style={styles.container}>
    <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} />
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>

answered Mar 17, 2020 at 17:54

Safi Deraiya

741 gold badge1 silver badge5 bronze badges

Comments

Vijayendra Dev · Accepted Answer · 2022-08-10 15:26:31Z

0

[This answer is applicable to Android emulators] Hi, I have imported status bar from "react-native" and called it at the end of block with status bar style set to auto and it worked for me, the code below is for reference:

    import { SafeAreaView,Button, StyleSheet, Text, TextInput, View } from 'react-native';
    import { StatusBar } from 'react-native';
    export default function App() {
    return (
<SafeAreaView style={styles.appContainer}>
  
  
  <View >
    <TextInput placeholder='Add your course goal' />
    <Button title="Add Goals" />
  </View>
  <View>
  <Text>List of goals..</Text>
  </View>
  <StatusBar style="auto" />
  </SafeAreaView>
   );
   }

answered Aug 10, 2022 at 15:26

Vijayendra Dev

233 bronze badges

Comments

Harsha Dananjaya · Accepted Answer · 2024-05-18 18:35:55Z

0

Place StatusBar component after the Slot component

import { View, Text, StatusBar } from 'react-native'
import React from 'react'

import { Slot } from 'expo-router'

const Layout = () => {
  return (
    <View >
        <Slot />
        <StatusBar backgroundColor='red' barStyle={'light-content'}/>
    </View>
  )
}

export default Layout

answered May 18, 2024 at 18:35

Harsha Dananjaya

11 bronze badge

Comments

Innocent Josiah Patrick · Accepted Answer · 2025-08-30 12:02:58Z

had the issue using React Native Modal and this is how i solved it

note that on android if youre working with expo there is a default paddingTop that allows for your modal to be beneath the notch screen, for ios for some reason you have to take care of this yourself.

2. so i wrapped my modal content in a safearea view, give my modal the "statusBarTranslucent" prop and used the "useSafeAreaInsets" hook, this hook tells you the safe area from the statusbar. the statusbarTranslucent prop from the best of my knowledge sets the modal to overlay the status bar, after that i then applied paddingTop: insets.top and both ios and android has great safe space from the status bar. code snippet below....

const insets = useSafeAreaInsets(); // gives the safe area along all sides. you can log it to see the value

  return (
    <>
      <VisitoruploadedModal
        modalVisible={UploadedMediaVisible}
        media={uploadedMedia}
        setMedia={setUploadedMedia}
        setModalVisible={setUploadedModalVisible}
        mediaType={mediaType}
      />
      <Modal
        transparent={false}
        visible={modalVisible}
        onRequestClose={closeModal}
        statusBarTranslucent //translucent prop is important
      >
        <SafeAreaProvider style={{ flex: 1 }} edges={["top", "left", "right"]}>
          <Animated.View
            style={[
              styles.modalContainer,
              {
                transform: [{ translateX: slideAnim }],
              },
            ]}
          >
            {/* modal header */}
            <LinearGradient
              colors={STYLES.modalHeaderGradient.colors}
              locations={STYLES.modalHeaderGradient.locations}
              start={STYLES.modalHeaderGradient.start}
              end={STYLES.modalHeaderGradient.end}
              style={[styles.modalHeader, { paddingTop: insets.top //this padding is important for spacing the content away from the status bar}]}
            >
              <Pressable
                onPress={closeModal}
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  gap: MS(5),
                }}
              >
                <AntDesign name="arrowleft" size={MS(14)} color="black" />
                <Text style={{ fontSize: MS(13) }}>Back Home</Text>
              </Pressable>
            </LinearGradient>

            {/* modal body */

Collectives™ on Stack Overflow

How to prevent layout from overlapping with iOS status bar

12 Answers 12

7 Comments

6 Comments

4 Comments

Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

7 Comments

6 Comments

4 Comments

Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related