Does SafeAreaView support android?

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’ ?

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