0
# Paint and Styling
1

2
Paint system for controlling appearance including colors, strokes, fills, blend modes, and grouping operations in React Native Skia.
3

4
## Capabilities
5

6
### Paint Component
7

8
The core styling component that controls how shapes and content are rendered.
9

10
```typescript { .api }
11
/**
12
 * Core styling component that controls how shapes and content are rendered
13
 * @param props - Paint properties
14
 * @returns JSX paint element
15
 */
16
function Paint(props: PaintProps): JSX.Element;
17

18
interface PaintProps extends ChildrenProps {
19
  /** Fill or stroke color */
20
  color?: Color;
21
  /** Stroke width in pixels */
22
  strokeWidth?: number;
23
  /** Fill or stroke style */
24
  style?: PaintStyle;
25
  /** Blend mode for compositing */
26
  blendMode?: BlendMode;
27
  /** Stroke line join style */
28
  strokeJoin?: StrokeJoin;
29
  /** Stroke line cap style */
30
  strokeCap?: StrokeCap;
31
  /** Miter limit for stroke joins */
32
  strokeMiter?: number;
33
  /** Overall opacity (0.0 to 1.0) */
34
  opacity?: number;
35
  /** Enable anti-aliasing */
36
  antiAlias?: boolean;
37
  /** Enable dithering */
38
  dither?: boolean;
39
}
40

41
enum PaintStyle {
42
  Fill = 0,
43
  Stroke = 1
44
}
45

46
enum StrokeJoin {
47
  Miter = 0,
48
  Round = 1,
49
  Bevel = 2
50
}
51

52
enum StrokeCap {
53
  Butt = 0,
54
  Round = 1,
55
  Square = 2
56
}
57

58
type Color = string | number | Float32Array;
59
```
60

61
**Usage Examples:**
62

63
```typescript
64
import { Circle, Paint } from "@shopify/react-native-skia";
65

66
// Filled circle
67
<Circle cx={50} cy={50} r={25}>
68
  <Paint color="red" />
69
</Circle>
70

71
// Stroked circle with custom properties
72
<Circle cx={100} cy={50} r={25}>
73
  <Paint 
74
    color="blue" 
75
    style="stroke" 
76
    strokeWidth={3}
77
    strokeCap="round"
78
    strokeJoin="round"
79
    opacity={0.8}
80
  />
81
</Circle>
82

83
// Advanced paint with blend mode
84
<Rect x={0} y={0} width={100} height={100}>
85
  <Paint 
86
    color="rgba(255, 0, 0, 0.5)"
87
    blendMode="multiply"
88
    antiAlias={true}
89
    dither={true}
90
  />
91
</Rect>
92
```
93

94
### Group Component
95

96
Container component for grouping elements with optional layer creation and transformations.
97

98
```typescript { .api }
99
/**
100
 * Container component for grouping elements with optional layer creation
101
 * @param props - Group properties
102
 * @returns JSX group element
103
 */
104
function Group(props: GroupProps): JSX.Element;
105

106
interface GroupProps extends DrawingNodeProps {
107
  /** 
108
   * Layer configuration:
109
   * - boolean: true creates a layer with default paint
110
   * - SkPaint: creates a layer with custom paint
111
   * - ReactElement: creates a layer with paint from element
112
   */
113
  layer?: boolean | SkPaint | ReactElement;
114
  /** Clipping definition */
115
  clip?: ClipDef;
116
  /** Invert the clipping region */
117
  invertClip?: boolean;
118
}
119

120
type ClipDef = SkRRect | SkRect | PathDef;
121
```
122

123
**Usage Examples:**
124

125
```typescript
126
// Basic grouping
127
<Group>
128
  <Circle cx={50} cy={50} r={25}>
129
    <Paint color="red" />
130
  </Circle>
131
  <Rect x={25} y={25} width={50} height={50}>
132
    <Paint color="blue" opacity={0.5} />
133
  </Rect>
134
</Group>
135

136
// Group with layer and clipping
137
<Group 
138
  layer={true}
139
  clip={{ x: 0, y: 0, width: 100, height: 100 }}
140
>
141
  {/* clipped content */}
142
</Group>
143

144
// Group with custom layer paint
145
<Group layer={<Paint opacity={0.7} blendMode="multiply" />}>
146
  {/* content with layer effects */}
147
</Group>
148
```
149

150
### Blend Component
151

