Copy
.visualEffect(callback: (builder: VisualEffectBuilder, proxy: GeometryProxy) => VisualEffectBuilder): Component;
Parameters
A callback function that receives a
VisualEffectBuilder and GeometryProxy to configure the visual effects.Show VisualEffectBuilder Methods
Show VisualEffectBuilder Methods
Applies a blur effect with the specified radius.
Sets the opacity where 0.0 is transparent and 1.0 is opaque.
Applies an offset transformation.
Scales the view by the specified factor(s).
Rotates the view by the specified angle.
Translates the view by the specified distance.
transform(matrix)
(matrix: {a: number, b: number, c: number, d: number, tx: number, ty: number}) => VisualEffectBuilder
Applies a custom 2D transformation matrix.
Resets all previously applied effects.
Show GeometryProxy Properties and Methods
Show GeometryProxy Properties and Methods
The size of the container view in points.
The safe area insets of the container view, representing areas that might be covered by navigation bars, tab bars, toolbars, or other system UI elements.
Returns the container view’s bounds rectangle converted to the specified coordinate space.
Show Return Type: FrameRect
Show Return Type: FrameRect
The minimum x-coordinate of the frame.
The minimum y-coordinate of the frame.
The maximum x-coordinate of the frame.
The maximum y-coordinate of the frame.
The width of the frame.
The height of the frame.
The x-coordinate of the frame’s center.
The y-coordinate of the frame’s center.
Support
Usage
Stretchy Header Effect
Copy
Image("photo.jpg")
.visualEffect((effect, geometry) => {
let currentHeight = geometry.size.height;
let scrollOffset = geometry.frame('scrollView').minY;
let positiveOffset = Math.max(0, scrollOffset);
let newHeight = currentHeight + positiveOffset;
let scaleFactor = newHeight / currentHeight;
return effect.scale({ x: scaleFactor, y: scaleFactor, anchor: 'bottom' });
});