Skip to content

Commit fdc1ebf

Browse files
authored
fix: Shadow offsets and numeric colors not working in CSS on web (#7864)
## Summary This PR fixes issues noticed while testing CSS in the web example app ## Example recordings All of examples below didn't work before this PR ### numeric colors Numeric colors were ignored and `undefined` was returned instead. I added conversion to the RGBA string to make it work. https://github.com/user-attachments/assets/df617a80-e897-4812-b733-f0bb6a560674 ### shadowOffset https://github.com/user-attachments/assets/c4b5f7bc-6a71-4f93-bd28-2ec4acd6cb9d ### textShadowOffset https://github.com/user-attachments/assets/115dac49-2399-4ad0-b62c-79c7bc21d01f
1 parent 25a8932 commit fdc1ebf

File tree

2 files changed

+9
-7
lines changed
  • packages/react-native-reanimated/src/css/platform/web/style

2 files changed

+9
-7
lines changed

packages/react-native-reanimated/src/css/platform/web/style/builders/shadows.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,8 @@ import { processColor } from '../processors';
99

1010
type ShadowOffset = NonNullable<ViewStyle['shadowOffset']>;
1111

12-
const processShadowOffset: ValueProcessor<
13-
ShadowOffset,
14-
Record<string, string> | string
15-
> = (value) => ({
16-
width: `${value.width}px`,
17-
height: `${value.height}px`,
18-
});
12+
const processShadowOffset: ValueProcessor<ShadowOffset, string> = (value) =>
13+
`${value.width}px ${value.height}px`;
1914

2015
type BoxShadowProps = Pick<
2116
ViewStyle,

packages/react-native-reanimated/src/css/platform/web/style/processors/colors.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
'use strict';
22
import type { ColorValue } from 'react-native';
33

4+
import { convertToRGBA, rgbaArrayToRGBAColor } from '../../../../../Colors';
5+
import { isNumber } from '../../../../utils';
46
import type { ValueProcessor } from '../types';
57

68
export const processColor: ValueProcessor<ColorValue> = (value) => {
9+
if (isNumber(value)) {
10+
const rgbaArray = convertToRGBA(value);
11+
return rgbaArrayToRGBAColor(rgbaArray);
12+
}
13+
714
if (typeof value !== 'string') {
815
return;
916
}

0 commit comments

Comments
 (0)