152
Component for applying blend modes to content.
153

154
```typescript { .api }
155
/**
156
 * Component for applying blend modes to content
157
 * @param props - Blend properties
158
 * @returns JSX blend element
159
 */
160
function Blend(props: BlendProps): JSX.Element;
161

162
interface BlendProps extends ChildrenProps {
163
  /** Blend mode for compositing */
164
  mode: BlendMode;
165
}
166

167
enum BlendMode {
168
  Clear = 0,
169
  Src = 1,
170
  Dst = 2,
171
  SrcOver = 3,
172
  DstOver = 4,
173
  SrcIn = 5,
174
  DstIn = 6,
175
  SrcOut = 7,
176
  DstOut = 8,
177
  SrcATop = 9,
178
  DstATop = 10,
179
  Xor = 11,
180
  Plus = 12,
181
  Modulate = 13,
182
  Screen = 14,
183
  Overlay = 15,
184
  Darken = 16,
185
  Lighten = 17,
186
  ColorDodge = 18,
187
  ColorBurn = 19,
188
  HardLight = 20,
189
  SoftLight = 21,
190
  Difference = 22,
191
  Exclusion = 23,
192
  Multiply = 24,
193
  Hue = 25,
194
  Saturation = 26,
195
  Color = 27,
196
  Luminosity = 28
197
}
198
```
199

200
### Mask Component
201

202
Component for masking operations with alpha and luminance modes.
203

204
```typescript { .api }
205
/**
206
 * Component for masking operations
207
 * @param props - Mask properties
208
 * @returns JSX mask element
209
 */
210
function Mask(props: MaskProps): JSX.Element;
211

212
interface MaskProps extends ChildrenProps {
213
  /** Mask source definition */
214
  mask: ReactElement;
215
  /** Masking mode */
216
  mode?: "alpha" | "luminance";
217
  /** Invert the mask */
218
  invertMask?: boolean;
219
}
220
```
221

222
**Usage Examples:**
223

224
```typescript
225
// Blend mode application
226
<Blend mode="multiply">
227
  <Circle cx={50} cy={50} r={30}>
228
    <Paint color="red" />
229
  </Circle>
230
  <Circle cx={70} cy={50} r={30}>
231
    <Paint color="blue" />
232
  </Circle>
233
</Blend>
234

235
// Alpha masking
236
<Mask
237
  mask={
238
    <Circle cx={50} cy={50} r={25}>
239
      <Paint color="black" />
240
    </Circle>
241
  }
242
  mode="alpha"
243
>
244
  <Rect x={0} y={0} width={100} height={100}>
245
    <Paint color="green" />
246
  </Rect>
247
</Mask>
248
```
249

250
## Color System
251

252
```typescript { .api }
253
// Color types and utilities
254
type Color = string | number | Float32Array;
255

256
// String formats supported:
257
// - Named colors: "red", "blue", "transparent"
258
// - Hex: "#FF0000", "#F00"
259
// - RGB: "rgb(255, 0, 0)"
260
// - RGBA: "rgba(255, 0, 0, 0.5)"
261
// - HSL: "hsl(0, 100%, 50%)"
262
// - HSLA: "hsla(0, 100%, 50%, 0.5)"
263

264
// Number format (ARGB):
265
// 0xFFFF0000 for opaque red
266
// 0x80FF0000 for 50% transparent red
267

268
// Float32Array format [r, g, b, a]:
269
// new Float32Array([1.0, 0.0, 0.0, 1.0]) for opaque red
270
```
271

272
## Core Types
273

274
```typescript { .api }
275
// Base component properties
276
interface ChildrenProps {
277
  children?: React.ReactNode;
278
}
279

280
interface DrawingNodeProps extends TransformProps {
281
  children?: React.ReactNode;
282
}
283

284
// Paint-related enums
285
enum PaintStyle {
286
  Fill = 0,
287
  Stroke = 1
288
}
289

290
enum BlendMode {
291
  // ... (full enum values listed above)
292
}
293

294
enum StrokeJoin {
295
  Miter = 0,
296
  Round = 1,
297
  Bevel = 2
298
}
299

300
enum StrokeCap {
301
  Butt = 0,
302
  Round = 1,
303
  Square = 2
304
}
305

306
// Path and clipping types
307
type PathDef = string | SkPath;
308
type ClipDef = SkRRect | SkRect | PathDef;
309
```