Group
Group is a container for grouping view content. Group is a transparent container that groups views together without adding visual styling. It's useful for applying modifiers to multiple views at once.
Group is a container for grouping view content. Group is a transparent container that groups views together without adding visual styling. It's useful for applying modifiers to multiple views at once.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<Group>{(
<>
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
</>
)}</Group>With Modifiers
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={15}>
<Group style={{ opacity: 0.8 }}>
<Text>Grouped with opacity</Text>
<Text>Both items share the same opacity</Text>
</Group>
<Group style={{ transform: 'scale(0.95)' }}>
<Text>Grouped with scale</Text>
<Text>Both items share the same transform</Text>
</Group>
</VStack>Conditional Rendering
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
{showGroup && (
<Group>
<Text>Item 1</Text>
<Text>Item 2</Text>
<Text>Item 3</Text>
</Group>
)}
<Text>Outside group</Text>
</VStack>Nested Groups
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Group>
<Text>Outer Group Item 1</Text>
<Group>
<Text>Inner Group Item 1</Text>
<Text>Inner Group Item 2</Text>
</Group>
<Text>Outer Group Item 2</Text>
</Group>
</VStack>With Buttons
Preview unavailable for this example in the static docs build.
Show code
<Group>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Group>API
This component currently relies on inherited element props.
Inherits additional props from IBaseComponent.
Overview
Group is a container for grouping view content. Group is a transparent container that groups views together without adding visual styling. It's useful for applying modifiers to multiple views at once.
SwiftUI Correspondence: Similar to SwiftUI's Group.
Notes
- Group is a transparent container with no visual styling
- Group is useful for applying styles or modifiers to multiple views
- Group doesn't affect layout (children render normally)
- Use Group when you need to group views without visual changes
- Group is commonly used with conditional rendering
Best Practices
- Grouping: Use Group to logically group related views
- Modifiers: Apply styles or modifiers to multiple views at once
- Conditional rendering: Use Group with conditional rendering
- No layout impact: Remember Group doesn't affect layout
- Semantic grouping: Use Group for semantic organization