(React native) How to use SafeAreaView for Android

问题:

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 ?

回答1:

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.

回答2:

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.

回答3:

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

回答4:

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

回答5:

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.