(React native) How to use SafeAreaView for Android notch devices?

react native notch android
react-navigation safeareaview
react-native-device-info
safeareaview tabnavigator react-native
statusbar react native
react-native status bar overlap android
safeareaview absolute position
react navigation material bottom tabs safeareaview

I'm actually developing an app with react native and i'm testing with my one plus 6 and it has a notch. The SafeAreaView is a solution for the iPhone X but for Android, it seems there is no solution.

Did someone heard about anything to solve this kinf of issue ?

A work around I had to use recently:

GlobalStyles.js:

import { StyleSheet, Platform } from 'react-native';
export default StyleSheet.create({
    droidSafeArea: {
        flex: 1,
        backgroundColor: npLBlue,
        paddingTop: Platform.OS === 'android' ? 25 : 0
    },
});

It is applied like so:

App.js

import GlobalStyles from './GlobalStyles';
import { SafeAreaView } from "react-native";

render() {
    return (
      <SafeAreaView style={GlobalStyles.droidSafeArea}>
          //More controls and such
      </SafeAreaView>
    );
  }
}

You'll probably need to adjust it a bit to fit whatever screen you're working on, but this got my header just below the icon strip at the top.

SafeAreaView not working on Android. Giving wrong paddings , react-native-bot added Ran Commands Stale labels on Feb 23, 2018 /react-​native-how-to-use-safeareaview-for-android-notch-devices  The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later. It is currently only applicable to iOS devices with iOS version 11 or later.

Do something like

import { StyleSheet, Platform, StatusBar } from "react-native";

export default StyleSheet.create({
  AndroidSafeArea: {
    flex: 1,
    backgroundColor: "white",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

And then In your App.js

import SafeViewAndroid from "./components/SafeViewAndroid";

 <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
          <Layout screenProps={{ navigation: this.props.navigation }} /> //OR whatever you want to render
        </SafeAreaView>

This should work good as get height will take care of the knotch in android device by calculating the statusBar height and it will arrange accordingly.

Adding Notch support to your React Native apps: Android, iOS , If you don't have an Android device with Notch, open an Android Emulator and React Native has a built-in component called SafeAreaView. The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices. SafeAreaView renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.

You could also create helper component with this style applied right away like this

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

export default props => (
  <SafeAreaView style={styles.AndroidSafeArea} {...props} >
    {props.children}
  </SafeAreaView>
);

const styles = StyleSheet.create({
  AndroidSafeArea: {
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
  }
});

Make note that I also deleted unnecessary styles which breaks natural behavior of SafeAreaView which in my case broke styling.

As for use you simply use it like normal SafeAreaView:

import React from 'react';
import SafeAreaView from "src/Components/SafeAreaView";

render() {
    return (
      <SafeAreaView>
          // Rest of your app
      </SafeAreaView>
    );
  }
}

react-native-safe-area-view, that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. React Native has a built-in component called SafeAreaView. It fixes this exact issue, but only on iPhone X. It still doesn't have Android support. Thanks to @janicduplessis, we can use react-native-safe-area-context, that supports all platforms we want: iOS, Android and Web! If you use Expo, this lib will be included on SDK v35

In the SafeAreaView Docs was told:

It is currently only applicable to iOS devices with iOS version 11 or later.

So now I definitely use it in my project but I use Platform to recognize device platform and for Android, I make a manual safe area for the status bar.

SafeAreaView · React Native, Hi, SafeAreaView works great for iOS, but there is still many android devices that with physical limitation of the screen, such as rounded corners or camera notches. you can use react-native-safe-area-view@1.0.0 that will leverage that lib. The way SafeAreaView is set up, on Android it shouldn't have any affect. SafeAreaView only has affect on iOS, specifically on the iPhone X. It is created so that your view doesn't get in the way of the top notch and the home indicator.

you can use react-native-device-info for device info and apply styling also with a notch

SafeAreaView for Android devices | Voters, Physical notches; Status bar overlay; Home activity indicator on iOS; Navigation While React Native exports a SafeAreaView component, it has some inherent issues, 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  As a native iOS and Android developer, you will experience similar issues yourself when you start to develop for devices with edge-to-edge screens. For iOS, Apple even requires you to support iOS 11 and the notch: All new apps & app updates submitted after July 2018 get rejected otherwise.

Supporting safe areas, It does so by using `SafeAreaView` inside of UI elements that may interact with the sensor cluster ("the your application displays correctly on the iPhone X and other devices with notches and "safe areas". React Native does not currently expose an API to access information about device cutouts on Android devices. expo install react-native-safe-area-view react-native-safe-area-context In bare React Native projects: yarn add react-native-safe-area-view react-native-safe-area-context Next, you need to link react-native-safe-area-context. If you are using autolinking, run pod install again. If not, follow these instructions. Then re-build your app binary.

Avoid The Notch With SafeAreaView On React-Native, The purpose of `SafeAreaView` is to render content within the safe area It is currently only applicable to iOS devices with iOS version 11 or later. such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X) You may also want to use a background color that matches your application's design  5. Here you go friends, Now your react native application project is ready to run in Real Android Mobile phone. Just GO TO your project’s folder and initiate react-native run-android command and your project will be automatically run into Real Android Device.

The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11  In this video, you will learn how to use the SafeAreaView component to avoid the sensor cluster (the notch) and home activity indicator on the iPhone X. CODE

Comments
  • Looks like it is not supported github.com/facebook/react-native/issues/17371 Advice is to go ask on that GitHub or don't use React-native.
  • thanks for your answer
  • Thanks your code will be helpful however if we're on android but we have no notch, we will a space at the top of the screen
  • @ThomasDesdoits I'm currently testings on a Moto E4 Plus, that doesn't have a notch and my header was still showing up under the bar at the top with the wifi signal and carrier info. I had to do this to push it down out of that. I can't get it to run in a VM to test other phone types, but I would assume it would act the same on any android device. Do you not get that behavior on your test device?
  • actually i can' t it test on another phone, in my case i'm using a paddingtop of 30, i don't think it is possible but the better solution will be te get the status bar height with "StatusBar.currentHeight"
  • The newest version of react-native-device-info has a function for this: github.com/react-native-community/…
  • @SunnySultan when I originally wrote this there wasn't. But some of the other answers seem to suggest there's a "StatusBar.currentHeight" variable these days that you might be able to use. I haven't worked on the code around this in a while so I don't know if that's a thing for all androids of those posters specific versions.
  • how do styles break SafeAreaView? I'm curious to know so I don't run into any issues with the app I'm launching!