Merge pull request #152 from mrpmohiburrahman/mrp/custom-jsx-componen…

…t-breaks-animation fix: custom jsx component breaks animation
gunnartorfis · Nov 19, 2024 · 9b05d26 · 9b05d26
2 parents f2f294e + 61e5ead
commit 9b05d26
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 50 deletions.
diff --git a/example/src/ToastDemo.tsx b/example/src/ToastDemo.tsx
@@ -281,35 +281,19 @@ export const ToastDemo: React.FC = () => {
         title="Custom JSX"
         onPress={() => {
           toast.custom(
-            <View
-              style={{
-                width: '80%',
-                backgroundColor: '#26252A',
-                paddingLeft: 24,
-                paddingRight: 8,
-                paddingVertical: 8,
-                borderRadius: 999,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                borderCurve: 'continuous',
-              }}
-            >
-              <Text
-                style={{
-                  color: '#fff',
-                  fontWeight: '600',
-                }}
-              >
-                Custom JSX
-              </Text>
-              <Pressable
+            <View style={{ alignItems: 'center' }}>
+              <View
                 style={{
-                  backgroundColor: '#40424B',
-                  borderWidth: 1,
-                  borderColor: '#55555C',
+                  width: '80%',
+                  backgroundColor: '#26252A',
+                  paddingLeft: 24,
+                  paddingRight: 8,
+                  paddingVertical: 8,
                   borderRadius: 999,
-                  padding: 8,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  borderCurve: 'continuous',
                 }}
               >
                 <Text
@@ -318,9 +302,30 @@ export const ToastDemo: React.FC = () => {
                     fontWeight: '600',
                   }}
                 >
-                  Press me
+                  Custom JSX
                 </Text>
-              </Pressable>
+                <Pressable
+                  style={{
+                    backgroundColor: '#40424B',
+                    borderWidth: 1,
+                    borderColor: '#55555C',
+                    borderRadius: 999,
+                    padding: 8,
+                  }}
+                  onPress={() => {
+                    console.log('pressed the modal');
+                  }}
+                >
+                  <Text
+                    style={{
+                      color: '#fff',
+                      fontWeight: '600',
+                    }}
+                  >
+                    Press me
+                  </Text>
+                </Pressable>
+              </View>
             </View>,
             {
               duration: 30000,

diff --git a/src/toast.tsx b/src/toast.tsx
@@ -310,19 +310,15 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
       styles?.closeButtonIcon,
     ]);
 
-    if (jsx) {
-      return jsx;
-    }
-
-    return (
-      <ToastSwipeHandler
-        onRemove={() => {
+    const toastSwipeHandlerProps = React.useMemo(
+      () => ({
+        onRemove: () => {
           onDismiss?.(id);
-        }}
-        onBegin={() => {
+        },
+        onBegin: () => {
           isDragging.current = true;
-        }}
-        onFinalize={() => {
+        },
+        onFinalize: () => {
           isDragging.current = false;
           const timeElapsed = Date.now() - timerStart.current!;
 
@@ -333,18 +329,48 @@ export const Toast = React.forwardRef<ToastRef, ToastProps>(
           } else {
             onDismiss?.(id);
           }
-        }}
-        onPress={() => onPress?.()}
-        enabled={!promiseOptions && dismissible}
-        style={[toastContainerStyleCtx, styles?.toastContainer]}
-        className={cn(
+        },
+        onPress: () => onPress?.(),
+        enabled: !promiseOptions && dismissible,
+        style: [toastContainerStyleCtx, styles?.toastContainer],
+        className: cn(
           classNamesCtx?.toastContainer,
           classNames?.toastContainer
-        )}
-        unstyled={unstyled}
-        important={important}
-        position={position}
-      >
+        ),
+        unstyled: unstyled,
+        important: important,
+        position: position,
+      }),
+      [
+        onDismiss,
+        id,
+        duration,
+        dismissible,
+        promiseOptions,
+        onPress,
+        toastContainerStyleCtx,
+        styles?.toastContainer,
+        classNamesCtx?.toastContainer,
+        classNames?.toastContainer,
+        unstyled,
+        important,
+        position,
+        cn,
+      ]
+    );
+
+    if (jsx) {
+      return (
+        <ToastSwipeHandler {...toastSwipeHandlerProps}>
+          <Animated.View entering={entering} exiting={exiting}>
+            {jsx}
+          </Animated.View>
+        </ToastSwipeHandler>
+      );
+    }
+
+    return (
+      <ToastSwipeHandler {...toastSwipeHandlerProps}>
         <Animated.View
           className={cn(className, classNamesCtx?.toast, classNames?.toast)}
           style={[