Skip to content

Commit 4fb981b

Browse files
authored
experimental_* prefix of backgroundPosition was remove in 0.88.x (#5231)
1 parent e262390 commit 4fb981b

1 file changed

Lines changed: 70 additions & 61 deletions

File tree

website/versioned_docs/version-0.87/view-style-props.md

Lines changed: 70 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -118,67 +118,6 @@ 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-
182121
### `borderBottomColor`
183122

184123
| Type |
@@ -457,6 +396,76 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/
457396

458397
---
459398

399+
### `experimental_backgroundPosition`
400+
401+
<ExperimentalAPIWarning />
402+
403+
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.
404+
405+
```tsx
406+
<View
407+
style={{
408+
experimental_backgroundImage:
409+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
410+
experimental_backgroundPosition: 'center',
411+
experimental_backgroundRepeat: 'no-repeat',
412+
experimental_backgroundSize: '50px 50px',
413+
}}
414+
/>
415+
```
416+
417+
| Type |
418+
| --------------------------------------------------------------------------------------- |
419+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
420+
421+
---
422+
423+
### `experimental_backgroundRepeat`
424+
425+
<ExperimentalAPIWarning />
426+
427+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
428+
429+
```tsx
430+
<View
431+
style={{
432+
experimental_backgroundImage:
433+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
434+
experimental_backgroundRepeat: 'repeat',
435+
experimental_backgroundSize: '20px 20px',
436+
}}
437+
/>
438+
```
439+
440+
| Type |
441+
| -------------------------------------------------------------------------------------------------- |
442+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
443+
444+
---
445+
446+
### `experimental_backgroundSize`
447+
448+
<ExperimentalAPIWarning />
449+
450+
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.
451+
452+
```tsx
453+
<View
454+
style={{
455+
experimental_backgroundImage:
456+
'linear-gradient(90deg, #a8edea, #fed6e3)',
457+
experimental_backgroundRepeat: 'no-repeat',
458+
experimental_backgroundSize: '100px 100px',
459+
}}
460+
/>
461+
```
462+
463+
| Type |
464+
| --------------------------------------------------- |
465+
| string \| array of objects `{x: number, y: number}` |
466+
467+
---
468+
460469
### `filter`
461470

462471
:::note

0 commit comments

Comments
 (0)