Modifiers
backgroundOverlay
Adds a background behind the view.
backgroundOverlay(params)
| Parameter | Type | Description |
|---|---|---|
params | { alignment: 'center' | 'top' | 'bottom' | 'leading' | 'trailing', color: Color } | Background color and alignment. |
Adds a background behind the view.
Returns: ModifierConfig
Works with
You can add backgroundOverlay to any view. It changes what you see on 38 of the 39 components.
- VStack
- HStack
- ZStack
- LazyVStack
- LazyHStack
- Group
- Divider
- Overlay
- ScrollView
- Button
- Toggle
- Checkbox
- Slider
- Picker
- DatePicker
- ColorPicker
- Link
- ControlGroup
- Menu
- ContextMenu
- TextField
- SecureField
- Text
- Label
- Image
- Section
- DisclosureGroup
- SwipeActions
- BottomSheet
- Alert
- ConfirmationDialog
- Popover
- ProgressView
- Gauge
- TabView
- AccessoryWidgetBackground
Needs care
It works on these components, but not in the way that you may expect.
| Component | What to know |
|---|---|
| List | List and Form draw their own background on top. Add scrollContentBackground('hidden') to see it. |
| Form | List and Form draw their own background on top. Add scrollContentBackground('hidden') to see it. |
No visible effect
These components accept it, but you see no change.
| Component | Why nothing happens |
|---|---|
| Spacer | It paints in the area of the view, and Spacer draws nothing that you can see. |
Sources
The original Expo docs for this page:
- backgroundOverlay (Modifiers) (
source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)