Skip to content

Commit d8f2ff1

Browse files
retyuiretyui
committed
feat: Add experimental_backgroundImage style prop
1 parent 024c219 commit d8f2ff1

10 files changed

Lines changed: 242 additions & 0 deletions

File tree

‎docs/view-style-props.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,30 @@ export default App;
7171

7272
---
7373

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

76100
| Type |

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,29 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

72+
---
73+
74+
### `experimental_backgroundImage`
75+
76+
<ExperimentalAPIWarning />
77+
78+
`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.
79+
80+
```tsx
81+
// Simple usage:
82+
<View style={{ experimental_backgroundImage: 'linear-gradient(45deg, blue, red)' }} />
83+
```
84+
85+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
86+
87+
- [LinearGradientExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js)
88+
89+
90+
| Type |
91+
|---------------------------------------------------------------------------------------------------|
92+
| string, array of objects: `{type: \'linear-gradient\', direction: string, colorStops: object[] }` |
93+
94+
7295
---
7396

7497
### `borderBottomColor`

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,28 @@ export default App;
7171

7272
---
7373

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

7698
| Type |

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,29 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

72+
---
73+
74+
### `experimental_backgroundImage`
75+
76+
<ExperimentalAPIWarning />
77+
78+
`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.
79+
80+
```tsx
81+
// Simple usage:
82+
<View style={{ experimental_backgroundImage: 'linear-gradient(45deg, blue, red)' }} />
83+
```
84+
85+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
86+
87+
- [LinearGradientExample.js](https://github.com/facebook/react-native/blob/main/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js)
88+
89+
90+
| Type |
91+
|---------------------------------------------------------------------------------------------------|
92+
| string, array of objects: `{type: \'linear-gradient\', direction: string, colorStops: object[] }` |
93+
94+
7295
---
7396

7497
### `borderBottomColor`

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,31 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

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

7499
### `borderBottomColor`

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,31 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

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

7499
### `borderBottomColor`

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,31 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

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

7499
### `borderBottomColor`

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,31 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

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

7499
### `borderBottomColor`

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,31 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

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

7499
### `borderBottomColor`

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,31 @@ export default App;
6969
| ------------------ |
7070
| [color](colors.md) |
7171

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

7499
### `borderBottomColor`

0 commit comments

Comments
 (0)