Skip to content

Commit 4620514

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

15 files changed

Lines changed: 284 additions & 0 deletions

‎docs/view-style-props.md‎

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

7272
---
7373

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

76101
| 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: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,34 @@ export default App;
7171

7272
---
7373

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

76104
| 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: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,34 @@ export default App;
7171

7272
---
7373

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

76104
| 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: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,34 @@ export default App;
7171

7272
---
7373

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

76104
| 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: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,31 @@ export default App;
7171

7272
---
7373

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

76101
| 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)