chore: Fix toast overlay in modals

[cyanChill]

Why

When we swap over to using react-native-actions-sheet for our models, we encountered an issue where the toasts would appear underneath the modal. react-native-actions-sheet suggests using the ExtraOverlayComponent prop and put the toast element there. The problem is that the notification provider we're using, react-native-toast-notifications doesn't support this pattern as it exposes a provider instead of a component. @backpackapp-io/react-native-toast does export a component so we swapped to using this.

This also gives us the opportunity to add in the translated messages into the toasts.

How

There were somethings in the @backpackapp-io/react-native-toast package that we had to patch as it didn't expose ways to configure those specific behaviors:

• We added pointerEvents="box-none" as we want to be able to interact with the content in the "transparent" area next to the toast to be clickable.
• There was some unnecessary offset that we had to remove as it bumped the toast up more than we needed it to.

One downside is that there's no way to set a global default (ie: we'll have to provide the "global" options to every toast() calls we do).

Note

We noticed some performance issues when repetitively opening/closing the filter list modal with some entries in it. I'm not sure if its related to this change or just something else.

Test Plan

The main goal is to have the toast messages display over the modal when called and for them to be translated if we're using a different language.

Checklist

• Documentation is up to date to reflect these changes (ie: CHANGELOG.md & README.md).
• Add new dependencies into THIRD_PARTY.md.
• This diff will work correctly for pnpm android:prod.