(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

Well, I had the same problem. I solved this using this lib React Native Status Bar Height, and I recommend because it´s a piece of cake to use.
And if you are using style-components you can add the getStatusBarHeight() on your styles.js like i=I did on the example below:

import styled from 'styled-components/native';

import { getStatusBarHeight} from 'react-native-status-bar-height';

export const Background = styled.View`
 flex:1;
 background:#131313;
 margin-top: ${getStatusBarHeight()};

`

Answer 2

Late 2020 answer: For anyone stumbling across this issue themselves, they have added support for this.

Follow this documentation page

Answer 3

Although the docs says it is relevant only for iOS, when I used React's SafeAreaView it acted differently on different screens on Android.

I managed to fix the problem by implementing my version of SafeAreaView:

import React from "react";
import { Platform, View, StatusBar } from "react-native";
import { GeneralStyle } from "../styles";

export function SaferAreaView({ children }) {
  if (Platform.OS == "ios") {
    return <SaferAreaView style={{ flex: 1 }}>{children}</SaferAreaView>;
  }
  if (Platform.OS == "android") {
    return <View style={{flex: 1, paddingTop: StatusBar.currentHeight}}>{children}</View>;
  }
}

This was tested on an old device (with hardware navigation) and new notch devices (with software navigation) - different screen sizes.

Answer 4

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

Answer 5

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>
    );
  }
}

Answer 6

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.