Please provide possibility set zIndex to AnimatedContainer

[Jigalag]

base: { position: 'absolute', left: 0, right: 0, alignItems: 'center', justifyContent: 'center' }, react-native-toast-message/lib/src/components/AnimatedContainer.styles.js

[Jigalag]

Or make it higher by default, please Using Stripe and Stripe overlay higher than Toast

[SeanRoberts]

@Jigalag Were you able to find a workaround for this? I'd like my toasts to appear above my modals.

[KilianB]

If react-natives zIndex works similar to css, the value is relative to the next parent stack context. So you might get lucky by wrapping your Toast component inside a view with a high zIndex itself.

[nlaffey]

We're also encountering this issue. Would appreciate the zIndex either being defaulted to something higher or added as an option on the ToastConfig. For now I'm using patch-package to set it myself:

index 9ab2b7f..4a64b73 100644
--- a/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.styles.js
+++ b/node_modules/react-native-toast-message/lib/src/components/AnimatedContainer.styles.js
@@ -5,7 +5,8 @@ export const styles = StyleSheet.create({
         left: 0,
         right: 0,
         alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        zIndex: 500
     },
     top: {
         top: 0

[oakmegaeddie]

We're also encountering this issue. Is there any workaround other than using patch-package ourselves?

[SeanRoberts]

We're also encountering this issue. Is there any workaround other than using patch-package ourselves?

I think I ended up adding more Toast outlets in my stack where I needed them. Just looking at my Modal code for example (built using react-native-modal) I added a <Toast /> inside the <Modal>

[oakmegaeddie]

If react-natives zIndex works similar to css, the value is relative to the next parent stack context. So you might get lucky by wrapping your Toast component inside a view with a high zIndex itself.

After try for about 1 hour, I finally get the solution! I should NOT set zIndex on the outer container of the custom-layout component! I should wrap <Toast /> inside the <View>, and set zIndex style on the View.

So, here's the solution:

<View style={{zIndex: 1000}}>
  <Toast config={TOAST_CONFIG} />
</View>