🛠️ Fix shadow* and pointerEvents Warnings in Expo Router/Web

Common Issue: When using Expo Router with React Native Web, you encounter warnings about shadow* properties and pointerEvents props that aren't compatible with web environments.

📋 Problem Analysis

This issue affects most Expo Router templates and React Navigation setups when targeting web platforms. The warnings occur because:

1. Shadow Properties: React Native's shadowColor, shadowOffset, shadowOpacity, shadowRadius don't work on web - need boxShadow* equivalents
2. pointerEvents Props: Web compatibility requires pointerEvents to be in style objects, not as direct props

🎯 Affected Packages & Versions

Package	Version	Files Affected
expo-router	~5.1.4	build/views/Sitemap.js
@react-navigation/elements	^2.6.1	lib/module/Screen.js, lib/module/Header/Header.js
react-native-screens	~4.11.1	lib/commonjs/components/ScreenStackHeaderConfig.js

🔧 Solution Overview

We'll use Bun's native patch system to fix these issues:

1. Replace shadow* properties with boxShadow* equivalents
2. Move pointerEvents props to style objects
3. Apply patches automatically on install

📦 Step-by-Step Implementation

1. Install Dependencies (if needed)

# No additional dependencies needed - Bun has native patching support

2. Apply Patches

A. Fix Expo Router Shadow Properties

bun patch expo-router

Edit: node_modules/expo-router/build/views/Sitemap.js

Find (around line 139):

shadowColor: '#000',
shadowOffset: {
    width: 0,
    height: 3,
},
shadowOpacity: 0.33,
shadowRadius: 3,

Replace with:

boxShadowColor: '#000',
boxShadowOffset: {
    width: 0,
    height: 3,
},
boxShadowOpacity: 0.33,
boxShadowRadius: 3,

Commit:

bun patch --commit node_modules/expo-router

B. Fix React Navigation pointerEvents

bun patch @react-navigation/elements

Edit: node_modules/@react-navigation/elements/lib/module/Screen.js

Find:

children: /*#__PURE__*/_jsx(View, {
  pointerEvents: "box-none",
  onLayout: e => {
    // ...
  },
  style: [styles.header, headerTransparent ? styles.absolute : null],

Replace with:

children: /*#__PURE__*/_jsx(View, {
  onLayout: e => {
    // ...
  },
  style: [{ pointerEvents: "box-none" }, styles.header, headerTransparent ? styles.absolute : null],

Edit: node_modules/@react-navigation/elements/lib/module/Header/Header.js

Apply similar fixes to 7 instances of pointerEvents props, moving them all to style objects.

Commit:

bun patch --commit node_modules/@react-navigation/elements

C. Fix React Native Screens

bun patch react-native-screens

Edit: node_modules/react-native-screens/lib/commonjs/components/ScreenStackHeaderConfig.js

Find:

style: styles.headerConfig,
pointerEvents: "box-none"

Replace with:

style: [{ pointerEvents: "box-none" }, styles.headerConfig]

Commit:

bun patch --commit node_modules/react-native-screens

3. Verify Setup

Your package.json should now include:

{
  "patchedDependencies": {
    "[email protected]": "patches/[email protected]",
    "@react-navigation/[email protected]": "patches/@react-navigation%[email protected]",
    "[email protected]": "patches/[email protected]"
  }
}

4. Test Installation

rm -rf node_modules && bun install

📁 Generated Patch Files

The following patch files will be created in your patches/ directory:

[email protected]

diff --git a/build/views/Sitemap.js b/build/views/Sitemap.js
index a61428d..f6f2327 100644
--- a/build/views/Sitemap.js
+++ b/build/views/Sitemap.js
@@ -136,13 +136,13 @@ const styles = react_native_1.StyleSheet.create({
         paddingVertical: 16,
         borderBottomWidth: 1,
         borderColor: '#313538',
-        shadowColor: '#000',
-        shadowOffset: {
+        boxShadowColor: '#000',
+        boxShadowOffset: {
             width: 0,
             height: 3,
         },
-        shadowOpacity: 0.33,
-        shadowRadius: 3,
+        boxShadowOpacity: 0.33,
+        boxShadowRadius: 3,
         elevation: 8,
     },
     headerContent: {

@react-navigation%[email protected]

Contains fixes for:

• Screen.js: 1 pointerEvents fix
• Header/Header.js: 7 pointerEvents fixes (including conditional logic)

[email protected]

diff --git a/lib/commonjs/components/ScreenStackHeaderConfig.js b/lib/commonjs/components/ScreenStackHeaderConfig.js
index abc123..def456 100644
--- a/lib/commonjs/components/ScreenStackHeaderConfig.js
+++ b/lib/commonjs/components/ScreenStackHeaderConfig.js
@@ -17,8 +17,7 @@ const ScreenStackHeaderConfig = exports.ScreenStackHeaderConfig = /*#__PURE__*/
   ref: ref,
   topInsetEnabled: _edgeToEdge.EDGE_TO_EDGE ? true : props.topInsetEnabled,
-  style: styles.headerConfig,
-  pointerEvents: "box-none"
+  style: [{ pointerEvents: "box-none" }, styles.headerConfig]
 })));

✅ Verification Commands

After applying patches, verify fixes:

# Check that no direct pointerEvents props remain (should return empty)
grep -R 'pointerEvents: "' node_modules/@react-navigation/elements node_modules/react-native-screens | grep -v 'style.*pointerEvents'

# Check that boxShadow* properties are applied
grep -A5 -B5 'boxShadowColor' node_modules/expo-router/build/views/Sitemap.js

🚀 Benefits

• ✅ Eliminates warnings in web builds
• ✅ Automatic application on every install
• ✅ Team consistency via committed patches
• ✅ Minimal overhead - only affects problematic files
• ✅ Future-proof - patches persist across installs

🏗️ Project Setup Requirements

• Bun as package manager
• Expo Router ~5.1.4
• React Navigation Elements ^2.6.1
• React Native Screens ~4.11.1

📝 Notes

• Patches are applied automatically during bun install
• Commit the patches/ directory to version control
• If package versions change, patches may need updating
• No additional dependencies required - uses Bun's native patching

🔗 Related Issues

This solution addresses common warnings in:

• Expo Router web builds
• React Navigation web compatibility
• Next.js + React Native Web setups
• Any template using these packages for web targets

---

✨ Created by: Fixing common Expo Router/Web compatibility issues
🔧 Tested with: Bun 1.2.19, Expo SDK 53, React Native 0.80+