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

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

Instead of using Platform API, you can use expo constants.

npm i expo-constants

then import it in your component as

import Constants from "expo-constants"

and then in the styles you can use it like this

const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight
} });

To see all the properties of Constants console log it you will find some more useful things.