From b6dd576706d57de08420d73b66b47448697983f0 Mon Sep 17 00:00:00 2001
From: Youssef Henna <youssef.hisham14@gmail.com>
Date: Wed, 27 May 2026 12:30:48 +0200
Subject: [PATCH] Reduce warnings

---
 example/src/App.tsx                                |  2 +-
 .../core/src/components/DatePicker/DatePicker.tsx  |  4 ++--
 .../MediaPlayer/VideoPlayer/VideoPlayer.tsx        |  2 +-
 packages/core/src/components/Portal/PortalHost.tsx |  7 ++-----
 .../core/src/components/Portal/PortalManager.tsx   |  3 +--
 packages/core/src/components/Surface.tsx           | 14 ++++----------
 packages/core/src/components/TextField.tsx         |  2 +-
 .../deprecated-components/AvoidKeyboardView.tsx    |  6 +-----
 8 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index dfb7ffea6..647a3861d 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -314,10 +314,10 @@ const AnimatedSplashScreen: React.FC<
       {isAppReady && children}
       {!isSplashAnimationComplete && (
         <Animated.View
-          pointerEvents="none"
           style={[
             StyleSheet.absoluteFill,
             {
+              pointerEvents: "none",
               backgroundColor:
                 Constants?.expoConfig?.splash?.backgroundColor ||
                 "rgba(90, 69, 255, 1)",
diff --git a/packages/core/src/components/DatePicker/DatePicker.tsx b/packages/core/src/components/DatePicker/DatePicker.tsx
index e56984269..2ebbd058a 100644
--- a/packages/core/src/components/DatePicker/DatePicker.tsx
+++ b/packages/core/src/components/DatePicker/DatePicker.tsx
@@ -444,7 +444,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <>
       <Touchable disabled={disabled} onPress={toggleVisibility}>
-        <View pointerEvents="none">
+        <View style={{ pointerEvents: "none" }}>
           <View
             style={StyleSheet.flatten([
               styles.container,
@@ -491,10 +491,10 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                 // Position colored placeholder and gray placeholder on top of each other and crossfade them
                 // This gives the effect of animating the color, but allows us to use native driver
                 <View
-                  pointerEvents="none"
                   style={[
                     StyleSheet.absoluteFill,
                     {
+                      pointerEvents: "none",
                       opacity:
                         // Hide the label in minimized state until we measure its width
                         date || focused ? (labelLayout.measured ? 1 : 0) : 1,
diff --git a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
index 420e2a52f..5a501413b 100644
--- a/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
+++ b/packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
@@ -268,7 +268,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
             {...videoPlayerProps}
           />
           {showPoster && posterSource && (
-            <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            <View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}>
               <Image
                 source={posterSource}
                 resizeMode={posterResizeMode}
diff --git a/packages/core/src/components/Portal/PortalHost.tsx b/packages/core/src/components/Portal/PortalHost.tsx
index e4b450e15..cec0a8e7f 100644
--- a/packages/core/src/components/Portal/PortalHost.tsx
+++ b/packages/core/src/components/Portal/PortalHost.tsx
@@ -124,11 +124,7 @@ export default class PortalHost extends React.Component<Props> {
         }}
       >
         {/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
-        <View
-          style={styles.container}
-          collapsable={false}
-          pointerEvents="box-none"
-        >
+        <View style={styles.container} collapsable={false}>
           {this.props.children}
         </View>
         <PortalManager ref={this.setManager} />
@@ -140,5 +136,6 @@ export default class PortalHost extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    pointerEvents: "none",
   },
 });
diff --git a/packages/core/src/components/Portal/PortalManager.tsx b/packages/core/src/components/Portal/PortalManager.tsx
index ff5d3a928..8ce051259 100644
--- a/packages/core/src/components/Portal/PortalManager.tsx
+++ b/packages/core/src/components/Portal/PortalManager.tsx
@@ -44,8 +44,7 @@ export default class PortalManager extends React.PureComponent<object, State> {
         collapsable={
           false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
         }
-        pointerEvents="box-none"
-        style={StyleSheet.absoluteFill}
+        style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}
       >
         {children}
       </View>
diff --git a/packages/core/src/components/Surface.tsx b/packages/core/src/components/Surface.tsx
index c8d6e02e8..51ca812e2 100644
--- a/packages/core/src/components/Surface.tsx
+++ b/packages/core/src/components/Surface.tsx
@@ -56,10 +56,11 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
   );
 };
 
-const SHADOW_COLOR = "#000";
 const SHADOW_OPACITY = 0.24;
 
-function shadow(elevation: number) {
+function shadow(
+  elevation: number
+): { boxShadow: string } | Record<string, never> {
   if (elevation === 0) {
     return {};
   }
@@ -80,14 +81,7 @@ function shadow(elevation: number) {
   }
 
   return {
-    shadowColor: SHADOW_COLOR,
-    shadowOffset: {
-      width: 0,
-      height,
-    },
-    shadowOpacity: SHADOW_OPACITY,
-    shadowRadius: radius,
-    elevation,
+    boxShadow: `0px ${height}px ${radius}px rgba(0, 0, 0, ${SHADOW_OPACITY})`,
   };
 }
 
diff --git a/packages/core/src/components/TextField.tsx b/packages/core/src/components/TextField.tsx
index 575760ec4..30f72443e 100644
--- a/packages/core/src/components/TextField.tsx
+++ b/packages/core/src/components/TextField.tsx
@@ -472,10 +472,10 @@ class TextField extends React.Component<Props, State> {
             // Position colored placeholder and gray placeholder on top of each other and crossfade them
             // This gives the effect of animating the color, but allows us to use native driver
             <View
-              pointerEvents="none"
               style={[
                 StyleSheet.absoluteFill,
                 {
+                  pointerEvents: "none",
                   opacity:
                     // Hide the label in minimized state until we measure its width
                     this.state.value || this.state.focused
diff --git a/packages/core/src/deprecated-components/AvoidKeyboardView.tsx b/packages/core/src/deprecated-components/AvoidKeyboardView.tsx
index d0b8c8b4e..b9d1debc8 100644
--- a/packages/core/src/deprecated-components/AvoidKeyboardView.tsx
+++ b/packages/core/src/deprecated-components/AvoidKeyboardView.tsx
@@ -14,11 +14,7 @@ try {
   const avoidSoftInputPackage = require("react-native-avoid-softinput");
   AvoidSoftInput = avoidSoftInputPackage.AvoidSoftInput;
   AvoidSoftInputView = avoidSoftInputPackage.AvoidSoftInputView;
-} catch (_) {
-  console.warn(
-    "AvoidKeyboardView: `react-native-avoid-softinput` is not installed, falling back to `View`. No keyboard avoiding capabilties will be used."
-  );
-}
+} catch (_) {}
 
 /**
  * Requires additional setup: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides