Effects@knitui/graphics
ShadowView
A drop-in View that renders a drop shadow from React Native's shadow* inputs (shadowColor, shadowOffset, shadowRadius, shadowOpacity) consistently across platforms. On web it maps to a CSS box-shadow; the native counterpart (ShadowView.native.tsx) paints the shadow with Skia via EffectView, so it works on Android too — which ignores RN's shadow* style props natively. Pass the shadow as props or in style; on native the props are stripped from the underlying View so iOS doesn't double up. Geometry (size + corner radius) is read off style.
import { ShadowView } from "@knitui/graphics";Playground
Loading playground…
<ShadowView
shadowColor="#0f172a"
shadowOffset={{ width: 0, height: 8 }}
shadowRadius={20}
shadowOpacity={0.35}
/>Examples
Default
A soft drop shadow under the card.
Loading example…
Elevated
A tight, dark shadow offset down-right.
Loading example…
Inner
An inset shadow painted inside the box.
Loading example…
Colored
A colored glow-like shadow.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
androidWarmup | boolean | undefined | — | |
inner | boolean | undefined | — | Render the shadow inset (inner) rather than as an outer drop shadow. |
ref | Ref<View> | undefined | — | |
shadowColor | string | undefined | #0f172a | Shadow color. Any alpha in the color is honored; `shadowOpacity` further scales it. With no color there is no shadow. Opacity scaling only applies to `#rgb[a]` / `#rrggbb[aa]` and `rgb()/rgba()` colors — named colors and theme tokens are used as-is. |
shadowOffset | { width: number; height: number; } | undefined | — | Offset in px. Defaults to `{ width: 0, height: 0 }`. |
shadowOpacity | number | undefined | 0.35 | 0–1 multiplier applied to the shadow color's alpha. `0` paints no shadow. |
shadowRadius | number | undefined | 20 | Blur radius in px. Defaults to `0` (a hard-edged shadow). |
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.