Missing `experimental_backgroundImage` style prop support
Is there an existing issue for this?
- [x] I have searched the existing issues
Describe the issue
Starting from React Native 0.76.x devs can use experimental_backgroundImage style prop to define gradient
linear-gradient (0.76.x):
- https://github.com/facebook/react-native/commit/b99675d78a8269403b68d7eae8dc67ec85aea3e6
- https://github.com/facebook/react-native/commit/bd0aedc8c3dbebf96e123fd1bd33f515d09e2579
radial-gradient (0.80.x):
- https://github.com/facebook/react-native/pull/50209
Expected behavior
experimental_backgroundImage should transformed to backgroundImage in react-native-web
Steps to reproduce
Create RN project and check, code
<View
style={[
styles.container,
{
experimental_backgroundImage: `linear-gradient(116.565deg, rgb(255, 215, 0), rgb(0, 0, 255), rgb(128, 0, 128), rgb(255, 0, 0), rgb(255, 165, 0), rgb(255, 255, 0), rgb(0, 128, 0), rgb(255, 192, 203), rgb(0, 255, 255), rgb(255, 0, 255))`,
},
]}
/>
See:
Test case
https://snack.expo.dev/@retyui/react-native-web-issue
Additional comments
can workarounded by
<View
style={{
...Platform.select({
web: { backgroundImage: '...'},
default: { experimental_backgroundImage: '...'},
})
}}
/>
I've just step into one of your comment regarding react-native-linear-gradient...
So I've updated my RN App untill I remember I use it also in react native web ... And here I am ...
Is this something that could be added ?
I think it's best to use that workaround since backgroundImage has always been supported in RNfWeb