Skip to content

Commit b67a89d

Browse files
retyuiretyui
committed
feat: Add background-size, position and repeat styles
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 b67a89d

6 files changed

Lines changed: 402 additions & 0 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: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,76 @@ More complex examples of usage can be found in the RNTester app (with `PlatformC
100100

101101
---
102102

103+
### `experimental_backgroundPosition`
104+
105+
<ExperimentalAPIWarning />
106+
107+
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.
108+
109+
```tsx
110+
<View
111+
style={{
112+
experimental_backgroundImage:
113+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
114+
experimental_backgroundPosition: 'center',
115+
experimental_backgroundRepeat: 'no-repeat',
116+
experimental_backgroundSize: '50px 50px',
117+
}}
118+
/>
119+
```
120+
121+
| Type |
122+
| --------------------------------------------------------------------------------------- |
123+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
124+
125+
---
126+
127+
### `experimental_backgroundRepeat`
128+
129+
<ExperimentalAPIWarning />
130+
131+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
132+
133+
```tsx
134+
<View
135+
style={{
136+
experimental_backgroundImage:
137+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
138+
experimental_backgroundRepeat: 'repeat',
139+
experimental_backgroundSize: '20px 20px',
140+
}}
141+
/>
142+
```
143+
144+
| Type |
145+
| -------------------------------------------------------------------------------------------------- |
146+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
147+
148+
---
149+
150+
### `experimental_backgroundSize`
151+
152+
<ExperimentalAPIWarning />
153+
154+
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.
155+
156+
```tsx
157+
<View
158+
style={{
159+
experimental_backgroundImage:
160+
'linear-gradient(90deg, #a8edea, #fed6e3)',
161+
experimental_backgroundRepeat: 'no-repeat',
162+
experimental_backgroundSize: '100px 100px',
163+
}}
164+
/>
165+
```
166+
167+
| Type |
168+
| --------------------------------------------------- |
169+
| string \| array of objects `{x: number, y: number}` |
170+
171+
---
172+
103173
### `borderBottomColor`
104174

105175
| Type |

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

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

101101
---
102102

103+
### `experimental_backgroundPosition`
104+
105+
<ExperimentalAPIWarning />
106+
107+
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.
108+
109+
```tsx
110+
<View
111+
style={{
112+
experimental_backgroundImage:
113+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
114+
experimental_backgroundPosition: 'center',
115+
experimental_backgroundRepeat: 'no-repeat',
116+
experimental_backgroundSize: '50px 50px',
117+
}}
118+
/>
119+
```
120+
121+
| Type |
122+
| --------------------------------------------------------------------------------------- |
123+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
124+
125+
---
126+
127+
### `experimental_backgroundRepeat`
128+
129+
<ExperimentalAPIWarning />
130+
131+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
132+
133+
```tsx
134+
<View
135+
style={{
136+
experimental_backgroundImage:
137+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
138+
experimental_backgroundRepeat: 'repeat',
139+
experimental_backgroundSize: '20px 20px',
140+
}}
141+
/>
142+
```
143+
144+
| Type |
145+
| -------------------------------------------------------------------------------------------------- |
146+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
147+
148+
---
149+
150+
### `experimental_backgroundSize`
151+
152+
<ExperimentalAPIWarning />
153+
154+
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.
155+
156+
```tsx
157+
<View
158+
style={{
159+
experimental_backgroundImage:
160+
'linear-gradient(90deg, #a8edea, #fed6e3)',
161+
experimental_backgroundRepeat: 'no-repeat',
162+
experimental_backgroundSize: '100px 100px',
163+
}}
164+
/>
165+
```
166+
167+
| Type |
168+
| --------------------------------------------------- |
169+
| string \| array of objects `{x: number, y: number}` |
170+
171+
---
172+
103173
### `borderBottomColor`
104174

105175
| Type |

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

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

101101
---
102102

103+
### `experimental_backgroundPosition`
104+
105+
<ExperimentalAPIWarning />
106+
107+
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.
108+
109+
```tsx
110+
<View
111+
style={{
112+
experimental_backgroundImage:
113+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
114+
experimental_backgroundPosition: 'center',
115+
experimental_backgroundRepeat: 'no-repeat',
116+
experimental_backgroundSize: '50px 50px',
117+
}}
118+
/>
119+
```
120+
121+
| Type |
122+
| --------------------------------------------------------------------------------------- |
123+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
124+
125+
---
126+
127+
### `experimental_backgroundRepeat`
128+
129+
<ExperimentalAPIWarning />
130+
131+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
132+
133+
```tsx
134+
<View
135+
style={{
136+
experimental_backgroundImage:
137+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
138+
experimental_backgroundRepeat: 'repeat',
139+
experimental_backgroundSize: '20px 20px',
140+
}}
141+
/>
142+
```
143+
144+
| Type |
145+
| -------------------------------------------------------------------------------------------------- |
146+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
147+
148+
---
149+
150+
### `experimental_backgroundSize`
151+
152+
<ExperimentalAPIWarning />
153+
154+
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.
155+
156+
```tsx
157+
<View
158+
style={{
159+
experimental_backgroundImage:
160+
'linear-gradient(90deg, #a8edea, #fed6e3)',
161+
experimental_backgroundRepeat: 'no-repeat',
162+
experimental_backgroundSize: '100px 100px',
163+
}}
164+
/>
165+
```
166+
167+
| Type |
168+
| --------------------------------------------------- |
169+
| string \| array of objects `{x: number, y: number}` |
170+
171+
---
172+
103173
### `borderBottomColor`
104174

105175
| Type |

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

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

101101
---
102102

103+
### `experimental_backgroundPosition`
104+
105+
<ExperimentalAPIWarning />
106+
107+
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.
108+
109+
```tsx
110+
<View
111+
style={{
112+
experimental_backgroundImage:
113+
'radial-gradient(circle, #ff6b6b, #4ecdc4)',
114+
experimental_backgroundPosition: 'center',
115+
experimental_backgroundRepeat: 'no-repeat',
116+
experimental_backgroundSize: '50px 50px',
117+
}}
118+
/>
119+
```
120+
121+
| Type |
122+
| --------------------------------------------------------------------------------------- |
123+
| string \| array of objects `{top: string, left: string, right: string, bottom: string}` |
124+
125+
---
126+
127+
### `experimental_backgroundRepeat`
128+
129+
<ExperimentalAPIWarning />
130+
131+
Controls whether the background gradient is repeated, and how. This works together with `experimental_backgroundImage` to tile gradients across the view.
132+
133+
```tsx
134+
<View
135+
style={{
136+
experimental_backgroundImage:
137+
'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
138+
experimental_backgroundRepeat: 'repeat',
139+
experimental_backgroundSize: '20px 20px',
140+
}}
141+
/>
142+
```
143+
144+
| Type |
145+
| -------------------------------------------------------------------------------------------------- |
146+
| enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| array of objects `{x: string, y: string}` |
147+
148+
---
149+
150+
### `experimental_backgroundSize`
151+
152+
<ExperimentalAPIWarning />
153+
154+
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.
155+
156+
```tsx
157+
<View
158+
style={{
159+
experimental_backgroundImage:
160+
'linear-gradient(90deg, #a8edea, #fed6e3)',
161+
experimental_backgroundRepeat: 'no-repeat',
162+
experimental_backgroundSize: '100px 100px',
163+
}}
164+
/>
165+
```
166+
167+
| Type |
168+
| --------------------------------------------------- |
169+
| string \| array of objects `{x: number, y: number}` |
170+
171+
---
172+
103173
### `borderBottomColor`
104174

105175
| Type |

0 commit comments

Comments
 (0)