From 77542f8d8659039d7d52704e3d43c1d32b4bc4ab Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Mon, 31 Aug 2026 17:24:45 +0200
Subject: [PATCH] feat: Add background-size, position and repeat styles
PR: https://github.com/react/react-native/pull/52284
As `experimental_` available from RN 0.83.x
As statble API available from RN 0.87.x
---
docs/view-style-props.md | 61 ++++++++++++++++
.../version-0.83/view-style-props.md | 70 +++++++++++++++++++
.../version-0.84/view-style-props.md | 70 +++++++++++++++++++
.../version-0.85/view-style-props.md | 70 +++++++++++++++++++
.../version-0.86/view-style-props.md | 70 +++++++++++++++++++
.../version-0.87/view-style-props.md | 61 ++++++++++++++++
6 files changed, 402 insertions(+)
diff --git a/docs/view-style-props.md b/docs/view-style-props.md
index c1be1495c32..21bb479947e 100644
--- a/docs/view-style-props.md
+++ b/docs/view-style-props.md
@@ -118,6 +118,67 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
---
+### `backgroundPosition`
+
+Controls where the background gradient is placed inside the view. This is useful when `backgroundImage` is set, and you want to offset or center it instead of filling the full area.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------------------------------------------- |
+| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
+
+---
+
+### `backgroundRepeat`
+
+Controls whether the background gradient is repeated, and how. This works together with `backgroundImage` to tile gradients or images across the view.
+
+```tsx
+
+```
+
+| Type |
+| -------------------------------------------------------------------------------------------------- |
+| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
+
+---
+
+### `backgroundSize`
+
+Controls the size of the background gradient. This is most useful when `backgroundImage` is set and the gradient should not fill the entire view by default.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------- |
+| string \| array of objects `{x: number, y: number}` |
+
+---
+
### `borderBottomColor`
| Type |
diff --git a/website/versioned_docs/version-0.83/view-style-props.md b/website/versioned_docs/version-0.83/view-style-props.md
index b96b9e03108..f9e6a62d31d 100644
--- a/website/versioned_docs/version-0.83/view-style-props.md
+++ b/website/versioned_docs/version-0.83/view-style-props.md
@@ -100,6 +100,76 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
---
+### `experimental_backgroundPosition`
+
+
+
+Controls where the background gradient is placed inside the view. This is useful when `experimental_backgroundImage` is set, and you want to offset or center it instead of filling the full area.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------------------------------------------- |
+| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
+
+---
+
+### `experimental_backgroundRepeat`
+
+
+
+Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients or images across the view.
+
+```tsx
+
+```
+
+| Type |
+| -------------------------------------------------------------------------------------------------- |
+| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
+
+---
+
+### `experimental_backgroundSize`
+
+
+
+Controls the size of the background gradient. This is most useful when `experimental_backgroundImage` is set and the gradient should not fill the entire view by default.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------- |
+| string \| array of objects `{x: number, y: number}` |
+
+---
+
### `borderBottomColor`
| Type |
diff --git a/website/versioned_docs/version-0.84/view-style-props.md b/website/versioned_docs/version-0.84/view-style-props.md
index b96b9e03108..f9e6a62d31d 100644
--- a/website/versioned_docs/version-0.84/view-style-props.md
+++ b/website/versioned_docs/version-0.84/view-style-props.md
@@ -100,6 +100,76 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
---
+### `experimental_backgroundPosition`
+
+
+
+Controls where the background gradient is placed inside the view. This is useful when `experimental_backgroundImage` is set, and you want to offset or center it instead of filling the full area.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------------------------------------------- |
+| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
+
+---
+
+### `experimental_backgroundRepeat`
+
+
+
+Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients or images across the view.
+
+```tsx
+
+```
+
+| Type |
+| -------------------------------------------------------------------------------------------------- |
+| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
+
+---
+
+### `experimental_backgroundSize`
+
+
+
+Controls the size of the background gradient. This is most useful when `experimental_backgroundImage` is set and the gradient should not fill the entire view by default.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------- |
+| string \| array of objects `{x: number, y: number}` |
+
+---
+
### `borderBottomColor`
| Type |
diff --git a/website/versioned_docs/version-0.85/view-style-props.md b/website/versioned_docs/version-0.85/view-style-props.md
index b96b9e03108..f9e6a62d31d 100644
--- a/website/versioned_docs/version-0.85/view-style-props.md
+++ b/website/versioned_docs/version-0.85/view-style-props.md
@@ -100,6 +100,76 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
---
+### `experimental_backgroundPosition`
+
+
+
+Controls where the background gradient is placed inside the view. This is useful when `experimental_backgroundImage` is set, and you want to offset or center it instead of filling the full area.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------------------------------------------- |
+| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
+
+---
+
+### `experimental_backgroundRepeat`
+
+
+
+Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients or images across the view.
+
+```tsx
+
+```
+
+| Type |
+| -------------------------------------------------------------------------------------------------- |
+| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
+
+---
+
+### `experimental_backgroundSize`
+
+
+
+Controls the size of the background gradient. This is most useful when `experimental_backgroundImage` is set and the gradient should not fill the entire view by default.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------- |
+| string \| array of objects `{x: number, y: number}` |
+
+---
+
### `borderBottomColor`
| Type |
diff --git a/website/versioned_docs/version-0.86/view-style-props.md b/website/versioned_docs/version-0.86/view-style-props.md
index c8f390cb8f7..5edf3eb5181 100644
--- a/website/versioned_docs/version-0.86/view-style-props.md
+++ b/website/versioned_docs/version-0.86/view-style-props.md
@@ -100,6 +100,76 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
---
+### `experimental_backgroundPosition`
+
+
+
+Controls where the background gradient is placed inside the view. This is useful when `experimental_backgroundImage` is set, and you want to offset or center it instead of filling the full area.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------------------------------------------- |
+| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
+
+---
+
+### `experimental_backgroundRepeat`
+
+
+
+Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients or images across the view.
+
+```tsx
+
+```
+
+| Type |
+| -------------------------------------------------------------------------------------------------- |
+| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
+
+---
+
+### `experimental_backgroundSize`
+
+
+
+Controls the size of the background gradient. This is most useful when `experimental_backgroundImage` is set and the gradient should not fill the entire view by default.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------- |
+| string \| array of objects `{x: number, y: number}` |
+
+---
+
### `borderBottomColor`
| Type |
diff --git a/website/versioned_docs/version-0.87/view-style-props.md b/website/versioned_docs/version-0.87/view-style-props.md
index c1be1495c32..21bb479947e 100644
--- a/website/versioned_docs/version-0.87/view-style-props.md
+++ b/website/versioned_docs/version-0.87/view-style-props.md
@@ -118,6 +118,67 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
---
+### `backgroundPosition`
+
+Controls where the background gradient is placed inside the view. This is useful when `backgroundImage` is set, and you want to offset or center it instead of filling the full area.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------------------------------------------- |
+| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
+
+---
+
+### `backgroundRepeat`
+
+Controls whether the background gradient is repeated, and how. This works together with `backgroundImage` to tile gradients or images across the view.
+
+```tsx
+
+```
+
+| Type |
+| -------------------------------------------------------------------------------------------------- |
+| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
+
+---
+
+### `backgroundSize`
+
+Controls the size of the background gradient. This is most useful when `backgroundImage` is set and the gradient should not fill the entire view by default.
+
+```tsx
+
+```
+
+| Type |
+| --------------------------------------------------- |
+| string \| array of objects `{x: number, y: number}` |
+
+---
+
### `borderBottomColor`
| Type |