Skip to content

Commit 1ca33a5

Browse files
retyuiretyui
authored
Add experimental_backgroundImage style prop (#5061)
1 parent 19204d5 commit 1ca33a5

15 files changed

Lines changed: 322 additions & 0 deletions

‎docs/view-style-props.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ id: view-style-props
33
title: View Style Props
44
---
55

6+
import ExperimentalAPIWarning from './\_experimental-api-warning.mdx';
7+
import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
8+
69
### Example
710

811
```SnackPlayer name=ViewStyleProps
@@ -71,6 +74,33 @@ export default App;
7174

7275
---
7376

77+
### `experimental_backgroundImage`
78+
79+
<ExperimentalAPIWarning />
80+
81+
`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.
82+
83+
```tsx
84+
// Simple usage:
85+
<View style={{
86+
experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
87+
}} />
88+
<View style={{
89+
experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
90+
}} />
91+
```
92+
93+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
94+
95+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
96+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>RadialGradientExample.js</a>
97+
98+
| Type |
99+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
100+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
101+
102+
---
103+
74104
### `borderBottomColor`
75105

76106
| Type |

‎website/versioned_docs/version-0.77/_experimental-api-warning.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::important[Experimental 🧪]
2+
3+
**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.
4+
5+
:::

‎website/versioned_docs/version-0.77/view-style-props.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ id: view-style-props
33
title: View Style Props
44
---
55

6+
import ExperimentalAPIWarning from './\_experimental-api-warning.mdx';
7+
import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
8+
69
### Example
710

811
```SnackPlayer name=ViewStyleProps
@@ -71,6 +74,32 @@ export default App;
7174

7275
---
7376

77+
### `experimental_backgroundImage`
78+
79+
<ExperimentalAPIWarning />
80+
81+
`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.
82+
83+
```tsx
84+
// Simple usage:
85+
<View
86+
style={{
87+
experimental_backgroundImage:
88+
'linear-gradient(45deg, blue, red)',
89+
}}
90+
/>
91+
```
92+
93+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
94+
95+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
96+
97+
| Type |
98+
| ----------------------------------------------------------------------------------------------- |
99+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }` |
100+
101+
---
102+
74103
### `borderBottomColor`
75104

76105
| Type |

‎website/versioned_docs/version-0.78/_experimental-api-warning.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::important[Experimental 🧪]
2+
3+
**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.
4+
5+
:::

‎website/versioned_docs/version-0.78/view-style-props.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ id: view-style-props
33
title: View Style Props
44
---
55

6+
import ExperimentalAPIWarning from './\_experimental-api-warning.mdx';
7+
import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
8+
69
### Example
710

811
```SnackPlayer name=ViewStyleProps
@@ -71,6 +74,32 @@ export default App;
7174

7275
---
7376

77+
### `experimental_backgroundImage`
78+
79+
<ExperimentalAPIWarning />
80+
81+
`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.
82+
83+
```tsx
84+
// Simple usage:
85+
<View
86+
style={{
87+
experimental_backgroundImage:
88+
'linear-gradient(45deg, blue, red)',
89+
}}
90+
/>
91+
```
92+
93+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
94+
95+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
96+
97+
| Type |
98+
| ----------------------------------------------------------------------------------------------- |
99+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }` |
100+
101+
---
102+
74103
### `borderBottomColor`
75104

76105
| Type |

‎website/versioned_docs/version-0.79/_experimental-api-warning.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::important[Experimental 🧪]
2+
3+
**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.
4+
5+
:::

‎website/versioned_docs/version-0.79/view-style-props.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ id: view-style-props
33
title: View Style Props
44
---
55

6+
import ExperimentalAPIWarning from './\_experimental-api-warning.mdx';
7+
import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
8+
69
### Example
710

811
```SnackPlayer name=ViewStyleProps
@@ -71,6 +74,32 @@ export default App;
7174

7275
---
7376

77+
### `experimental_backgroundImage`
78+
79+
<ExperimentalAPIWarning />
80+
81+
`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.
82+
83+
```tsx
84+
// Simple usage:
85+
<View
86+
style={{
87+
experimental_backgroundImage:
88+
'linear-gradient(45deg, blue, red)',
89+
}}
90+
/>
91+
```
92+
93+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
94+
95+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
96+
97+
| Type |
98+
| ----------------------------------------------------------------------------------------------- |
99+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }` |
100+
101+
---
102+
74103
### `borderBottomColor`
75104

76105
| Type |

‎website/versioned_docs/version-0.80/_experimental-api-warning.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::important[Experimental 🧪]
2+
3+
**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.
4+
5+
:::

‎website/versioned_docs/version-0.80/view-style-props.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ id: view-style-props
33
title: View Style Props
44
---
55

6+
import ExperimentalAPIWarning from './\_experimental-api-warning.mdx';
7+
import {getCoreBranchNameForCurrentVersion} from '@site/src/getCoreBranchNameForCurrentVersion';
8+
69
### Example
710

811
```SnackPlayer name=ViewStyleProps
@@ -71,6 +74,33 @@ export default App;
7174

7275
---
7376

77+
### `experimental_backgroundImage`
78+
79+
<ExperimentalAPIWarning />
80+
81+
`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.
82+
83+
```tsx
84+
// Simple usage:
85+
<View style={{
86+
experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
87+
}} />
88+
<View style={{
89+
experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
90+
}} />
91+
```
92+
93+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
94+
95+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
96+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>RadialGradientExample.js</a>
97+
98+
| Type |
99+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
100+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
101+
102+
---
103+
74104
### `borderBottomColor`
75105

76106
| Type |

‎website/versioned_docs/version-0.81/_experimental-api-warning.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::important[Experimental 🧪]
2+
3+
**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.
4+
5+
:::

0 commit comments

Comments
 (0)