Bottom toast position is inconsistent between devices

[Tobbe]

This is the same code running on three different devices

Something looks to be off with the way react-native-toast calculates where to position the toast

[Tobbe]

I thought I had it figured out, but then I launched another emulator, and realized it still needed more work

But I finally figured out a workaround that works for my specific use case

function ToastsOutlet() {
  const insets = useSafeAreaInsets();
  const safeAreaFrame = useSafeAreaFrame();
  const dimensions = useWindowDimensions();

  // https://github.com/facebook/react-native/issues/47080
  const bugFixDelta =
    Math.abs(safeAreaFrame.height - dimensions.height) > 1 ? insets.bottom : 0;

  const toastInsetsReset = {
    top:
      -insets.top - 16 + Platform.select({ ios: 0, default: 32 }) + bugFixDelta,
    bottom: -insets.bottom - 16,
  };

  return (
    <Toasts
      extraInsets={{
        top: toastInsetsReset.top - 16,
        bottom: toastInsetsReset.bottom,
      }}
    />
  );
}

[nickdebaise]

Thanks for reporting this and providing a fix. I’ll take a look into it and will most likely end up taking parts of your solution!

[nickdebaise]

Should be fixed in next release!

[Tobbe]

Thanks @nickdebaise 🙏

[nickdebaise]

Should be fixed in 0.14.0, please let me know! If you previously applied fixes, you can either remove them or set fixAndroidInsets={false} in your <Toasts /> component.