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

Question

I'm developing an app with React Native and I'm testing with my OnePlus 6 and it has a notch. The SafeAreaView is a solution for the iPhone X but for Android, it seems there is no solution.

How to solve this kind of issue?

Answer 1

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.

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.