callstack · azizbecha · May 21, 2026
diff --git a/example/package.json b/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"
   },

diff --git a/example/src/Examples/BannerExample.tsx b/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',

diff --git a/example/src/Examples/BottomNavigationBarExample.tsx b/example/src/Examples/BottomNavigationBarExample.tsx
@@ -90,8 +90,9 @@ export default function BottomNavigationBarExample() {
                       accessibilityIgnoresInvertColors
                       source={icon.source}
                       resizeMode="contain"
+                      tintColor={color}
                       fadeDuration={0}
-                      style={{ width: size, height: size, tintColor: color }}
+                      style={{ width: size, height: size }}
                     />
                   );
               }

diff --git a/example/src/Examples/BottomNavigationExample.tsx b/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,

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

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -130,15 +130,15 @@ const Icon = ({
         {...rest}
         testID={testID}
         source={s}
+        tintColor={color}
+        resizeMode="contain"
         style={[
           {
             transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
           },
           {
             width: size,
             height: size,
-            tintColor: color,
-            resizeMode: `contain`,
           },
         ]}
         {...accessibilityProps}

diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Animated } from 'react-native';
+import { Animated, Platform, StyleSheet } from 'react-native';
 
 import { act } from '@testing-library/react-native';
 import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
@@ -44,6 +44,35 @@ describe('Appbar', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('uses boxShadow instead of shadow props on web headers', () => {
+    const originalPlatform = Platform.OS;
+    Platform.OS = 'web';
+
+    try {
+      const { getByTestId } = render(
+        <mockSafeAreaContext.SafeAreaProvider>
+          <Appbar.Header elevated>
+            <Appbar.Content title="Examples" />
+          </Appbar.Header>
+        </mockSafeAreaContext.SafeAreaProvider>
+      );
+
+      const styles = StyleSheet.flatten(
+        getByTestId('appbar-header-root-layer').props.style
+      );
+
+      expect(styles).toMatchObject({
+        boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.3)',
+      });
+      expect(styles).not.toHaveProperty('shadowColor');
+      expect(styles).not.toHaveProperty('shadowOpacity');
+      expect(styles).not.toHaveProperty('shadowOffset');
+      expect(styles).not.toHaveProperty('shadowRadius');
+    } finally {
+      Platform.OS = originalPlatform;
+    }
+  });
 });
 
 describe('renderAppbarContent', () => {

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -625,23 +625,19 @@ 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,
+                        "width": 21,
+                      }
                     }
+                    tintColor="rgba(29, 27, 32, 1)"
                   />
                 </View>
               </View>

diff --git a/src/components/__tests__/Icon.test.tsx b/src/components/__tests__/Icon.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from 'react-native';
+import { Image, StyleSheet } from 'react-native';
 
 import { render } from '../../test-utils';
 import Icon from '../Icon';
@@ -18,6 +18,26 @@ describe('Icon Component', () => {
     expect(imageIcon).toHaveStyle({ width: ICON_SIZE, height: ICON_SIZE });
   });
 
+  it('passes image-specific props without using deprecated style keys', () => {
+    const tintColor = 'tomato';
+    const source = { uri: 'https://picsum.photos/700' };
+    const { getByTestId } = render(
+      <Icon
+        source={source}
+        size={ICON_SIZE}
+        color={tintColor}
+        testID="image-icon"
+      />
+    );
+    const imageIcon = getByTestId('image-icon');
+    const styles = StyleSheet.flatten(imageIcon.props.style);
+
+    expect(imageIcon.props.resizeMode).toBe('contain');
+    expect(imageIcon.props.tintColor).toBe(tintColor);
+    expect(styles).not.toHaveProperty('resizeMode');
+    expect(styles).not.toHaveProperty('tintColor');
+  });
+
   it('renders correctly with string source', () => {
     const source = 'camera';
     const { getByTestId } = render(

diff --git a/src/components/__tests__/Surface.test.tsx b/src/components/__tests__/Surface.test.tsx
@@ -17,6 +17,33 @@ describe('Surface', () => {
     expect(getByTestId(testID).props.pointerEvents).toBe('box-none');
   });
 
+  it('renders web shadows with boxShadow instead of shadow props', () => {
+    const originalPlatform = Platform.OS;
+    Platform.OS = 'web';
+
+    try {
+      const { getByTestId } = render(
+        <Surface elevation={5} testID="surface-test">
+          {null}
+        </Surface>
+      );
+
+      const styles = StyleSheet.flatten(
+        getByTestId('surface-test').props.style
+      );
+
+      expect(styles).toMatchObject({
+        boxShadow: '0px 8px 12px rgba(0, 0, 0, 0.3)',
+      });
+      expect(styles).not.toHaveProperty('shadowColor');
+      expect(styles).not.toHaveProperty('shadowOpacity');
+      expect(styles).not.toHaveProperty('shadowOffset');
+      expect(styles).not.toHaveProperty('shadowRadius');
+    } finally {
+      Platform.OS = originalPlatform;
+    }
+  });
+
   describe('on iOS', () => {
     Platform.OS = 'ios';
     const styles = StyleSheet.create({

diff --git a/src/theme/tokens/sys/elevation.ts b/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,38 @@ export const shadowLayers = [
   },
 ];
 
+const getShadowColor = (shadowColor: ColorValue, shadowOpacity: number) =>
+  color(typeof shadowColor === 'string' ? shadowColor : 'black')
+    .alpha(shadowOpacity)
+    .rgb()
+    .string();
+
+const getBoxShadowValue = (elevation: number, shadowColor: ColorValue) =>
+  `0px ${shadowLayers[0].height[elevation]}px ${
+    shadowLayers[0].shadowRadius[elevation]
+  }px ${getShadowColor(shadowColor, elevation ? 0.3 : 0)}`;
+
 export function shadow(
   elevation: number | Animated.Value = 0,
   shadowColor: ColorValue
 ) {
+  if (Platform.OS === 'web') {
+    if (isAnimatedValue(elevation)) {
+      return {
+        boxShadow: elevation.interpolate({
+          inputRange: elevationInputRange,
+          outputRange: elevationInputRange.map((value) =>
+            getBoxShadowValue(value, shadowColor)
+          ),
+        }),
+      };
+    }
+
+    return {
+      boxShadow: getBoxShadowValue(elevation, shadowColor),
+    };
+  }
+
   if (isAnimatedValue(elevation)) {
     return {
       shadowColor,