[Feature request] Add a way to add style to <img />

[kopax-polyconseil]

Using react-native-web 0.17.1, we are having a BlurImage on which we want to apply a transform: scale(1.1) style.

Looking at the source code, the current API doesn't allow it.

react-native-web/packages/react-native-web/src/exports/Image/index.js

Line 290 in a6c9764

style={[

Screenshots

*Web - [without style on img]	*Web - [with style on img]

Possible resolution

https://github.com/pass-culture/pass-culture-app-native/pull/1731/files#diff-64d21386a1fda6922603e6d64ab36adbf1b8143e014a6bb76a3f29ffd4387507

Would you be up for adding such a feature in react-native-web future version?

Thanks a lot.

[yuxizhe]

@kopax-polyconseil why not use style prop <Image style={{transform: 'scale(1.1)'}}>

[kopax-polyconseil]

@kopax-polyconseil why not use style prop <Image style={{transform: 'scale(1.1)'}}>

I think I tried, at the time I wrote. Does it work now ?

[kopax-polyconseil]

@yuxizhe I just checked and this is what TypeScripts tells me:

TS2769: No overload matches this call.   Overload 1 of 2, '(props: Omit<Omit<ImageProps & RefAttributes<Image> & { height: number; width: number; }, never> & Partial<Pick<ImageProps & RefAttributes<Image> & { ...; }, never>>, "theme"> & { ...; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.     Type '{ transform: string; }' is not assignable to type 'StyleProp<ImageStyle>'.       Types of property 'transform' are incompatible.         Type 'string' is not assignable to type '(PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ... 7 more ... | MatrixTransform)[] | undefined'.   Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof Image, DefaultTheme, { height: number; width: number; }, never, typeof Image, typeof Image>): ReactElement<...>', gave the following error.     Type '{ transform: string; }' is not assignable to type 'StyleProp<ImageStyle>'.       Types of property 'transform' are incompatible.         Type 'string' is not assignable to type '(PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ... 7 more ... | MatrixTransform)[] | undefined'.

So far, we have to stick to our patch-package until this is properly fixed.

[necolas]

That's because (as explained in the ts error message you pasted) you're passing a transform string where React Native expects an object

[kopax-polyconseil]

@necolas the format was given by @yuxizhe in the previous message. How should I write to redo the test ?