diff --git a/docs/view-style-props.md b/docs/view-style-props.md index c1be1495c32..fbe71ec81e7 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 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..8f302aa4d28 100644 --- a/website/versioned_docs/version-0.83/view-style-props.md +++ b/website/versioned_docs/version-0.83/view-style-props.md @@ -73,33 +73,6 @@ 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 | @@ -378,6 +351,103 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/ --- +### `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[] }` | + +--- + +### `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 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}` | + +--- + ### `filter` :::note 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..8f302aa4d28 100644 --- a/website/versioned_docs/version-0.84/view-style-props.md +++ b/website/versioned_docs/version-0.84/view-style-props.md @@ -73,33 +73,6 @@ 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 | @@ -378,6 +351,103 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/ --- +### `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[] }` | + +--- + +### `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 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}` | + +--- + ### `filter` :::note 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..8f302aa4d28 100644 --- a/website/versioned_docs/version-0.85/view-style-props.md +++ b/website/versioned_docs/version-0.85/view-style-props.md @@ -73,33 +73,6 @@ 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 | @@ -378,6 +351,103 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/ --- +### `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[] }` | + +--- + +### `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 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}` | + +--- + ### `filter` :::note 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..422007d2889 100644 --- a/website/versioned_docs/version-0.86/view-style-props.md +++ b/website/versioned_docs/version-0.86/view-style-props.md @@ -73,33 +73,6 @@ 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 | @@ -378,6 +351,103 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/ --- +### `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[] }` | + +--- + +### `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 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}` | + +--- + ### `filter` :::note 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..fbe71ec81e7 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 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 |