From bbe20289615a8d38b5736b40be6b1fdf663d5c85 Mon Sep 17 00:00:00 2001
From: ramiel99 <ramielwan48@gamil.com>
Date: Mon, 21 Mar 2022 18:47:51 +0200
Subject: [PATCH 1/4] align toast container to center instead of width: 100%
 and setting right and left to 0 which was causing components under the toast
 on its sides unclickable

---
 src/toast-container.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/toast-container.tsx b/src/toast-container.tsx
index 43f626a..9b085d0 100644
--- a/src/toast-container.tsx
+++ b/src/toast-container.tsx
@@ -159,11 +159,9 @@ const styles = StyleSheet.create({
   container: {
     flex: 0,
     position: "absolute",
-    width: "100%",
     maxWidth: "100%",
     zIndex: 999999,
-    left: 0,
-    right: 0,
+    alignSelf: 'center',
     ...(Platform.OS === "web" ? { overflow: "hidden" } : null),
   },
   message: {

From cd82535ef45fd67b5c0b034dfc81e1fcfdcfb464 Mon Sep 17 00:00:00 2001
From: Agustin Navarro <xAgustin93@gmail.com>
Date: Thu, 2 Jun 2022 11:39:39 +0200
Subject: [PATCH 2/4] Add placement and button demo

---
 example/Home.tsx | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/example/Home.tsx b/example/Home.tsx
index 566b0a8..df89c50 100644
--- a/example/Home.tsx
+++ b/example/Home.tsx
@@ -54,13 +54,16 @@ const Home = () => {
         </Text>
         <Text
           onPress={() =>
-            toast.show("This is a customized toast! you can implement your own", {
-              type: "custom_toast",
-              animationDuration: 100,
-              data: {
-                title: "Customized toast",
-              },
-            })
+            toast.show(
+              "This is a customized toast! you can implement your own",
+              {
+                type: "custom_toast",
+                animationDuration: 100,
+                data: {
+                  title: "Customized toast",
+                },
+              }
+            )
           }
           style={styles.test}
         >
@@ -87,6 +90,16 @@ const Home = () => {
         >
           Placement top
         </Text>
+        <Text
+          onPress={() => {
+            toast.show("This toast should render on center", {
+              placement: "center",
+            });
+          }}
+          style={[styles.test]}
+        >
+          Placement center
+        </Text>
         <Text
           onPress={() => {
             toast?.show("This toast have zoom-in animation", {
@@ -155,7 +168,11 @@ const Home = () => {
         >
           Swipe to close disabled
         </Text>
-        <TextInput ref={inputRef} style={{ height: 50 }} placeholder="Input"></TextInput>
+        <TextInput
+          ref={inputRef}
+          style={{ height: 50 }}
+          placeholder="Input"
+        ></TextInput>
 
         <Text
           onPress={() => {

From 2927c5f8165a8deb1f2287365944aea942998961 Mon Sep 17 00:00:00 2001
From: Agustin Navarro <xAgustin93@gmail.com>
Date: Thu, 2 Jun 2022 11:43:01 +0200
Subject: [PATCH 3/4] Add placement and button demo

---
 src/toast-container.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 src/toast.tsx           |  2 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/toast-container.tsx b/src/toast-container.tsx
index 43f626a..5caaa27 100644
--- a/src/toast-container.tsx
+++ b/src/toast-container.tsx
@@ -4,9 +4,12 @@ import {
   ViewStyle,
   KeyboardAvoidingView,
   Platform,
+  Dimensions,
 } from "react-native";
 import Toast, { ToastOptions, ToastProps } from "./toast";
 
+const { height, width } = Dimensions.get("window");
+
 export interface Props extends ToastOptions {
   renderToast?(toast: ToastProps): JSX.Element;
   renderType?: { [type: string]: (toast: ToastProps) => JSX.Element };
@@ -145,11 +148,47 @@ class ToastContainer extends Component<Props, State> {
     );
   }
 
+  renderCenterToasts() {
+    const { toasts } = this.state;
+    let { offset, offsetTop } = this.props;
+    let style: ViewStyle = {
+      top: offsetTop || offset,
+      justifyContent: "flex-start",
+      flexDirection: "column-reverse",
+    };
+
+    const data = toasts.filter((t) => t.placement === "center");
+    const foundToast = data.length > 0;
+
+    if (!foundToast) return null;
+
+    return (
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "position" : undefined}
+        style={[styles.container, style]}
+        contentContainerStyle={{
+          height: height,
+          width: width,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        pointerEvents="box-none"
+      >
+        {toasts
+          .filter((t) => t.placement === "center")
+          .map((toast) => (
+            <Toast key={toast.id} {...toast} />
+          ))}
+      </KeyboardAvoidingView>
+    );
+  }
+
   render() {
     return (
       <>
         {this.renderTopToasts()}
         {this.renderBottomToasts()}
+        {this.renderCenterToasts()}
       </>
     );
   }
diff --git a/src/toast.tsx b/src/toast.tsx
index b401e27..13998e7 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -39,7 +39,7 @@ export interface ToastOptions {
   /**
    * Customize when toast should be placed
    */
-  placement?: "top" | "bottom";
+  placement?: "top" | "bottom" | "center";
 
   /**
    * Customize style of toast

From ffc273b6320e308b283b070b113479629279ee54 Mon Sep 17 00:00:00 2001
From: Alireza Rezania <alireza.rzna@gmail.com>
Date: Sat, 11 Jun 2022 15:23:07 +0430
Subject: [PATCH 4/4] center placement fixes

---
 src/toast-container.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/toast-container.tsx b/src/toast-container.tsx
index 5caaa27..252d869 100644
--- a/src/toast-container.tsx
+++ b/src/toast-container.tsx
@@ -153,7 +153,9 @@ class ToastContainer extends Component<Props, State> {
     let { offset, offsetTop } = this.props;
     let style: ViewStyle = {
       top: offsetTop || offset,
-      justifyContent: "flex-start",
+      height: height,
+      width: width,
+      justifyContent: "center",
       flexDirection: "column-reverse",
     };
 
@@ -166,12 +168,6 @@ class ToastContainer extends Component<Props, State> {
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "position" : undefined}
         style={[styles.container, style]}
-        contentContainerStyle={{
-          height: height,
-          width: width,
-          alignItems: "center",
-          justifyContent: "center",
-        }}
         pointerEvents="box-none"
       >
         {toasts