feat(JS): background-size, position and repeat styles#52284
Closed
intergalacticspacehighway wants to merge 10 commits into
Closed
feat(JS): background-size, position and repeat styles#52284intergalacticspacehighway wants to merge 10 commits into
intergalacticspacehighway wants to merge 10 commits into
Conversation
background image example example js nits beautiful multiple gradient example
facebook-github-bot
added
the
CLA Signed
facebook-github-bot
added
the
Shared with Meta
javache
reviewed
Jun 26, 2025
|
|
||
| const validValues = ['repeat', 'space', 'round', 'no-repeat'] as const; | ||
|
|
||
| export default function processBackgroundRepeat( |
Contributor
There was a problem hiding this comment.
I think we want to do this parsing in native using the new CSSParser infra, and not rely on JS viewconfigs.
Contributor
Author
There was a problem hiding this comment.
yeah, i wanted to mention that. Is it in use already?
Contributor
There was a problem hiding this comment.
Seems like it's still gated behind a feature flag for now: https://github.com/facebook/react-native/blob/c6608685cb7acd3a8017c925de24728bf3d5d62f/packages/react-native/ReactCommon/react/renderer/components/view/BoxShadowPropsConversions.h#L265-L274
Contributor
There was a problem hiding this comment.
Actually, just reading through some of the history there, until we complete another refactor on Android, we will still need JS parsing of these types there.
Contributor
|
@jorge-cab has imported this pull request. If you are a Meta employee, you can view this in D82973282. |
meta-codesync Bot
pushed a commit
that referenced
this pull request
Oct 24, 2025
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 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. <!-- 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: #52283 Test Plan: Merge the [JS](#52284) PR, run `pod install` and test RNTester example, it includes `BackgroundImageExample`. I have also added testcases for syntax parsing in JS. https://github.com/user-attachments/assets/b7192fdf-52ba-4eb0-a1be-d47c72d87e92 Reviewed By: joevilches Differential Revision: D82993888 Pulled By: jorge-cab fbshipit-source-id: af545acaf4b9d116b5905f912c494d2e77324380
meta-codesync Bot
pushed a commit
that referenced
this pull request
Oct 24, 2025
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 android only changes. I wanted to introduce one style at a time, but CSS spec is such that size, position and repeat are intertwined. ## Changelog: [ANDROID][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: #52282 Test Plan: Merge the [JS](#52284) PR, rebuild android app and test RNTester app, it 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: D82993837 Pulled By: jorge-cab fbshipit-source-id: 52859e51d2c4bab27823d3eb913993fdfbb4c04d
|
@jorge-cab merged this pull request in 3d08683. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
This PR adds support for background size, position and repeat styles. It follows the CSS spec. Currently we default to
background-origin: padding-boxandbackground-clip : border-boxto 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.
Test Plan:
Merge the iOS and android PR into this, this PR includes
BackgroundImageExample. I have also added testcases for parsing syntax in JS.Screen.Recording.2025-06-26.at.10.47.17.AM.mp4