CapDriveGroup
Combine multiple View into a whole, uniformly applying transparency, rotation or other special effects. The child View follows the arrangement rules of the outer container, and the special effects are applied to the entire set of synthesized results.
Example
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
Usage
- Group adds no arrangement rule: children still participate in the outer layout. It composites them before applying opacity, rotation and effects, so overlapping opacity differs from setting each child separately. Use an outer Stack for dimensions or padding.
- Use stable data identifiers as array keys so updates and animations retain View identity. An array index is unsuitable as permanent identity when items can reorder.
- Layout reserves space before x/y and transform are applied. Moving a child right by 20 points does not push its siblings away; use spacing or Spacer to change gaps. Rotation and scaling affect the completed View.
Properties
children?ViewContentChild drawing content.
Common properties
transform?ViewTransformTransform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.
{rotation: 0}background?PaintBackground paint; accepts a color or gradient. Use clear for transparency.
"clear"opacity?numberOpacity of the whole View: 0 is transparent, 1 is opaque.
1cornerRadius?numberCorner radius in points.
0clipped?booleanClip drawing that extends beyond the View bounds.
falseclip?"rectangle" | "ellipse"Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.
"rectangle"mask?View | nullAlpha mask View. Centered without affecting layout; null disables masking.
<Circle width="fill" height="fill" background="white"/>zIndex?numberDrawing order among siblings; larger values appear in front.
0blur?numberBlur radius in points; 0 disables blur.
4innerShadow?DrawingEffectEffect color, opacity, blur radius and x/y offset. Distances are in points.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectEffect color, opacity, blur radius and x/y offset. Distances are in points.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorColor of the outer shadow.
HDR("black")shadowOpacity?numberOuter shadow opacity from 0 to 1; 0 hides it.
0shadowRadius?numberOuter shadow blur radius in points.
4shadowX?numberOuter shadow offset in points: x right, y down.
0shadowY?numberOuter shadow offset in points: x right, y down.
2animations?Animation[]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: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberStable identity among siblings.
""Practical example
function main() {
return (
<HStack spacing={12}>
<Group opacity={0.6} transform={{ rotation: 10 }}>
<Text fontSize={40}>78</Text>
<Symbol name="speedometer" fontSize={28} />
</Group>
<Text>km/h</Text>
</HStack>
);
}
Animation
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYWhen 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.