Skip to content

Commit a0512d8

Browse files
retyuiretyui
authored
feat: Add background-size, position and repeat styles (#5219)
PR: react/react-native#52284 As `experimental_` available from RN 0.83.x As statble API available from RN 0.87.x
1 parent a1bba0d commit a0512d8

6 files changed

Lines changed: 510 additions & 108 deletions

File tree

‎docs/view-style-props.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,67 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
118118

119119
---
120120

121+
### `backgroundPosition`
122+
123+
Controls where the background gradient is placed inside the view. This is useful when `backgroundImage` is set, and you want to offset or center it instead of filling the full area.
124+
125+
```tsx
126+
<View
127+
style={{
128+
backgroundImage: 'radial-gradient(circle, #ff6b6b, #4ecdc4)',
129+
backgroundPosition: 'center',
130+
backgroundRepeat: 'no-repeat',
131+
backgroundSize: '50px 50px',
132+
}}
133+
/>
134+
```
135+
136+
| Type |
137+
| --------------------------------------------------------------------------------------- |
138+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
139+
140+
---
141+
142+
### `backgroundRepeat`
143+
144+
Controls whether the background gradient is repeated, and how. This works together with `backgroundImage` to tile gradients across the view.
145+
146+
```tsx
147+
<View
148+
style={{
149+
backgroundImage: 'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
150+
backgroundRepeat: 'repeat',
151+
backgroundSize: '20px 20px',
152+
}}
153+
/>
154+
```
155+
156+
| Type |
157+
| -------------------------------------------------------------------------------------------------- |
158+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
159+
160+
---
161+
162+
### `backgroundSize`
163+
164+
Controls the size of the background gradient. This is most useful when `backgroundImage` is set and the gradient should not fill the entire view by default.
165+
166+
```tsx
167+
<View
168+
style={{
169+
backgroundImage: 'linear-gradient(90deg, #a8edea, #fed6e3)',
170+
backgroundRepeat: 'no-repeat',
171+
backgroundSize: '100px 100px',
172+
}}
173+
/>
174+
```
175+
176+
| Type |
177+
| --------------------------------------------------- |
178+
| string \| array of objects `{x: number, y: number}` |
179+
180+
---
181+
121182
### `borderBottomColor`
122183

123184
| Type |

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

Lines changed: 97 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -73,33 +73,6 @@ export default App;
7373

7474
---
7575

76-
### `experimental_backgroundImage`
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={{
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-
}} />
90-
```
91-
92-
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
93-
94-
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
95-
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>RadialGradientExample.js</a>
96-
97-
| Type |
98-
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
99-
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
100-
101-
---
102-
10376
### `borderBottomColor`
10477

10578
| Type |
@@ -378,6 +351,103 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
378351

379352
---
380353

354+
### `experimental_backgroundImage`
355+
356+
<ExperimentalAPIWarning />
357+
358+
`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.
359+
360+
```tsx
361+
// Simple usage:
362+
<View style={{
363+
experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
364+
}} />
365+
<View style={{
366+
experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
367+
}} />
368+
```
369+
370+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
371+
372+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
373+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>RadialGradientExample.js</a>
374+
375+
| Type |
376+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
377+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
378+
379+
---
380+
381+
### `experimental_backgroundPosition`
382+
383+
<ExperimentalAPIWarning />
384+
385+
Controls where the background gradient is placed inside the view. This is useful when `experimental_backgroundImage` is set, and you want to offset or center it instead of filling the full area.
386+
387+
```tsx
388+
<View
389+
style={{
390+
experimental_backgroundImage:
391+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
392+
experimental_backgroundPosition: 'center',
393+
experimental_backgroundRepeat: 'no-repeat',
394+
experimental_backgroundSize: '50px 50px',
395+
}}
396+
/>
397+
```
398+
399+
| Type |
400+
| --------------------------------------------------------------------------------------- |
401+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
402+
403+
---
404+
405+
### `experimental_backgroundRepeat`
406+
407+
<ExperimentalAPIWarning />
408+
409+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
410+
411+
```tsx
412+
<View
413+
style={{
414+
experimental_backgroundImage:
415+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
416+
experimental_backgroundRepeat: 'repeat',
417+
experimental_backgroundSize: '20px 20px',
418+
}}
419+
/>
420+
```
421+
422+
| Type |
423+
| -------------------------------------------------------------------------------------------------- |
424+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
425+
426+
---
427+
428+
### `experimental_backgroundSize`
429+
430+
<ExperimentalAPIWarning />
431+
432+
Controls the size of the background gradient. This is most useful when `experimental_backgroundImage` is set and the gradient should not fill the entire view by default.
433+
434+
```tsx
435+
<View
436+
style={{
437+
experimental_backgroundImage:
438+
'linear-gradient(90deg, #a8edea, #fed6e3)',
439+
experimental_backgroundRepeat: 'no-repeat',
440+
experimental_backgroundSize: '100px 100px',
441+
}}
442+
/>
443+
```
444+
445+
| Type |
446+
| --------------------------------------------------- |
447+
| string \| array of objects `{x: number, y: number}` |
448+
449+
---
450+
381451
### `filter`
382452

383453
:::note

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

Lines changed: 97 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -73,33 +73,6 @@ export default App;
7373

7474
---
7575

76-
### `experimental_backgroundImage`
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={{
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-
}} />
90-
```
91-
92-
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
93-
94-
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
95-
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>RadialGradientExample.js</a>
96-
97-
| Type |
98-
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
99-
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
100-
101-
---
102-
10376
### `borderBottomColor`
10477

10578
| Type |
@@ -378,6 +351,103 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
378351

379352
---
380353

354+
### `experimental_backgroundImage`
355+
356+
<ExperimentalAPIWarning />
357+
358+
`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.
359+
360+
```tsx
361+
// Simple usage:
362+
<View style={{
363+
experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
364+
}} />
365+
<View style={{
366+
experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
367+
}} />
368+
```
369+
370+
More complex examples of usage can be found in the RNTester app (with `PlatformColor` supports):
371+
372+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js`}>LinearGradientExample.js</a>
373+
- <a href={`https://github.com/facebook/react-native/blob/${getCoreBranchNameForCurrentVersion()}/packages/rn-tester/js/examples/RadialGradient/RadialGradientExample.js`}>RadialGradientExample.js</a>
374+
375+
| Type |
376+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
377+
| string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }` |
378+
379+
---
380+
381+
### `experimental_backgroundPosition`
382+
383+
<ExperimentalAPIWarning />
384+
385+
Controls where the background gradient is placed inside the view. This is useful when `experimental_backgroundImage` is set, and you want to offset or center it instead of filling the full area.
386+
387+
```tsx
388+
<View
389+
style={{
390+
experimental_backgroundImage:
391+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
392+
experimental_backgroundPosition: 'center',
393+
experimental_backgroundRepeat: 'no-repeat',
394+
experimental_backgroundSize: '50px 50px',
395+
}}
396+
/>
397+
```
398+
399+
| Type |
400+
| --------------------------------------------------------------------------------------- |
401+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
402+
403+
---
404+
405+
### `experimental_backgroundRepeat`
406+
407+
<ExperimentalAPIWarning />
408+
409+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
410+
411+
```tsx
412+
<View
413+
style={{
414+
experimental_backgroundImage:
415+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
416+
experimental_backgroundRepeat: 'repeat',
417+
experimental_backgroundSize: '20px 20px',
418+
}}
419+
/>
420+
```
421+
422+
| Type |
423+
| -------------------------------------------------------------------------------------------------- |
424+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
425+
426+
---
427+
428+
### `experimental_backgroundSize`
429+
430+
<ExperimentalAPIWarning />
431+
432+
Controls the size of the background gradient. This is most useful when `experimental_backgroundImage` is set and the gradient should not fill the entire view by default.
433+
434+
```tsx
435+
<View
436+
style={{
437+
experimental_backgroundImage:
438+
'linear-gradient(90deg, #a8edea, #fed6e3)',
439+
experimental_backgroundRepeat: 'no-repeat',
440+
experimental_backgroundSize: '100px 100px',
441+
}}
442+
/>
443+
```
444+
445+
| Type |
446+
| --------------------------------------------------- |
447+
| string \| array of objects `{x: number, y: number}` |
448+
449+
---
450+
381451
### `filter`
382452

383453
:::note

0 commit comments

Comments
 (0)