useSafeArea is not working on Android

[robinclaes]

Description

When using <Incubator.Toast>, it uses <View useSafeArea>, but our toast still appears behind notch/camera on Android

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

Render a Toast (from Incubator) on the root View on an Android device with a notch
or
Render a <View useSafeArea></View> on the root View of an Android device with a notch

Expected behavior

It renders under the notch

Actual behavior

It renders behind the notch

More Info

What works for us is this, but feels hacky.

import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Toast as RNUIToast, ToastProps } from 'react-native-ui-lib/src/incubator';
import { isAndroid } from '../util/general';

export function Toast(props: ToastProps) {
  const insets = useSafeAreaInsets();
  // ? We add the style because the useSafeArea is not working on Android
  return <RNUIToast {...props} style={isAndroid && { marginTop: insets.top }} />;
}

Environment

• React Native version: 0.73.6
• React Native UI Lib version: 7.23.2

Affected platforms

• Android
• iOS
• Web

[adids1221]

Hi @robinclaes , useSafeArea is working only in IOS by default.
As you can see in our code - View index file:

const container = useSafeArea && Constants.isIOS ? SafeAreaView : RNView`

So it's not a bug.

About your issue, does it reproduces on a specific device ?
Do you have any screenshot/video?