Use the "enabled" flag rather than removing event handlers - this fix…

…es horizontal dragging being broken in Expo 46 in the first card in the stack.
jameswilddev · Sep 5, 2022 · c1303cc · c1303cc
1 parent 4c2239d
commit c1303cc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/react-native/components/createStackRoutingComponent/Card/index.tsx b/react-native/components/createStackRoutingComponent/Card/index.tsx
@@ -24,17 +24,14 @@ export const Card: React.FunctionComponent<
   return (
     <Swipeable
       ref={ref}
+      enabled={allowsSwiping}
       childrenContainerStyle={styles.swipeableChildrenContainer}
-      {...(allowsSwiping
-        ? {
-            renderLeftActions: () => <View style={styles.leftActionsView} />,
-            onSwipeableLeftOpen() {
-              onBack(pop, () => {
-                ref.current?.close();
-              });
-            },
-          }
-        : {})}
+      renderLeftActions={() => <View style={styles.leftActionsView} />}
+      onSwipeableLeftOpen={() => {
+        onBack(pop, () => {
+          ref.current?.close();
+        });
+      }}
     >
       {children}
     </Swipeable>

diff --git a/react-native/components/createStackRoutingComponent/Card/unit.tsx b/react-native/components/createStackRoutingComponent/Card/unit.tsx
@@ -25,10 +25,19 @@ test(`renders as expected when disallowing swiping`, () => {
             children: `Example Children`,
           },
         }),
+        renderLeftActions: expect.any(Function),
+        onSwipeableLeftOpen: expect.any(Function),
+        enabled: false,
       },
     }),
   });
 
+  expect(
+    (renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree).props[
+      `renderLeftActions`
+    ]()
+  ).toEqual(<View style={{ width: `100%` }} />);
+
   expect(pop).not.toHaveBeenCalled();
   expect(onBack).not.toHaveBeenCalled();
   expect(
@@ -62,6 +71,7 @@ test(`renders as expected when allowing swiping`, () => {
         }),
         renderLeftActions: expect.any(Function),
         onSwipeableLeftOpen: expect.any(Function),
+        enabled: true,
       },
     }),
   });