When using , it uses <View useSafeArea>, but our toast still appears behind notch/camera on Android
Related to
[x] 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 }} />;
}
Description
When using, it uses
<View useSafeArea>, but our toast still appears behind notch/camera on AndroidRelated to
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 notchExpected behavior
It renders under the notch
Actual behavior
It renders behind the notch
More Info
What works for us is this, but feels hacky.
Environment
Affected platforms