Skip to content

Commit cc53c55

Browse files
retyuiretyui
committed
feat: Add experimental_backgroundImage style prop
1 parent 19204d5 commit cc53c55

15 files changed

Lines changed: 294 additions & 0 deletions

‎docs/view-style-props.md‎

Lines changed: 26 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,29 @@ 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={{ experimental_backgroundImage: 'linear-gradient(45deg, blue, red)' }} />
86+
<View style={{ experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)' }} />
87+
```
88+
89+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
90+
91+
- [LinearGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>)
92+
- [RadialGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>)
93+
94+
| Type |
95+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
96+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
97+
98+
---
99+
74100
### `borderBottomColor`
75101

76102
| 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+
- [LinearGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>)
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+
- [LinearGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>)
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+
- [LinearGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>)
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: 26 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,29 @@ 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={{ experimental_backgroundImage: 'linear-gradient(45deg, blue, red)' }} />
86+
<View style={{ experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)' }} />
87+
```
88+
89+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
90+
91+
- [LinearGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>)
92+
- [RadialGradientExample.js](<{`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>)
93+
94+
| Type |
95+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
96+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
97+
98+
---
99+
74100
### `borderBottomColor`
75101

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