Skip to content

Missing experimental_backgroundImage style prop support #2787

Open
@retyui

Description

@retyui

Is there an existing issue for this?

  • 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):

radial-gradient (0.80.x):

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions