From 6d951f0d6d9ac83b04ffbddf245ebe84005b93f8 Mon Sep 17 00:00:00 2001 From: D N <4661784+retyui@users.noreply.github.com> Date: Mon, 27 Apr 2026 11:16:42 +0200 Subject: [PATCH] feat: Add `experimental_backgroundImage` style prop --- docs/view-style-props.md | 30 +++++++++++++++++++ .../_experimental-api-warning.mdx | 5 ++++ .../version-0.77/view-style-props.md | 29 ++++++++++++++++++ .../_experimental-api-warning.mdx | 5 ++++ .../version-0.78/view-style-props.md | 29 ++++++++++++++++++ .../_experimental-api-warning.mdx | 5 ++++ .../version-0.79/view-style-props.md | 29 ++++++++++++++++++ .../_experimental-api-warning.mdx | 5 ++++ .../version-0.80/view-style-props.md | 30 +++++++++++++++++++ .../_experimental-api-warning.mdx | 5 ++++ .../version-0.81/view-style-props.md | 30 +++++++++++++++++++ .../version-0.82/view-style-props.md | 30 +++++++++++++++++++ .../version-0.83/view-style-props.md | 30 +++++++++++++++++++ .../version-0.84/view-style-props.md | 30 +++++++++++++++++++ .../version-0.85/view-style-props.md | 30 +++++++++++++++++++ 15 files changed, 322 insertions(+) create mode 100644 website/versioned_docs/version-0.77/_experimental-api-warning.mdx create mode 100644 website/versioned_docs/version-0.78/_experimental-api-warning.mdx create mode 100644 website/versioned_docs/version-0.79/_experimental-api-warning.mdx create mode 100644 website/versioned_docs/version-0.80/_experimental-api-warning.mdx create mode 100644 website/versioned_docs/version-0.81/_experimental-api-warning.mdx diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 0028a0d9d1d..431557883ad 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type | diff --git a/website/versioned_docs/version-0.77/_experimental-api-warning.mdx b/website/versioned_docs/version-0.77/_experimental-api-warning.mdx new file mode 100644 index 00000000000..6829b79a4f0 --- /dev/null +++ b/website/versioned_docs/version-0.77/_experimental-api-warning.mdx @@ -0,0 +1,5 @@ +:::important[Experimental 🧪] + +**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +::: diff --git a/website/versioned_docs/version-0.77/view-style-props.md b/website/versioned_docs/version-0.77/view-style-props.md index 7aec1e6c7de..693f7f53e20 100644 --- a/website/versioned_docs/version-0.77/view-style-props.md +++ b/website/versioned_docs/version-0.77/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,32 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) using a web-like syntax. + +```tsx +// Simple usage: + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js + +| Type | +| ----------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type | diff --git a/website/versioned_docs/version-0.78/_experimental-api-warning.mdx b/website/versioned_docs/version-0.78/_experimental-api-warning.mdx new file mode 100644 index 00000000000..6829b79a4f0 --- /dev/null +++ b/website/versioned_docs/version-0.78/_experimental-api-warning.mdx @@ -0,0 +1,5 @@ +:::important[Experimental 🧪] + +**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +::: diff --git a/website/versioned_docs/version-0.78/view-style-props.md b/website/versioned_docs/version-0.78/view-style-props.md index bb8ae9fb5f2..274bd09b4c3 100644 --- a/website/versioned_docs/version-0.78/view-style-props.md +++ b/website/versioned_docs/version-0.78/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,32 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) using a web-like syntax. + +```tsx +// Simple usage: + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js + +| Type | +| ----------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type | diff --git a/website/versioned_docs/version-0.79/_experimental-api-warning.mdx b/website/versioned_docs/version-0.79/_experimental-api-warning.mdx new file mode 100644 index 00000000000..6829b79a4f0 --- /dev/null +++ b/website/versioned_docs/version-0.79/_experimental-api-warning.mdx @@ -0,0 +1,5 @@ +:::important[Experimental 🧪] + +**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +::: diff --git a/website/versioned_docs/version-0.79/view-style-props.md b/website/versioned_docs/version-0.79/view-style-props.md index bb8ae9fb5f2..274bd09b4c3 100644 --- a/website/versioned_docs/version-0.79/view-style-props.md +++ b/website/versioned_docs/version-0.79/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,32 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) using a web-like syntax. + +```tsx +// Simple usage: + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js + +| Type | +| ----------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type | diff --git a/website/versioned_docs/version-0.80/_experimental-api-warning.mdx b/website/versioned_docs/version-0.80/_experimental-api-warning.mdx new file mode 100644 index 00000000000..6829b79a4f0 --- /dev/null +++ b/website/versioned_docs/version-0.80/_experimental-api-warning.mdx @@ -0,0 +1,5 @@ +:::important[Experimental 🧪] + +**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +::: diff --git a/website/versioned_docs/version-0.80/view-style-props.md b/website/versioned_docs/version-0.80/view-style-props.md index bb8ae9fb5f2..95895752dca 100644 --- a/website/versioned_docs/version-0.80/view-style-props.md +++ b/website/versioned_docs/version-0.80/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type | diff --git a/website/versioned_docs/version-0.81/_experimental-api-warning.mdx b/website/versioned_docs/version-0.81/_experimental-api-warning.mdx new file mode 100644 index 00000000000..6829b79a4f0 --- /dev/null +++ b/website/versioned_docs/version-0.81/_experimental-api-warning.mdx @@ -0,0 +1,5 @@ +:::important[Experimental 🧪] + +**This API is experimental.** Experimental APIs may contain bugs and are likely to change in a future version of React Native. Don't use them in production. + +::: diff --git a/website/versioned_docs/version-0.81/view-style-props.md b/website/versioned_docs/version-0.81/view-style-props.md index b22e32458ec..4f1c413c202 100644 --- a/website/versioned_docs/version-0.81/view-style-props.md +++ b/website/versioned_docs/version-0.81/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type | diff --git a/website/versioned_docs/version-0.82/view-style-props.md b/website/versioned_docs/version-0.82/view-style-props.md index b22e32458ec..4f1c413c202 100644 --- a/website/versioned_docs/version-0.82/view-style-props.md +++ b/website/versioned_docs/version-0.82/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `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 b22e32458ec..4f1c413c202 100644 --- a/website/versioned_docs/version-0.83/view-style-props.md +++ b/website/versioned_docs/version-0.83/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `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 b22e32458ec..4f1c413c202 100644 --- a/website/versioned_docs/version-0.84/view-style-props.md +++ b/website/versioned_docs/version-0.84/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `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 b22e32458ec..4f1c413c202 100644 --- a/website/versioned_docs/version-0.85/view-style-props.md +++ b/website/versioned_docs/version-0.85/view-style-props.md @@ -3,6 +3,9 @@ id: view-style-props title: View Style Props --- +import ExperimentalAPIWarning from './\_experimental-api-warning.mdx'; +import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion'; + ### Example ```SnackPlayer name=ViewStyleProps @@ -71,6 +74,33 @@ export default App; --- +### `experimental_backgroundImage` + + + +`experimental_backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) ([0.76.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG-0.7x.md#v0760)) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) ([0.80.x+](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0800)) using a web-like syntax. + +```tsx +// Simple usage: + + +``` + +More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports): + +- LinearGradientExample.js +- RadialGradientExample.js + +| Type | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` | + +--- + ### `borderBottomColor` | Type |