Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
azizbecha wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion example/src/Examples/BannerExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ const BannerExample = () => {
<View key={uri} style={styles.item}>
<Image
source={{ uri }}
resizeMode="cover"
style={styles.photo}
accessibilityIgnoresInvertColors
/>
Expand Down Expand Up @@ -131,7 +132,6 @@ const styles = StyleSheet.create({
},
photo: {
flex: 1,
resizeMode: 'cover',
},
fab: {
alignSelf: 'center',
Expand Down
3 changes: 2 additions & 1 deletion example/src/Examples/BottomNavigationBarExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Comment on lines +93 to +95
Copy link
Copy Markdown
Member

@satya164 satya164 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where are you seeing warnings about tintColor? I only see warnings for resizeMode and shadow*

/>
);
}
Expand Down
2 changes: 1 addition & 1 deletion example/src/Examples/BottomNavigationExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const PhotoGallery = ({ route }: Route) => {
<View key={uri} style={styles.item}>
<Image
source={{ uri }}
resizeMode="cover"
style={styles.photo}
accessibilityIgnoresInvertColors
/>
Expand Down Expand Up @@ -185,7 +186,6 @@ const styles = StyleSheet.create({
}),
photo: {
flex: 1,
resizeMode: 'cover',
},
screen: {
flex: 1,
Expand Down
10 changes: 3 additions & 7 deletions src/components/Appbar/AppbarBackIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -50,9 +49,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
icon: {
resizeMode: 'contain',
},
});

export default AppbarBackIcon;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
31 changes: 30 additions & 1 deletion src/components/__tests__/Appbar/Appbar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
}
});
Comment on lines +48 to +75
Copy link
Copy Markdown
Member

@satya164 satya164 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this test. Tests shouldn't test implementation details.

To test for deprecated styles an appropriate test would be to actually check whether there are console warnings. Though I think that's not really necessary.

});

describe('renderAppbarContent', () => {
Expand Down
16 changes: 6 additions & 10 deletions src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
22 changes: 21 additions & 1 deletion src/components/__tests__/Icon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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');
});
Comment on lines +21 to +39
Copy link
Copy Markdown
Member

@satya164 satya164 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this test


it('renders correctly with string source', () => {
const source = 'camera';
const { getByTestId } = render(
Expand Down
27 changes: 27 additions & 0 deletions src/components/__tests__/Surface.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Comment on lines +20 to +44
Copy link
Copy Markdown
Member

@satya164 satya164 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this test.

});

describe('on iOS', () => {
Platform.OS = 'ios';
const styles = StyleSheet.create({
Expand Down
32 changes: 31 additions & 1 deletion src/theme/tokens/sys/elevation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -32,10 +34,38 @@ export const shadowLayers = [
},
];

const getShadowColor = (shadowColor: ColorValue, shadowOpacity: number) =>
color(typeof shadowColor === 'string' ? shadowColor : 'black')
.alpha(shadowOpacity)
.rgb()
.string();
Comment on lines +37 to +41
Copy link
Copy Markdown
Member

@satya164 satya164 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If a non-string is received on Web, it should throw an error as it's a user error instead of defaulting to black.


const getBoxShadowValue = (elevation: number, shadowColor: ColorValue) =>
`0px ${shadowLayers[0].height[elevation]}px ${
shadowLayers[0].shadowRadius[elevation]
}px ${getShadowColor(shadowColor, elevation ? 0.3 : 0)}`;
Copy link
Copy Markdown
Member

@satya164 satya164 May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for interpolations, this is doing color manipulation multiple times even though the color is not changing. Move this to the web branch and assign it to a variable, then reuse the variable in the shadow.


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,
Expand Down
Loading
Loading