fix: toast hidden behind stack header by allowing custom containerStyle

src/ToastUI.tsx

@@ -67,7 +67,7 @@ function renderComponent({
 
 export function ToastUI(props: ToastUIProps) {
   const { isVisible, options, hide } = props;
-  const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable } = options;
+  const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable, containerStyle } = options;
 
   return (
     <AnimatedContainer
@@ -78,7 +78,8 @@ export function ToastUI(props: ToastUIProps) {
       keyboardOffset={keyboardOffset}
       avoidKeyboard={avoidKeyboard}
       swipeable={swipeable}
-      onHide={hide}>
+      onHide={hide}
+      containerStyle={containerStyle}>
       {renderComponent(props)}
     </AnimatedContainer>
   );

src/components/AnimatedContainer.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Animated, Dimensions, PanResponderGestureState } from 'react-native';
+import React, { useEffect } from 'react';
+import { Animated, Dimensions, PanResponderGestureState, StyleProp, ViewStyle } from 'react-native';
 
 import { useLogger, useGesture } from '../contexts';
 import {
@@ -24,6 +24,7 @@ export type AnimatedContainerProps = {
   avoidKeyboard: boolean;
   onHide: () => void;
   onRestorePosition?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -78,7 +79,8 @@ export function AnimatedContainer({
   avoidKeyboard,
   onHide,
   onRestorePosition = noop,
-  swipeable
+  swipeable,
+  containerStyle
 }: AnimatedContainerProps) {
   const { log } = useLogger();
   const { panning } = useGesture();
@@ -136,6 +138,8 @@ export function AnimatedContainer({
     disable,
   });
 
+  useEffect(()  => {   console.log("CUSTOM TOAST LIBRARY LOADED");}, []); 
+
   React.useLayoutEffect(() => {
     const newAnimationValue = isVisible ? 1 : 0;
     animate(newAnimationValue);
@@ -145,7 +149,7 @@ export function AnimatedContainer({
     <Animated.View
       testID={getTestId('AnimatedContainer')}
       onLayout={computeViewDimensions}
-      style={[styles.base, styles[position], animationStyles]}
+      style={[styles.base, styles[position], animationStyles, containerStyle]}
       // This container View is never the target of touch events but its subviews can be.
       // By doing this, tapping buttons behind the Toast is allowed
       pointerEvents='box-none'

src/types/index.ts

@@ -91,6 +91,7 @@ export type ToastOptions = {
    * on the Toast instance) that uses the `props` parameter
    */
   props?: any;
+  containerStyle?: StyleProp<ViewStyle>;
 };
 
 export type ToastData = {
@@ -216,4 +217,5 @@ export type ToastProps = {
    * Called on any Toast press
    */
   onPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
 };

src/useToast.ts

@@ -26,7 +26,8 @@ export const DEFAULT_OPTIONS: Required<ToastOptions> = {
   onShow: noop,
   onHide: noop,
   onPress: noop,
-  props: {}
+  props: {},
+  containerStyle: null,
 };
 
 export type UseToastParams = {
@@ -88,7 +89,8 @@ export function useToast({ defaultOptions }: UseToastParams) {
         onHide = initialOptions.onHide,
         onPress = initialOptions.onPress,
         swipeable = initialOptions.swipeable,
-        props = initialOptions.props
+        props = initialOptions.props,
+        containerStyle = initialOptions.containerStyle,
       } = params;
       setData({
         text1,
@@ -110,7 +112,8 @@ export function useToast({ defaultOptions }: UseToastParams) {
           onHide,
           onPress,
           swipeable,
-          props
+          props,
+          containerStyle,
         }) as Required<ToastOptions>
       );
       // TODO: validate input