Account for Safe Area View

[mattychen]

Toast Position should account for SafeAreaView as default.

[8bitAlex]

Bump. I am having this issue as well.

[geminiyellow]

+1

[AdamDiament]

Bump! (Use 60 rather than top position as a workaround)

[kylebake]

For anyone coming across this issue, here's how I solved it:

• Create a ToastHelper object to store all shared toast functions
• In this helper, create custom hooks so that we can leverage useSafeAreaInsets from react-native-safe-area-context
• Use the top field from this hook to position the toast
• Return a function from our custom hook so that we can use it in consumers

import Toast from 'react-native-root-toast';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export const ToastHelper = {
  useToast: () => {
    const { top } = useSafeAreaInsets();

    return {
      showSuccessToast: (message) =>
        Toast.show(message, {
          duration: Toast.durations.LONG,
          position: Math.max(Toast.positions.TOP, top),
          animation: true,
          hideOnPress: true,
          backgroundColor: '#daf5e1',
          opacity: 1,
          textColor: 'black',
          containerStyle: {
            borderColor: '#42B362',
            borderWidth: 1,
          },
        }),
    };
  },
};

• Using this in a component would then look something like:

import { ToastHelper } from 'shared/ToastHelper';

const MyView = () => {
  const { showSuccessToast } = ToastHelper.useToast();

  const onSubmit = () => {
    // submit a thing
    showSuccessToast('Form submitted!')
  }

  return <View></View>
}