react-native-web icon indicating copy to clipboard operation
react-native-web copied to clipboard

Missing `experimental_backgroundImage` style prop support

Open retyui opened this issue 6 months ago • 2 comments

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:

Image

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: '...'},
    })
  }}
/>

retyui avatar Jul 13 '25 17:07 retyui

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 ?

seba9999 avatar Aug 11 '25 08:08 seba9999

I think it's best to use that workaround since backgroundImage has always been supported in RNfWeb

necolas avatar Aug 11 '25 13:08 necolas