CapDriveSpacer
Allocate remaining space in Stack to push content on both sides or reserve elastic distance for content. minLength sets the minimum length, explicit width or height can fix the size in the corresponding direction.
Example
function main() {
return (
<HStack>
<Text>A</Text>
<Spacer minLength={16} />
<Text>B</Text>
</HStack>
);
}
Usage
- Spacer draws nothing. It takes remaining horizontal space in HStack or vertical space in VStack; minLength is a lower bound. Explicit width/height fixes that axis. Background, opacity and drawing effects do not apply.
- Numeric sizes use points. auto measures content; fill uses the space allocated by the parent. Size the container before tuning children. fill creates no extra space, and long text cannot enlarge a fixed parent.
Properties
minLength?numberMinimum flexible space along the parent stack’s main axis, in points.
0Common properties
width?number | "auto" | "fill"Width in points, auto sizing or parent fill.
"auto"height?number | "auto" | "fill"Height in points, auto sizing or parent fill.
"auto"animations?SpacerAnimation[]Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.
[{property: "minLength", duration: 0.25, curve: "easeInOut"}]key?string | numberStable identity among siblings.
""Practical example
function main() {
return (
<VStack spacing={16}>
<HStack width={240}>
<Text>A</Text>
<Spacer minLength={20} />
<Text>B</Text>
</HStack>
<HStack width={240}>
<Text>A</Text>
<Spacer width={20} />
<Text>B</Text>
</HStack>
</VStack>
);
}
Animation
widthheightminLengthWhen omitted
The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.
| Properties | When omitted |
|---|---|
minLength | 0 |