feat: Add support for customizing zIndex of the Toasts

README.md

@@ -177,6 +177,7 @@ Because of the theming capability of `react-native-styled-toast`, it has out of
 | **`maxToasts`** | number | no       | Sets max number of toasts to show              | Constants.statusBarHeight |
 | **`offset`**    | number | no       | Increases default offset from the top / bottom | Constants.statusBarHeight |
 | **`position`**  | enum   | no       | Sets the position of the toasts                | TOP                       |
+| **`zIndex`**    | number | no       | Sets the zIndex of the toasts                  | 1                         |
 
 ### `ToastConfig`
 

src/Context/index.tsx

@@ -11,6 +11,7 @@ type ToastContextType = {
   position?: 'TOP' | 'BOTTOM'
   offset?: number
   maxToasts?: number
+  zIndex?: number
 }
 
 export const ToastContext = React.createContext<ToastContextType>({
@@ -44,7 +45,8 @@ const ToastProvider: React.FC<Omit<ToastContextType, 'toast'>> = ({
   children,
   position,
   offset: offsetProp,
-  maxToasts
+  maxToasts,
+  zIndex = 1
 }) => {
   const [toasts, setToasts] = React.useState<FullToastConfig[]>([])
 
@@ -78,6 +80,7 @@ const ToastProvider: React.FC<Omit<ToastContextType, 'toast'>> = ({
     <ToastContext.Provider value={{ toast }}>
       {children}
       <Box
+        zIndex={zIndex}
         px={4}
         left={0}
         right={0}