Skip to main content
The Group component allows you to group multiple drawing elements together. Groups are essential for applying transformations, blend modes, and effects to multiple elements at once.

​
Basic Usage

import { Canvas, Group, Circle, Rect } from "@shopify/react-native-skia";

export default function GroupExample() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <Circle cx={100} cy={100} r={50} color="red" />
        <Rect x={50} y={50} width={100} height={100} color="blue" />
      </Group>
    </Canvas>
  );
}

​
Props

​
children
ReactNode
Child elements to group together
​
layer
boolean | ReactNode
Creates a new layer for the group. Can be true to create a simple layer, or a React element (like <Paint>) to apply effects to the layer.When set to true, the group will be drawn to an offscreen buffer before being composited onto the canvas.
​
transform
Transform[]
Array of transformations to apply to the group (translate, scale, rotate, skew)
​
origin
Vector
Origin point for transformations
​
clip
SkRect | SkRRect | SkPath
Clipping region for the group
​
invertClip
boolean
If true, inverts the clipping region
​
blendMode
BlendMode
Blend mode for compositing the group. See Blend Modes
​
opacity
number
Opacity of the group (0-1)

​
Layering

Groups with layers are useful for applying effects to multiple elements: 
import { Canvas, Group, Circle, Paint, Blur } from "@shopify/react-native-skia";

export default function LayeredGroup() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Group
        layer={
          <Paint>
            <Blur blur={10} />
          </Paint>
        }
      >
        <Circle cx={100} cy={100} r={50} color="red" />
        <Circle cx={150} cy={150} r={50} color="blue" />
      </Group>
    </Canvas>
  );
}

​
Transformations

Apply transformations to all children in the group: 
import { Canvas, Group, Circle, Rect } from "@shopify/react-native-skia";

export default function TransformedGroup() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Group
        transform={[
          { translateX: 100 },
          { translateY: 100 },
          { rotate: Math.PI / 4 },
        ]}
      >
        <Rect x={0} y={0} width={100} height={100} color="purple" />
        <Circle cx={50} cy={50} r={30} color="yellow" />
      </Group>
    </Canvas>
  );
}

​
Clipping

Restrict rendering to a specific region: 
import { Canvas, Group, Circle, rect } from "@shopify/react-native-skia";

export default function ClippedGroup() {
  const clipRect = rect(50, 50, 200, 200);
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Group clip={clipRect}>
        <Circle cx={150} cy={150} r={100} color="green" />
        <Circle cx={100} cy={100} r={100} color="orange" />
      </Group>
    </Canvas>
  );
}

​
Blend Modes

Apply blend modes to groups: 
import { Canvas, Group, Circle } from "@shopify/react-native-skia";

export default function BlendedGroup() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={150} cy={150} r={100} color="red" />
      <Group blendMode="multiply">
        <Circle cx={200} cy={150} r={100} color="blue" />
        <Circle cx={175} cy={200} r={100} color="green" />
      </Group>
    </Canvas>
  );
}

​
Performance Considerations

  • Groups with layers (layer prop) create offscreen buffers, which can be expensive
  • Use layers only when necessary for effects or blend modes
  • Simple groups without layers have minimal performance overhead
  • Avoid deeply nested groups when possible

Build docs developers (and LLMs) love

Get started for freeTalk to us