fix: prevent passing animated prop to a non animated view #595

gorhom · Oct 3, 2021 · 2ef441f · 2ef441f
1 parent b90a996
commit 2ef441f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 34 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,7 +10,7 @@
     "postinstall": "npx patch-package"
   },
   "dependencies": {
-    "@gorhom/portal": "^1.0.7",
+    "@gorhom/portal": "^1.0.9",
     "@gorhom/showcase-template": "^2.0.4",
     "@react-native-community/blur": "^3.6.0",
     "@react-native-community/masked-view": "0.1.11",

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -699,12 +699,11 @@
   dependencies:
     "@types/hammerjs" "^2.0.36"
 
-"@gorhom/portal@^1.0.7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.7.tgz#e27cd40f8e2b6cb742050bcaa00fdcf94f3dfca8"
-  integrity sha512-lDZZ5/cjvg1GHrK6Swljv1EssndiVz0iXsIOpsI8FS6IDyxIDDnzbHQ6ZhLp95jDhDyE0UTUsAjL2PeI2yVKMQ==
+"@gorhom/portal@^1.0.9":
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.9.tgz#bd66e0e27e49fa3163b89c4c23661f31471a6343"
+  integrity sha512-tQUBKf1kDLK1l+0duYBxRqNMtdIrOAIp2H36Bc7/qUZXRxP1rUvj7EMmv6tdlKN/MzEiKPGx9wY0EmOYTjXIFQ==
   dependencies:
-    immer "^9.0.3"
     nanoid "^3.1.23"
 
 "@gorhom/showcase-template@^2.0.4":
@@ -2241,11 +2240,6 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
-immer@^9.0.3:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.5.tgz#a7154f34fe7064f15f00554cc94c66cc0bf453ec"
-  integrity sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==
-
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"

diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -1,5 +1,5 @@
-import React, { memo, useMemo, useRef } from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import { View, TouchableWithoutFeedback } from 'react-native';
 import Animated, {
   and,
   block,
@@ -41,6 +41,8 @@ const AnimatedTouchableWithoutFeedback = Animated.createAnimatedComponent(
 
 const BottomSheetBackdropComponent = ({
   animatedIndex,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  animatedPosition,
   opacity = DEFAULT_OPACITY,
   appearsOnIndex = DEFAULT_APPEARS_ON_INDEX,
   disappearsOnIndex = DEFAULT_DISAPPEARS_ON_INDEX,
@@ -51,7 +53,7 @@ const BottomSheetBackdropComponent = ({
   accessible: _providedAccessible = DEFAULT_ACCESSIBLE,
   accessibilityRole: _providedAccessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
   accessibilityLabel: _providedAccessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
-  accessibilityHint: _providedAccessiblityHint = DEFAULT_ACCESSIBILITY_HINT,
+  accessibilityHint: _providedAccessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
   ...rest
 }: BottomSheetDefaultBackdropProps) => {
   //#region hooks
@@ -114,33 +116,28 @@ const BottomSheetBackdropComponent = ({
   );
   //#endregion
 
+  const setPointerEvents = useCallback((value: string) => {
+    if (containerRef.current) {
+      ((containerRef.current as any) as View).setNativeProps({
+        pointerEvents: value,
+      });
+    }
+  }, []);
+
   //#region effects
   useCode(
     () =>
       block([
         cond(
           and(eq(animatedIndex, disappearsOnIndex), isTouchable),
-          [
-            set(isTouchable, 0),
-            call([], () => {
-              // @ts-ignore
-              containerRef.current.setNativeProps({
-                pointerEvents: 'none',
-              });
-            }),
-          ],
+          [set(isTouchable, 0), call([], () => setPointerEvents('none'))],
           cond(and(neq(animatedIndex, disappearsOnIndex), not(isTouchable)), [
             set(isTouchable, 1),
-            call([], () => {
-              // @ts-ignore
-              containerRef.current.setNativeProps({
-                pointerEvents: 'auto',
-              });
-            }),
+            call([], () => setPointerEvents('auto')),
           ])
         ),
       ]),
-    []
+    [animatedIndex, disappearsOnIndex, isTouchable, setPointerEvents]
   );
   //#endregion
 
@@ -149,19 +146,24 @@ const BottomSheetBackdropComponent = ({
       accessible={_providedAccessible ?? undefined}
       accessibilityRole={_providedAccessibilityRole ?? undefined}
       accessibilityLabel={_providedAccessibilityLabel ?? undefined}
-      accessibilityHint={_providedAccessiblityHint ?? undefined}
-      onPress={handleOnPress}
+      accessibilityHint={_providedAccessibilityHint ?? undefined}
       style={buttonStyle}
+      onPress={handleOnPress}
       {...rest}
     >
-      <Animated.View key="backdrop" ref={containerRef} style={containerStyle} />
+      <Animated.View ref={containerRef} key="backdrop" style={containerStyle} />
     </AnimatedTouchableWithoutFeedback>
   ) : (
     <Animated.View
-      key="backdrop"
       ref={containerRef}
+      key="backdrop"
+      accessible={_providedAccessible ?? undefined}
+      accessibilityRole={_providedAccessibilityRole ?? undefined}
+      accessibilityLabel={_providedAccessibilityLabel ?? undefined}
+      accessibilityHint={_providedAccessibilityHint ?? undefined}
       pointerEvents={pointerEvents}
       style={containerStyle}
+      {...rest}
     />
   );
 };