Skip to content

feat(iOS): background-size, position and repeat styles#52283

Closed
intergalacticspacehighway wants to merge 9 commits intofacebook:mainfrom
intergalacticspacehighway:feat/background-styles-ios
Closed

feat(iOS): background-size, position and repeat styles#52283
intergalacticspacehighway wants to merge 9 commits intofacebook:mainfrom
intergalacticspacehighway:feat/background-styles-ios

Conversation

@intergalacticspacehighway
Copy link
Copy Markdown
Contributor

@intergalacticspacehighway intergalacticspacehighway commented Jun 26, 2025 •
edited
Loading

Summary:

This PR adds support for background size, position and repeat styles. It follows the CSS spec. Currently we default to background-origin: padding-box and background-clip : border-box to match the web's behavior. We can introduce these styles later. I have split the PR intro three parts for review. This PR includes iOS only changes. I wanted to introduce one style at a time, but CSS spec is such that size, position and repeat are intertwined.

Changelog:

[IOS][ADDED] - Background size, position and repeat styles.

Test Plan:

Merge the JS PR, run pod install and test RNTester example, it includes BackgroundImageExample. I have also added testcases for syntax parsing in JS.

Screen.Recording.2025-06-26.at.10.47.17.AM.mp4

@intergalacticspacehighway
ios changes
a232254 
ios build fix

ios nits

ios nits

nit ios naming

null checks
@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 26, 2025
@intergalacticspacehighway intergalacticspacehighway mentioned this pull request Jun 26, 2025
Closed
@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jun 26, 2025
@cortinico cortinico added p: Expo Partner: Expo Partner labels Sep 10, 2025
@facebook-github-bot
Copy link
Copy Markdown
Contributor

facebook-github-bot commented Sep 22, 2025

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this in D82993888.

@jorge-cab
Copy link
Copy Markdown
Contributor

jorge-cab commented Sep 26, 2025

Hmm position seems a bit funky. I'm still reviewing the rest of this PR but this difference popped out to me. There's a chance I'm doing something weird with my styles so do keep me honest

iOS:
Screenshot 2025-09-26 at 10 15 31 AM

style={{
  width: 200,
  height: 200,
  experimental_backgroundImage:
    'linear-gradient(45deg, #ff6b6b 25%, transparent 25%, transparent 75%, #4ecdc4 75%)',
  experimental_backgroundRepeat: 'space',
  experimental_backgroundSize: '33.33px 66.67px',
  experimental_backgroundPosition: '16.5px 8.25px',
  backgroundColor: 'white',
  borderWidth: 2,
  borderColor: 'purple',
}}

Web:
Screenshot 2025-09-26 at 10 17 14 AM

  style="
      width: 200px;
      height: 200px;
      background-image: linear-gradient(
          45deg,
          #ff6b6b 25%,
          transparent 25%,
          transparent 75%,
          #4ecdc4 75%
      );
      background-repeat: space;
      background-size: 33.33px 66.67px;
      background-position: 16.5px 8.25px;
      background-color: white;
      border: 2px solid purple;
  "

@jorge-cab jorge-cab mentioned this pull request Sep 26, 2025
Closed
@intergalacticspacehighway
Copy link
Copy Markdown
Contributor Author

intergalacticspacehighway commented Sep 29, 2025

Fixed here! Thanks for reviewing and catching the bug 🙏

@intergalacticspacehighway
Copy link
Copy Markdown
Contributor Author

intergalacticspacehighway commented Oct 15, 2025

The prebuild CI failure seems like a network issue. It failed at the upload header step.

[Upload headers](https://github.com/facebook/react-native/actions/runs/18373663243/job/52343872369?pr=52283#annotation:13:16)
Failed to CreateArtifact: Unable to make request: ENOTFOUND
If you are using self-hosted runners, please make sure your runner has access to all GitHub endpoints:

@meta-codesync meta-codesync Bot closed this in d8c2f1c Oct 24, 2025
meta-codesync Bot pushed a commit that referenced this pull request Oct 24, 2025
@intergalacticspacehighway @meta-codesync
feat(JS): background-size, position and repeat styles (#52284)
3d08683 
Summary:
This PR adds support for background size, position and repeat styles. It follows the [CSS](https://www.w3.org/TR/css-backgrounds-3/#backgrounds) spec. Currently we default to `background-origin: padding-box` and `background-clip : border-box` to match the web's behavior. We can introduce these styles later. I have split the PR intro three parts for review. This PR includes JS parsing and style propagation to native changes. I wanted to introduce one style at a time, but CSS spec is such that size, position and repeat are intertwined.

## Changelog:
[GENERAL][ADDED] - Background size, position and repeat styles.
<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #52284

Test Plan:
Merge the [iOS](#52283) and [android](#52282) PR into this, this PR includes `BackgroundImageExample`. I have also added testcases for parsing syntax in JS.

https://github.com/user-attachments/assets/b7192fdf-52ba-4eb0-a1be-d47c72d87e92

Reviewed By: joevilches

Differential Revision: D82973282

Pulled By: jorge-cab

fbshipit-source-id: a94e33962c6708be963e1cac049da50d4764da64
@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Oct 24, 2025
@meta-codesync
Copy link
Copy Markdown

meta-codesync Bot commented Oct 24, 2025

@jorge-cab merged this pull request in d8c2f1c.

@react-native-bot
Copy link
Copy Markdown
Collaborator

react-native-bot commented Oct 24, 2025

This pull request was successfully merged by @intergalacticspacehighway in d8c2f1c

When will my fix make it into a release? | How to file a pick request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. p: Expo Partner: Expo Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@intergalacticspacehighway @facebook-github-bot @jorge-cab @react-native-bot @cortinico