Does SafeAreaView support android?

[VictorioMolina]

I am testing SafeAreaView but this seems not to work on Android.

My app has a minimalistic design and I have hidden the status bar... So, that is why I wrapped most of my components inside your component... The problem is that I have had to write an extra padding for Android like this:

import React from "react"; import { StyleSheet, Platform, StatusBar } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context";

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

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

Something that doesn't seems really elegant.

Will this feature be implemented in a future so that I don't have to use this custom component?

Thank you.

[kuasha420]

It works on android for sure. Are you sure you haven't imported SafeAreaView from 'react-native' ?

[VictorioMolina]

Yeah! I am using the one from react-native-safe-area-context. The thing is, that if I don't apply the paddingTop: StatusBar.currentHeight on android, my Samsung Galaxy S20 camera covers the header of my screen.

Pd: I have hidden the status bar for the whole app.

[nickelbob]

@VictorioMolina were you able to solve this? I'm dealing with a similar problem on the Pixel 4A.

[VictorioMolina]

@nickelbob nope, I didn't :/

[jason-rb2]

@nickelbob i solved this by follows, you can have a try:

import React from 'react';
import {
  SafeAreaView,
  NativeSafeAreaViewProps,
  useSafeAreaInsets,
  EdgeInsets,
  Edge,
} from 'react-native-safe-area-context';
import styled, { css } from 'styled-components';

const SafeAreaViewStyled = styled(SafeAreaView)<{
  insets: EdgeInsets;
  edges: readonly Edge[];
  mode: 'padding' | 'margin';
}>`
  flex: 1;
  ${(p) =>
    p.edges.map(
      (direction) => css`
        ${p.mode}-${direction}: ${p.insets[direction]}px;
      `,
    )}
  background: #fff;
`;

export const CustomSafeAreaView: React.FC<NativeSafeAreaViewProps> = ({
  children,
  edges = ['top', 'right', 'bottom', 'left'],
  ...restProps
}) => {
  const insets = useSafeAreaInsets();

  return (
    <SafeAreaViewStyled edges={edges} insets={insets} mode="padding" {...restProps}>
      {children}
    </SafeAreaViewStyled>
  );
};

[jacobp100]

It supports Android

[rdougan]

I had a similar issue when running on Android. If I add the flex prop, it would crash android completely, without any obvious error:

<SafeAreaView flex>

But using the style property works:

<SafeAreaView style={{flex: 1}}>

I would assume that it is due to some kind of property type validation.