fix: resolve RN 0.85 web warnings and upgrade Expo SDK 56

example/package.json

@@ -17,21 +17,21 @@
     "@react-navigation/drawer": "^8.0.0-alpha.31",
     "@react-navigation/native": "^8.0.0-alpha.25",
     "@react-navigation/native-stack": "^8.0.0-alpha.31",
-    "expo": "~56.0.0-preview.11",
+    "expo": "~56.0.0",
     "expo-crypto": "~56.0.3",
-    "expo-dev-client": "~56.0.9",
-    "expo-font": "~56.0.3",
+    "expo-dev-client": "~56.0.13",
+    "expo-font": "~56.0.5",
     "expo-keep-awake": "~56.0.3",
-    "expo-splash-screen": "~56.0.5",
+    "expo-splash-screen": "~56.0.9",
     "expo-status-bar": "~56.0.4",
-    "expo-updates": "~56.0.10",
+    "expo-updates": "~56.0.14",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.85.3",
     "react-native-gesture-handler": "~2.31.1",
     "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
-    "react-native-screens": "4.25.0",
+    "react-native-screens": "4.25.1",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "0.8.3"
   },

example/src/Examples/BannerExample.tsx

@@ -49,6 +49,7 @@ const BannerExample = () => {
             <View key={uri} style={styles.item}>
               <Image
                 source={{ uri }}
+                resizeMode="cover"
                 style={styles.photo}
                 accessibilityIgnoresInvertColors
               />
@@ -131,7 +132,6 @@ const styles = StyleSheet.create({
   },
   photo: {
     flex: 1,
-    resizeMode: 'cover',
   },
   fab: {
     alignSelf: 'center',

example/src/Examples/BottomNavigationExample.tsx

@@ -38,6 +38,7 @@ const PhotoGallery = ({ route }: Route) => {
         <View key={uri} style={styles.item}>
           <Image
             source={{ uri }}
+            resizeMode="cover"
             style={styles.photo}
             accessibilityIgnoresInvertColors
           />
@@ -185,7 +186,6 @@ const styles = StyleSheet.create({
   }),
   photo: {
     flex: 1,
-    resizeMode: 'cover',
   },
   screen: {
     flex: 1,

src/components/Appbar/AppbarBackIcon.tsx

@@ -28,10 +28,8 @@ const AppbarBackIcon = ({
     >
       <Image
         source={require('../../assets/back-chevron.png')}
-        style={[
-          styles.icon,
-          { tintColor: color, width: iosIconSize, height: iosIconSize },
-        ]}
+        resizeMode="contain"
+        style={{ width: iosIconSize, height: iosIconSize, tintColor: color }}
         accessibilityIgnoresInvertColors
       />
     </View>
@@ -50,9 +48,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
-    resizeMode: 'contain',
-  },
 });
 
 export default AppbarBackIcon;

src/components/Icon.tsx

@@ -130,6 +130,7 @@ const Icon = ({
         {...rest}
         testID={testID}
         source={s}
+        resizeMode="contain"
         style={[
           {
             transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
@@ -138,7 +139,6 @@ const Icon = ({
             width: size,
             height: size,
             tintColor: color,
-            resizeMode: `contain`,
           },
         ]}
         {...accessibilityProps}

src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap

@@ -625,22 +625,18 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 >
                   <Image
                     accessibilityIgnoresInvertColors={true}
+                    resizeMode="contain"
                     source={
                       {
                         "testUri": "../../../src/assets/back-chevron.png",
                       }
                     }
                     style={
-                      [
-                        {
-                          "resizeMode": "contain",
-                        },
-                        {
-                          "height": 21,
-                          "tintColor": "rgba(29, 27, 32, 1)",
-                          "width": 21,
-                        },
-                      ]
+                      {
+                        "height": 21,
+                        "tintColor": "rgba(29, 27, 32, 1)",
+                        "width": 21,
+                      }
                     }
                   />
                 </View>

src/theme/tokens/sys/elevation.ts

@@ -1,7 +1,9 @@
 // M3 elevation tokens and shadow builder per spec:
 // https://m3.material.io/styles/elevation/tokens
 
-import { Animated, type ColorValue } from 'react-native';
+import { Animated, Platform, type ColorValue } from 'react-native';
+
+import color from 'color';
 
 import { isAnimatedValue } from '../../../utils/animations';
 import type { Elevation, ThemeElevation } from '../../types';
@@ -32,10 +34,42 @@ export const shadowLayers = [
   },
 ];
 
+const getShadowColor = (shadowColor: ColorValue, shadowOpacity: number) => {
+  if (typeof shadowColor !== 'string') {
+    throw new Error(
+      `Expected a string shadow color on Web, but received a ${typeof shadowColor}.`
+    );
+  }
+
+  return color(shadowColor).alpha(shadowOpacity).rgb().string();
+};
+
+const getBoxShadowValue = (elevation: number, shadowColor: string) =>
+  `0px ${shadowLayers[0].height[elevation]}px ${shadowLayers[0].shadowRadius[elevation]}px ${shadowColor}`;
+
 export function shadow(
   elevation: number | Animated.Value = 0,
   shadowColor: ColorValue
 ) {
+  if (Platform.OS === 'web') {
+    const webShadowColor = getShadowColor(shadowColor, 0.3);
+
+    if (isAnimatedValue(elevation)) {
+      return {
+        boxShadow: elevation.interpolate({
+          inputRange: elevationInputRange,
+          outputRange: elevationInputRange.map((value) =>
+            getBoxShadowValue(value, webShadowColor)
+          ),
+        }),
+      };
+    }
+
+    return {
+      boxShadow: getBoxShadowValue(elevation, webShadowColor),
+    };
+  }
+
   if (isAnimatedValue(elevation)) {
     return {
       shadowColor,