Merge branch 'master' of https://github.com/arnnis/react-native-toast…

…-notifications
arnnis · Jun 11, 2022 · 3c47e53 · 3c47e53
2 parents 1b941aa + 5987981
commit 3c47e53
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 12 deletions.
diff --git 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={() => {

diff --git 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,43 @@ class ToastContainer extends Component<Props, State> {
     );
   }
 
+  renderCenterToasts() {
+    const { toasts } = this.state;
+    let { offset, offsetTop } = this.props;
+    let style: ViewStyle = {
+      top: offsetTop || offset,
+      height: height,
+      width: width,
+      justifyContent: "center",
+      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]}
+        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()}
       </>
     );
   }
@@ -159,11 +194,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: {

diff --git 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