BackdropProps
A frosted or refractive panel over whatever is already drawn beneath it.
Backdrop effects read the pixels below, so the node must come after the
content it frosts, and the region is its clip rect.
The panel is not painted, it is sampled, so of the inherited paint only
opacity, visible and ref apply, plus the alpha of color - its RGB,
the stroke props and any paint or shader child are all ignored. A ref
patches values; a backdrop has no hit bounds, so it is never pressable.
Extends
Properties
antiAlias?
optional antiAlias?: boolean;Inherited from
blendMode?
optional blendMode?: BlendMode;How this drawing composites onto what is already there. 'srcOver' by default.
Inherited from
blur?
optional blur?: Animated<number>;Gaussian blur of the backdrop. Defaults to 12.
children?
optional children?: ReactNode;Inherited from
color?
optional color?: Animated<Color>;Inherited from
height
height: Animated<number>;opacity?
optional opacity?: Animated<number>;Paint-wide alpha multiplier in [0, 1]; only one per chain can animate.
Inherited from
r?
optional r?: number;Corner radius. Defaults to 0. Static: the writer does not give it a slot.
ref?
optional ref?: NodeHandle;A handle from useNode(), for changing this node without a React render.
See NodeHandle.
Inherited from
strokeCap?
optional strokeCap?: "butt" | "round" | "square";Inherited from
strokeJoin?
optional strokeJoin?: "round" | "miter" | "bevel";Inherited from
strokeMiter?
optional strokeMiter?: Animated<number>;Past this length-over-width ratio a 'miter' join falls back to bevel. Defaults to 4.
Inherited from
strokeWidth?
optional strokeWidth?: Animated<number>;Inherited from
style?
optional style?: "fill" | "stroke";'fill' (default) or 'stroke'.
Inherited from
visible?
optional visible?: Animated<number | boolean>;Skip drawing (and hit-testing) this node. A value slot, so a handle or a SharedValue toggles it with no re-encode - the supported way to pool mounted nodes for particle systems and variable-count scenes.
Inherited from
width
width: Animated<number>;x
x: Animated<number>;The panel's rect, and what it samples from beneath.
y
y: Animated<number>;