From 625049f47b266819b0b8a7d96b32e12e46837b37 Mon Sep 17 00:00:00 2001
From: Robert Sasak <robert.sasak@gmail.com>
Date: Fri, 9 Sep 2022 22:27:37 +0200
Subject: [PATCH] fix(web): replace setNativeProps with useState (#1076)(by
 @RobertSasak)

React-native-web do not handle setNativeProps
---
 .../BottomSheetBackdrop.tsx                   | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
index 2446c1df9..412401882 100644
--- a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
+++ b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -1,4 +1,5 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { ViewProps } from 'react-native';
 import Animated, {
   interpolate,
   Extrapolate,
@@ -46,8 +47,9 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   //#region variables
-  const containerRef = useRef<Animated.View>(null);
-  const pointerEvents = enableTouchThrough ? 'none' : 'auto';
+  const [pointerEvents, setPointerEvents] = useState<
+    ViewProps['pointerEvents']
+  >(enableTouchThrough ? 'none' : 'auto');
   //#endregion
 
   //#region callbacks
@@ -62,13 +64,7 @@ const BottomSheetBackdropComponent = ({
   }, [snapToIndex, close, disappearsOnIndex, pressBehavior]);
   const handleContainerTouchability = useCallback(
     (shouldDisableTouchability: boolean) => {
-      if (!containerRef.current) {
-        return;
-      }
-      // @ts-ignore
-      containerRef.current.setNativeProps({
-        pointerEvents: shouldDisableTouchability ? 'none' : 'auto',
-      });
+      setPointerEvents(shouldDisableTouchability ? 'none' : 'auto');
     },
     []
   );
@@ -118,8 +114,8 @@ const BottomSheetBackdropComponent = ({
   return pressBehavior !== 'none' ? (
     <TapGestureHandler onGestureEvent={gestureHandler}>
       <Animated.View
-        ref={containerRef}
         style={containerStyle}
+        pointerEvents={pointerEvents}
         accessible={true}
         accessibilityRole="button"
         accessibilityLabel="Bottom Sheet backdrop"
@@ -131,11 +127,7 @@ const BottomSheetBackdropComponent = ({
       </Animated.View>
     </TapGestureHandler>
   ) : (
-    <Animated.View
-      ref={containerRef}
-      pointerEvents={pointerEvents}
-      style={containerStyle}
-    >
+    <Animated.View pointerEvents={pointerEvents} style={containerStyle}>
       {children}
     </Animated.View>
   );