fix: again remove animations because it causes no-tap-register bug

components/video-player/Controls.tsx

@@ -71,44 +71,6 @@ export const Controls: React.FC<Props> = ({
 
   const windowDimensions = Dimensions.get("window");
 
-  const op = useSharedValue<number>(1);
-  const tr = useSharedValue<number>(10);
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-    };
-  });
-  const animatedTopStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-      transform: [
-        {
-          translateY: -tr.value,
-        },
-      ],
-    };
-  });
-  const animatedBottomStyles = useAnimatedStyle(() => {
-    return {
-      opacity: op.value,
-      transform: [
-        {
-          translateY: tr.value,
-        },
-      ],
-    };
-  });
-
-  useEffect(() => {
-    if (showControls || isBuffering) {
-      op.value = withTiming(1, { duration: 200 });
-      tr.value = withTiming(0, { duration: 200 });
-    } else {
-      op.value = withTiming(0, { duration: 200 });
-      tr.value = withTiming(10, { duration: 200 });
-    }
-  }, [showControls, isBuffering]);
-
   const { previousItem, nextItem } = useAdjacentItems({ item });
   const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
     item,
@@ -322,7 +284,7 @@ export const Controls: React.FC<Props> = ({
           toggleControls();
         }}
       >
-        <Animated.View
+        <View
           style={[
             {
               position: "absolute",
@@ -331,10 +293,9 @@ export const Controls: React.FC<Props> = ({
               width: windowDimensions.width + 100,
               height: windowDimensions.height + 100,
             },
-            animatedStyles,
           ]}
           className={`bg-black/50 z-0`}
-        ></Animated.View>
+        ></View>
       </Pressable>
 
       <View
@@ -353,14 +314,14 @@ export const Controls: React.FC<Props> = ({
         <Loader />
       </View>
 
-      <Animated.View
+      <View
         style={[
           {
             position: "absolute",
             top: insets.top,
             right: insets.right,
+            opacity: showControls ? 1 : 0,
           },
-          animatedTopStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
         className={`flex flex-row items-center space-x-2 z-10 p-4`}
@@ -383,9 +344,9 @@ export const Controls: React.FC<Props> = ({
         >
           <Ionicons name="close" size={24} color="white" />
         </TouchableOpacity>
-      </Animated.View>
+      </View>
 
-      <Animated.View
+      <View
         style={[
           {
             position: "absolute",
@@ -393,8 +354,8 @@ export const Controls: React.FC<Props> = ({
             maxHeight: windowDimensions.height,
             left: insets.left,
             bottom: Platform.OS === "ios" ? insets.bottom : insets.bottom,
+            opacity: showControls ? 1 : 0,
           },
-          animatedBottomStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
         className={`flex flex-col p-4 `}
@@ -529,7 +490,7 @@ export const Controls: React.FC<Props> = ({
             </View>
           </View>
         </View>
-      </Animated.View>
+      </View>
     </View>
   );
 };