diff --git a/example/package.json b/example/package.json
index 69f0d0ca6..ddfa7a954 100644
--- 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
index 731accb3f..bdc282e55 100644
--- 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
index 2b6b4ada0..a2f85ec07 100644
--- 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}
>
-
+
) : (
);
};