Skip to content

Commit c5bc384

Browse files
authored
remove experimental_ prefix from backgroundImage RN 0.87.x (#5191)
1 parent 60617c6 commit c5bc384

1 file changed

Lines changed: 28 additions & 10 deletions

File tree

docs/view-style-props.md

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -73,20 +73,38 @@ export default App;
7373

7474
---
7575

76-
### `experimental_backgroundImage`
76+
### `backgroundImage`
7777

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.
78+
`backgroundImage` provides the ability to draw a [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient) and [`radial-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/radial-gradient) using a web-like syntax.
8179

8280
```tsx
8381
// Simple usage:
84-
<View style={{
85-
experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
86-
}} />
87-
<View style={{
88-
experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
89-
}} />
82+
<View style={{ backgroundImage: 'linear-gradient(45deg, blue, red)' }} />
83+
84+
<View style={{ backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)' }} />
85+
86+
// Also with PlatformColor:
87+
<View
88+
style={{
89+
backgroundImage: [
90+
{
91+
type: 'linear-gradient',
92+
direction: 'to bottom',
93+
colorStops: [
94+
{
95+
color: Platform.select({
96+
ios: PlatformColor('systemTealColor'),
97+
android: PlatformColor('@android:color/holo_purple'),
98+
default: 'blue',
99+
}),
100+
positions: ['0%'],
101+
},
102+
{color: 'green', positions: ['100%']},
103+
],
104+
},
105+
],
106+
}}
107+
/>
90108
```
91109

92110
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):

0 commit comments

Comments
 (0)