Effects@knitui/graphics
EffectView
A drop-in <div> replacement that paints a stack of Skia effects onto itself. Pass effects as one array of { effect, ...props } descriptors — frame paints (fill, border, glow, shadow) and component-backed effects (dottedGrid, checkerboard, noise, image, blurredImage). Array order is stacking order; you pass data, never a component. Geometry (corner radius and size) is read off the element's own style. All layers paint into at most two shared Skia canvases (one behind the content, one in front), clipped with a Skia Group. A native counterpart (View.native.tsx) wraps a React Native View.
import { EffectView } from "@knitui/graphics";Playground
Loading playground…
<EffectView
style={{ backgroundColor: "#0f172a" }}
effects={[{ effect: "shadow", dy: 16, blur: 32, color: "rgba(99, 102, 241, 0.35)" }, { effect: "border", width: 3, offset: 6, colors: ["#6366f1", "#ec4899", "#f59e0b"], angle: 45 }]}
>
Gradient border
</EffectView>Examples
Sweep Border
A conic (sweep) gradient border hugging the box edge.
Loading example…
Gradient Fill
A Skia gradient fill painted into the rounded box, plus a soft glow.
Loading example…
Layers
Stacking component-backed effects: a noise texture and a dottedGrid filling the box (clipped to its rounded corners), under a gradient border. One array, bottom-to-top — no components passed in.
Loading example…
Combined
Everything at once: gradient fill, offset gradient border, outer + inner shadows.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
androidWarmup | boolean | undefined | — | |
effects | readonly EffectLayer[] | undefined | — | The effects painted onto this element, bottom-to-top. Each entry is a `{ effect, ...props }` descriptor — frame paints (`fill`, `border`, `glow`, `shadow`) and the package's component-backed effects (`dottedGrid`, `noise`, `image`, …). Geometry (corner radius and size) is read off the element's own `style`; you pass data, never a component. |
ref | Ref<RNView> | undefined | — |
Plus 90 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.