fix: [ScreenFooter] - Fix taps absorbed in footer area on Android (physical devices)

Made-with: Cursor

Author: MIchaelZablianov

packages/react-native-ui-lib/src/components/screenFooter/index.tsx

@@ -226,6 +226,16 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
   const childrenArray = React.Children.toArray(children).slice(0, 3).map(renderChild);
 
+  // Touch fall-through fix:
+  // `pointerEvents` on a Reanimated Animated.View is unreliable on Android
+  // (https://github.com/software-mansion/react-native-reanimated/issues/8497,
+  //  https://github.com/software-mansion/react-native-gesture-handler/issues/1270),
+  // which makes taps in the footer's transparent area absorbed instead of falling
+  // through to content behind. When the footer is statically visible (no entrance
+  // animation needed) we skip Animated.View and render a plain RN View tree, which
+  // honours pointerEvents on Android.
+  const isStaticVisible = animationDuration === 0 && visible;
+
   const renderFooterContent = useCallback(() => {
     return (
       <>
@@ -238,6 +248,21 @@ const ScreenFooter = (props: ScreenFooterProps) => {
   }, [renderBackground, testID, contentContainerStyle, childrenArray]);
 
   if (keyboardBehavior === KeyboardBehavior.HOISTED) {
+    if (isStaticVisible) {
+      return (
+        <View pointerEvents="box-none" style={styles.container}>
+          <Keyboard.KeyboardAccessoryView
+            renderContent={renderFooterContent}
+            kbInputRef={undefined}
+            scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET}
+            useSafeArea={false}
+            manageScrollView={false}
+            revealKeyboardInteractive
+            onHeightChanged={setHeight}
+          />
+        </View>
+      );
+    }
     return (
       <Animated.View style={[styles.container, hoistedAnimatedStyle]} pointerEvents={visible ? 'box-none' : 'none'}>
         <Keyboard.KeyboardAccessoryView
@@ -253,6 +278,14 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     );
   }
 
+  if (isStaticVisible) {
+    return (
+      <View testID={testID} onLayout={onLayout} pointerEvents="box-none" style={styles.container}>
+        {renderFooterContent()}
+      </View>
+    );
+  }
+
   return (
     <Animated.View testID={testID} onLayout={onLayout} style={[styles.container, stickyAnimatedStyle]}>
       {renderFooterContent()}