experimental_backgroundImage works incorrect

[vasilyeu-pavel]

Description

Hi!

I'm testing an experimental way to set a linear-gradient and found some issues. As I've got it, it has the similar syntax as css has and so I can guess that it should work the same.

• the gradient angle is not the same as in the web
• the gradient angle depends on element sizes
• repeating-linear-gradient doesn't work at all

Expected behaviours is:

1. The angle shouldn't have been changed on blocks with different sizes.
2. The result should be the same as on the web.

Steps to reproduce

1. install the app
2. create two Views with different sizes and set up them the same linear-gradient
3. create the same blocks in the web and compare the result

experimental_backgroundImage: "linear-gradient(45deg, black 9%, red 20%, blue 30%, green 50%, black 90%, transparent)"

React Native Version

0.76.1

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
 OS: macOS 15.1
 CPU: (8) arm64 Apple M1
 Memory: 144.70 MB / 8.00 GB
 Shell:
  version: "5.9"
  path: /bin/zsh
Binaries:
 Node:
  version: 20.11.1
  path: ~/.nvm/versions/node/v20.11.1/bin/node
 Yarn:
  version: 1.22.19
  path: /opt/homebrew/bin/yarn
 npm:
  version: 10.2.4
  path: ~/.nvm/versions/node/v20.11.1/bin/npm
 Watchman: Not Found
Managers:
 CocoaPods:
  version: 1.16.1
  path: /Users/pavelauseitsau/.rbenv/shims/pod
SDKs:
 iOS SDK:
  Platforms:
   - DriverKit 24.1
   - iOS 18.1
   - macOS 15.1
   - tvOS 18.1
   - visionOS 2.1
   - watchOS 11.1
 Android SDK: Not Found
IDEs:
 Android Studio: 2024.1 AI-241.19072.14.2412.12360217
 Xcode:
  version: 16.1/16B40
  path: /usr/bin/xcodebuild
Languages:
 Java:
  version: 21.0.5
  path: /usr/bin/javac
 Ruby:
  version: 3.1.2
  path: /Users/pavelauseitsau/.rbenv/shims/ruby
npmPackages:
 "@react-native-community/cli":
  installed: 15.0.0
  wanted: 15.0.0
 react:
  installed: 18.3.1
  wanted: 18.3.1
 react-native:
  installed: 0.76.1
  wanted: 0.76.1
 react-native-macos: Not Found
npmGlobalPackages:
 "*react-native*": Not Found
Android:
 hermesEnabled: true
 newArchEnabled: true
iOS:
 hermesEnabled: true
 newArchEnabled: true

Stacktrace or Logs

App hasn't been crashing.

Reproducer

Screenshots and Videos

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[NickGerleman]

cc @intergalacticspacehighway @jorge-cab

#47003 Re-kajiggers a lot of rendering specifics here.

Would be a good idea to add these failing cases as RNTeater examples and start adding some (unfortunately not exposed to oss currently) screenshot tests for these.

[intergalacticspacehighway]

Thanks for reporting @vasilyeu-pavel. It will be fixed with this PR, the results will be identical to web. The repeating-linear-gradient is still not supported yet, but i am aiming to add more functions, so will be working on it.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.