fix: replace pointerEvents props with styles

hassankhan · hassankhan · commit 89d38b8fd5ff · 2025-07-29T11:21:47.000+01:00
By replacing usages of `pointerEvents` to use styles instead of props, we won't get an annoying warning in the logs. The underlying issue in React Native Web which prevented children of a `pointer-events: box-none` element from receiving pointer events is resolved by necolas/react-native-web#2789 Fixes react-navigation#12441
diff --git a/example/package.json b/example/package.json
@@ -36,7 +36,7 @@
     "react-native-reanimated": "~3.18.0",
     "react-native-safe-area-context": "5.5.0",
     "react-native-screens": "~4.11.1",
-    "react-native-web": "~0.20.0"
+    "react-native-web": "~0.21.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
diff --git a/packages/bottom-tabs/package.json b/packages/bottom-tabs/package.json
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@react-navigation/native": "workspace:^",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/color": "^4.2.0",
     "@types/react": "~19.0.10",
     "del-cli": "^6.0.0",
diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -380,12 +380,14 @@ export function BottomTabBar({
                 paddingHorizontal: Math.max(insets.left, insets.right),
               },
             ],
+        {
+          pointerEvents: isTabBarHidden ? 'none' : 'auto',
+        },
         tabBarStyle,
       ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
       onLayout={sidebar ? undefined : handleLayout}
     >
-      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View style={[StyleSheet.absoluteFill, { pointerEvents: 'none' }]}>
         {tabBarBackgroundElement}
       </View>
       <View
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.0.10",
     "@types/react-is": "^19.0.0",
     "@types/use-sync-external-store": "^1.5.0",
diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -55,7 +55,7 @@
     "@babel/core": "^7.27.4",
     "@jest/globals": "^30.0.0",
     "@react-navigation/native": "workspace:^",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.0.10",
     "del-cli": "^6.0.0",
     "react": "19.0.0",
diff --git a/packages/elements/package.json b/packages/elements/package.json
@@ -50,7 +50,7 @@
     "@jest/globals": "^30.0.0",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-navigation/native": "workspace:^",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.0.10",
     "@types/use-sync-external-store": "^1.5.0",
     "del-cli": "^6.0.0",
diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
@@ -285,32 +285,45 @@ export function Header(props: Props) {
 
   return (
     <Animated.View
-      pointerEvents="box-none"
-      style={[{ height, minHeight, maxHeight, opacity, transform }]}
+      style={[
+        {
+          pointerEvents: 'box-none',
+          height,
+          minHeight,
+          maxHeight,
+          opacity,
+          transform,
+        },
+      ]}
     >
       <Animated.View
-        pointerEvents="box-none"
-        style={[StyleSheet.absoluteFill, backgroundContainerStyle]}
+        style={[
+          StyleSheet.absoluteFill,
+          { pointerEvents: 'box-none' },
+          backgroundContainerStyle,
+        ]}
       >
         {headerBackground ? (
           headerBackground({ style: backgroundStyle })
         ) : (
           <HeaderBackground
-            pointerEvents={
-              // Allow touch through the header when background color is transparent
-              headerTransparent &&
-              (backgroundStyle.backgroundColor === 'transparent' ||
-                Color(backgroundStyle.backgroundColor).alpha() === 0)
-                ? 'none'
-                : 'auto'
-            }
-            style={backgroundStyle}
+            style={[
+              {
+                // Allow touch through the header when background color is transparent
+                pointerEvents:
+                  headerTransparent &&
+                  (backgroundStyle.backgroundColor === 'transparent' ||
+                    Color(backgroundStyle.backgroundColor).alpha() === 0)
+                    ? 'none'
+                    : 'auto',
+              },
+              backgroundStyle,
+            ]}
           />
         )}
       </Animated.View>
-      <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
+      <View style={{ pointerEvents: 'none', height: headerStatusBarHeight }} />
       <View
-        pointerEvents="box-none"
         style={[
           styles.content,
           Platform.OS === 'ios' && frame.width >= IPAD_MINI_MEDIUM_WIDTH
@@ -319,7 +332,6 @@ export function Header(props: Props) {
         ]}
       >
         <Animated.View
-          pointerEvents="box-none"
           style={[
             styles.start,
             !searchBarVisible && headerTitleAlign === 'center' && styles.expand,
@@ -332,7 +344,6 @@ export function Header(props: Props) {
         {Platform.OS === 'ios' || !searchBarVisible ? (
           <>
             <Animated.View
-              pointerEvents="box-none"
               style={[
                 styles.title,
                 {
@@ -369,7 +380,6 @@ export function Header(props: Props) {
               })}
             </Animated.View>
             <Animated.View
-              pointerEvents="box-none"
               style={[
                 styles.end,
                 styles.expand,
@@ -421,6 +431,7 @@ export function Header(props: Props) {
 
 const styles = StyleSheet.create({
   content: {
+    pointerEvents: 'box-none',
     flex: 1,
     flexDirection: 'row',
     alignItems: 'stretch',
@@ -430,16 +441,19 @@ const styles = StyleSheet.create({
   },
   title: {
     justifyContent: 'center',
+    pointerEvents: 'box-none',
   },
   start: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
+    pointerEvents: 'box-none',
   },
   end: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
+    pointerEvents: 'box-none',
   },
   expand: {
     flexGrow: 1,
diff --git a/packages/elements/src/Header/HeaderSearchBar.tsx b/packages/elements/src/Header/HeaderSearchBar.tsx
@@ -156,10 +156,16 @@ function HeaderSearchBarInternal(
 
   return (
     <Animated.View
-      pointerEvents={visible ? 'auto' : 'none'}
       aria-live="polite"
       aria-hidden={!visible}
-      style={[styles.container, { opacity: visibleAnim }, style]}
+      style={[
+        styles.container,
+        {
+          pointerEvents: visible ? 'auto' : 'none',
+          opacity: visibleAnim,
+        },
+        style,
+      ]}
     >
       <View style={styles.searchbarContainer}>
         <HeaderIcon
diff --git a/packages/elements/src/ResourceSavingView.tsx b/packages/elements/src/ResourceSavingView.tsx
@@ -27,11 +27,13 @@ export function ResourceSavingView({
         // @ts-expect-error: hidden exists on web, but not in React Native
         hidden={!visible}
         style={[
-          { display: visible ? 'flex' : 'none' },
+          {
+            display: visible ? 'flex' : 'none',
+            pointerEvents: visible ? 'auto' : 'none',
+          },
           styles.container,
           style,
         ]}
-        pointerEvents={visible ? 'auto' : 'none'}
         {...rest}
       >
         {children}
@@ -52,7 +54,6 @@ export function ResourceSavingView({
           // This is an workaround for a bug where the clipped view never re-appears
           Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true
         }
-        pointerEvents={visible ? 'auto' : 'none'}
         style={visible ? styles.attached : styles.detached}
       >
         {children}
@@ -68,9 +69,11 @@ const styles = StyleSheet.create({
   },
   attached: {
     flex: 1,
+    pointerEvents: 'auto',
   },
   detached: {
     flex: 1,
     top: FAR_FAR_AWAY,
+    pointerEvents: 'none',
   },
 });
diff --git a/packages/elements/src/Screen.tsx b/packages/elements/src/Screen.tsx
@@ -71,7 +71,6 @@ export function Screen(props: Props) {
         <NavigationContext.Provider value={navigation}>
           <NavigationRouteContext.Provider value={route}>
             <View
-              pointerEvents="box-none"
               onLayout={(e) => {
                 const { height } = e.nativeEvent.layout;
 
@@ -111,6 +110,7 @@ const styles = StyleSheet.create({
   },
   header: {
     zIndex: 1,
+    pointerEvents: 'box-none',
   },
   absolute: {
     position: 'absolute',
diff --git a/packages/material-top-tabs/package.json b/packages/material-top-tabs/package.json
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@react-navigation/native": "workspace:^",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.0.10",
     "del-cli": "^6.0.0",
     "react": "19.0.0",
diff --git a/packages/native-stack/package.json b/packages/native-stack/package.json
@@ -52,7 +52,7 @@
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@react-navigation/native": "workspace:^",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.0.10",
     "del-cli": "^6.0.0",
     "react": "19.0.0",
diff --git a/packages/native/package.json b/packages/native/package.json
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/react": "~19.0.10",
     "@types/react-dom": "~19.1.3",
     "del-cli": "^6.0.0",
diff --git a/packages/react-native-drawer-layout/src/views/Overlay.native.tsx b/packages/react-native-drawer-layout/src/views/Overlay.native.tsx
@@ -16,16 +16,18 @@ export function Overlay({
   ...rest
 }: OverlayProps) {
   const animatedStyle = useAnimatedStyle(() => {
+    const active = progress.value > PROGRESS_EPSILON;
+
     return {
       opacity: progress.value,
+      pointerEvents: active ? 'auto' : 'none',
     };
   }, [progress]);
 
   const animatedProps = useAnimatedProps(() => {
     const active = progress.value > PROGRESS_EPSILON;
 
     return {
-      'pointerEvents': active ? 'auto' : 'none',
       'aria-hidden': !active,
     } as const;
   }, [progress]);
diff --git a/packages/react-native-tab-view/package.json b/packages/react-native-tab-view/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.0.0",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "del-cli": "^6.0.0",
     "react": "19.0.0",
     "react-native": "0.79.3",
diff --git a/packages/react-native-tab-view/src/TabBar.tsx b/packages/react-native-tab-view/src/TabBar.tsx
@@ -622,7 +622,6 @@ export function TabBar<T extends Route>({
   return (
     <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
       <Animated.View
-        pointerEvents="none"
         style={[
           styles.indicatorContainer,
           scrollEnabled ? { transform: [{ translateX }] as any } : null,
@@ -724,5 +723,6 @@ const styles = StyleSheet.create({
     start: 0,
     end: 0,
     bottom: 0,
+    pointerEvents: 'none',
   },
 });
diff --git a/packages/react-native-tab-view/src/TabBarItem.tsx b/packages/react-native-tab-view/src/TabBarItem.tsx
@@ -228,7 +228,7 @@ const TabBarItemInternal = <T extends Route>({
       href={href}
       style={[styles.pressable, tabContainerStyle]}
     >
-      <View pointerEvents="none" style={[styles.item, tabStyle]}>
+      <View style={[styles.item, tabStyle]}>
         {icon}
         <View>
           <Animated.View style={{ opacity: inactiveOpacity }}>
@@ -286,6 +286,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 10,
     minHeight: 48,
+    pointerEvents: 'none',
   },
   badge: {
     position: 'absolute',
diff --git a/packages/stack/package.json b/packages/stack/package.json
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@jest/globals": "^30.0.0",
     "@react-navigation/native": "workspace:^",
-    "@testing-library/react-native": "^13.2.0",
+    "@testing-library/react-native": "^13.2.1",
     "@types/color": "^4.2.0",
     "@types/react": "~19.0.10",
     "del-cli": "^6.0.0",
diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -57,7 +57,7 @@ export function HeaderContainer({
   const { buildHref } = useLinkBuilder();
 
   return (
-    <Animated.View pointerEvents="box-none" style={style}>
+    <Animated.View style={[styles.container, style]}>
       {scenes.slice(-3).map((scene, i, self) => {
         if ((mode === 'screen' && i !== self.length - 1) || !scene) {
           return null;
@@ -164,15 +164,17 @@ export function HeaderContainer({
                       }
                     : undefined
                 }
-                pointerEvents={isFocused ? 'box-none' : 'none'}
                 aria-hidden={!isFocused}
-                style={
+                style={[
                   // Avoid positioning the focused header absolutely
                   // Otherwise accessibility tools don't seem to be able to find it
                   (mode === 'float' && !isFocused) || headerTransparent
                     ? styles.header
-                    : null
-                }
+                    : null,
+                  {
+                    pointerEvents: isFocused ? 'box-none' : 'none',
+                  },
+                ]}
               >
                 {header !== undefined ? header(props) : <Header {...props} />}
               </View>
@@ -185,6 +187,9 @@ export function HeaderContainer({
 }
 
 const styles = StyleSheet.create({
+  container: {
+    pointerEvents: 'box-none',
+  },
   header: {
     position: 'absolute',
     top: 0,
diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
diff --git a/packages/stack/src/views/Stack/CardSheet.tsx b/packages/stack/src/views/Stack/CardSheet.tsx
diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
diff --git a/yarn.lock b/yarn.lock
