# API Reference This document provides a comprehensive reference for all native template elements and their properties, methods, and types. ## Table of Contents - [Layout](#layout) - [View](#view) - [ScrollView](#scrollview) - [ImageView](#imageview) - [VideoView](#videoview) - [Label](#label) - [TextField](#textfield) - [TextView](#textview) - [BlurView](#blurview) - [SpinnerView](#spinnerview) - [ShapeView](#shapeview) - [AnimatedImage](#animatedimage) - [Slot](#slot) - [Common Types](#common-types) > **Note:** Layout and positioning attributes are powered by [Yoga](https://github.com/facebook/yoga) (commit [`0be0e9fc`](https://github.com/facebook/yoga/commit/0be0e9fc0148aa609afdc31cb9670524f07050cb)). See [Style Attributes Reference](api-style-attributes.md#yoga-layout-engine) for Yoga version details and flexbox behavior. --- ## Layout **JSX Element:** `` Represents a node in the layout tree. Use a `` instead of `` whenever possible, since these nodes will not be backed by a platform view when rendering, making them more performant. ### Properties #### Layout Attributes ##### Lifecycle Callbacks **`onLayout`**: `(frame: ElementFrame) => void` - Called whenever the calculated frame for the element has changed. **`onVisibilityChanged`**: `(isVisible: boolean, eventTime: EventTime) => void` - Called whenever the visibility for the element has changed. **`onViewportChanged`**: `(viewport: ElementFrame, frame: ElementFrame, eventTime: EventTime) => void` - Called whenever the calculated viewport for the element has changed. - The viewport represents the rectangle area within the element's frame that is visible. **`onLayoutComplete`**: `() => void` - Called after a layout pass has completed, if this node or any of its children were updated. **`onMeasure`**: `OnMeasureFunc` - If set, the node will be set as a lazyLayout, and the given measure callback will be called whenever the node needs to be measured. - The callback should return a MeasuredSize tuple representing how big the node should be. - Type: `(width: number, widthMode: MeasureMode, height: number, heightMode: MeasureMode) => MeasuredSize` ##### Performance Optimization **`lazyLayout`**: `boolean` - Whether the layout starting from this element should be lazy. - A lazy layout is disconnected from its parent layout; its children cannot impact the layout of the parent. - Setting this to true will defer layout calculation for all the children until this layout is determined to be visible. - This can help with performance when the layout is within a ScrollView. - Default: `false` **`limitToViewport`**: `boolean` - Whether the backing native View instance should only be created if the element is visible within the viewport. - Setting this to true can help with performance when the view is within a ScrollView. - Default: `true` **`lazy`**: `boolean` - Shorthand for lazyComponent, lazyLayout and limitToViewport. - Default: `false` **`estimatedWidth`**: `number` - If set, the node will use this value as the base width that the node should measure at before the children are inserted. - This is typically used on nodes that represent an empty placeholder that are later rendered with children. **`estimatedHeight`**: `number` - If set, the node will use this value as the base height that the node should measure at before the children are inserted. ##### Identity & References **`id`**: `string` - Used to uniquely identify an element in the global valdi context. **`key`**: `string` - A key to uniquely identify the element. - If it is not provided, the framework will generate one based on the index in which the element is being rendered. **`ref`**: `IRenderedElementHolder` - Sets an element reference holder, which will keep track of the rendered elements. ##### Visual Properties **`animationsEnabled`**: `boolean` - Can be used to disable animations for this element and its children. - Default: `true` **`zIndex`**: `number` - Loosely, zIndex specifies the order in which siblings are layered on top of each other. - Higher zIndex will mean that an element will be rendered "on top" of its siblings. - Specifying a zIndex will make the framework sort this element and its siblings before rendering the view tree. **`class`**: `string` - Sets a CSS class to use from the associated CSS document. - You typically would use the style property directly instead. **`ignoreParentViewport`**: `boolean` - Whether the calculated viewport for this element should not be intersected with the viewport of the parent. - This allows a child to have a viewport bigger than its parent. #### Size Properties **`width`**: `CSSValue` (string | number) - Specifies the width of an element's content area. - `auto` (default): width for the element based on its content. - points: Defines the width in absolute points. - percentage: Defines the width in percentage of its parent's width. **`height`**: `CSSValue` - Specifies the height of an element's content area. - `auto` (default): height for the element based on its content. - points: Defines the height in absolute points. - percentage: Defines the height in percentage of its parent's height. **`minWidth`**: `CSSValue` - Specifies the minimum width of an element's content area. **`minHeight`**: `CSSValue` - Specifies the minimum height of an element's content area. **`maxWidth`**: `CSSValue` - Specifies the maximum width of an element's content area. **`maxHeight`**: `CSSValue` - Specifies the maximum height of an element's content area. **`aspectRatio`**: `number` - Specifies the aspect ratio of an element's content area. - Defined as the ratio between the width and the height of a node. - e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height. #### Position Properties **`position`**: `'relative' | 'absolute'` - The position type of an element defines how it is positioned within its parent. - `relative` (default): positioned according to the normal flow of the layout, then offset relative to that position based on the values of top, right, bottom, and left. - `absolute`: doesn't take part in the normal layout flow. Position is determined based on the top, right, bottom, and left values. **`top`**: `CSSValue` - Used with `position` to offset the element from its normal position or parent. **`right`**: `CSSValue` - Used with `position` to offset the element from its normal position or parent. **`bottom`**: `CSSValue` - Used with `position` to offset the element from its normal position or parent. **`left`**: `CSSValue` - Used with `position` to offset the element from its normal position or parent. #### Spacing Properties **`margin`**: `string | number` - Margin affects the spacing around the outside of a node. - A node with margin will offset itself from the bounds of its parent but also offset the location of any siblings. **`marginTop`**: `CSSValue` **`marginRight`**: `CSSValue` **`marginBottom`**: `CSSValue` **`marginLeft`**: `CSSValue` **`padding`**: `string | number` - Padding affects the size of the node it is applied to. - Padding will not add to the total size of an element if it has an explicit size set. **`paddingTop`**: `CSSValue` **`paddingRight`**: `CSSValue` **`paddingBottom`**: `CSSValue` **`paddingLeft`**: `CSSValue` #### Flexbox Properties **`display`**: `'flex' | 'none'` - Choose the display mode. - `flex`: use flexbox layout system - `none`: do not display this element - Default: `'flex'` **`overflow`**: `'visible' | 'scroll'` - Specifies how the parent will react to its children overflowing its boundaries. - `visible`: overflowing children elements will stretch the parent container - `scroll`: the parent container's size will not be affected by the children element's bounds - Default for layout elements: `'visible'` - Default for scroll elements: `'scroll'` **`direction`**: `'inherit' | 'ltr' | 'rtl'` - Layout direction specifies the direction in which children and text in a hierarchy should be laid out. - `inherit` (default): Use the parent's direction value - `ltr`: Text and children laid out from left to right - `rtl`: Text and children laid out from right to left - Default: `'inherit'` **`flexDirection`**: `'column' | 'column-reverse' | 'row' | 'row-reverse'` - Controls the direction in which children of a node are laid out. - `column` (default): Align children from top to bottom - `column-reverse`: Align children from bottom to top - `row`: Align children from left to right - `row-reverse`: Align children from right to left - Default: `'column'` **`flexWrap`**: `'no-wrap' | 'wrap' | 'wrap-reverse'` - Set on containers and controls what happens when children overflow the size of the container along the main axis. - Default: children are forced into a single line - `wrap`: items are wrapped into multiple lines along the main axis if needed - `wrap-reverse`: same as wrap but the order of the lines is reversed **`justifyContent`**: `'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'` - Describes how to align children within the main axis of their container. - `flex-start` (default): Align children to the start of the container's main axis - `flex-end`: Align children to the end - `center`: Align children in the center - `space-between`: Evenly space children, distributing remaining space between them - `space-around`: Evenly space children, distributing remaining space around them - `space-evenly`: Evenly distributed with equal spacing - Default: `'flex-start'` **`alignContent`**: `'flex-start' | 'flex-end' | 'stretch' | 'center' | 'space-between' | 'space-around'` - Defines the distribution of lines along the cross-axis. - Only has effect when items are wrapped to multiple lines using `flexWrap`. - Default: `'flex-start'` **`alignItems`**: `'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'` - Describes how to align children along the cross axis of their container. - `stretch` (default): Stretch children to match the height of the container's cross axis - `flex-start`: Align children to the start of the container's cross axis - `flex-end`: Align children to the end - `center`: Align children in the center - `baseline`: Align children along a common baseline - Default: `'stretch'` **`alignSelf`**: `'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'` - Overrides the parent's `alignItems` for this specific child. **`flexGrow`**: `number` - Describes how any space within a container should be distributed among its children along the main axis. - Accepts any floating point value >= 0 - Default: `0` **`flexShrink`**: `number` - Describes how to shrink children along the main axis when the total size of the children overflow the size of the container. - Accepts any floating point value >= 0 - Default: `0` **`flexBasis`**: `CSSValue` - Provides the default size of an item along the main axis. - Similar to setting width (for row) or height (for column). **`extendViewportWithChildren`**: `boolean` - Whether the calculated viewport for the element should be potentially extended by taking into account the space of all the children. - By default, a child element outside the bounds of the parent element is considered invisible. - When this flag is true, the bounds of the parent will be extended such that the children are always visible. - This flag should be used rarely and in very specific circumstances. - Default: `false` #### Accessibility Properties **`accessibilityCategory`**: `'auto' | 'view' | 'text' | 'button' | 'image' | 'image-button' | 'input' | 'header' | 'link' | 'checkbox' | 'radio' | 'keyboard-key'` - Specify meta information that can then be used by accessibility technologies. - Default: `'auto'` **`accessibilityNavigation`**: `'auto' | 'passthrough' | 'leaf' | 'cover' | 'group' | 'ignored'` - Specify the way the element should behave during navigation by accessibility technologies. - `auto`: automatically chosen depending on the element - `passthrough`: element is not focusable, but its children may be accessed - `leaf`: element is fully focusable and interactive but none of its children are navigatable - `cover`: element is first fully focusable and interactive and afterward its children can also be accessed - `group`: element may be announced but not focused and its children may also be accessed - `ignored`: element and all its children will be ignored, unnavigatable and unfocusable - Default: `'auto'` **`accessibilityPriority`**: `number | AccessibilityPriority` - Specify the local priority of the element (compared to its direct sibling) for accessibility navigation sequential ordering. - All sibling elements are sorted by descending priority during accessibility navigation. - Default: `0` **`accessibilityLabel`**: `string` - Defines the information being displayed. - When an element is accessed by accessibility technologies, VoiceOver/TalkBack will read this string. **`accessibilityHint`**: `string` - Defines the purpose of this element. - Additional hint that helps users understand what will happen when they perform an action on the accessibility element. **`accessibilityValue`**: `string` - For elements that intrinsically contain information (such as textinputs or sliders). - Especially when it may be dynamic, we need to provide its current value. **`accessibilityStateDisabled`**: `boolean` - For dynamic and interactive elements, indicate that the element is temporarily disabled. - Default: `false` **`accessibilityStateSelected`**: `boolean` - For dynamic and interactive elements, set the current selection status. - Default: `false` **`accessibilityStateLiveRegion`**: `boolean` - For dynamic and interactive elements, indicate that the element frequently updates its label, value or children. - Default: `false` #### Styling **`style`**: `IStyle` - Styling object allows setting multiple attributes at once. - See [Layout Style Attributes](api-style-attributes.md#layout-styles) for a complete list of attributes that can be used in `Style`. --- ## View **JSX Element:** `` **iOS Native:** `SCValdiView` **Android Native:** `com.snap.valdi.views.ValdiView` Represents a node in the layout tree backed by a native platform view. Use a `` instead of `` whenever possible for better performance. ### Properties All properties from [Layout](#layout), plus: #### Lifecycle Callbacks **`onViewCreate`**: `() => void` - Called whenever the backing native view is created. **`onViewDestroy`**: `() => void` - Called whenever the backing native view is destroyed. **`onViewChange`**: `(nativeView: NativeView | undefined) => void` - Called whenever the backing native view is created or destroyed. - @deprecated use `IRenderedElement.getNativeNode` **`allowReuse`**: `boolean` - Whether the backing native View instance can be re-used. - By default, View instances are re-used across screens. - By setting this to false, the view instance will be guaranteed to be new and not re-used from the view pool. - Default: `true` #### Appearance **`background`**: `string` - Sets the background of the view. - Use `"color1"` to set a color. - Use `"linear-gradient(color1, color2, color3...)"` to set a gradient with evenly-spaced stops. - Use `"linear-gradient(color1 stop1, color2 stop2, color3 stop3...)"` to set a gradient with custom stops. **`backgroundColor`**: `Color` (string) - Sets the background color of the view. - `undefined` sets a clear color. **`opacity`**: `number` - Sets the opacity of the view. - Accepts values: [0.0 - 1.0] - Note: Making a view non-opaque will require layer blending. **`slowClipping`**: `boolean` - Enables clipping of the view's contents based on the view's borders. - Warning: degrades performance, avoid using if possible. - Default: `false` #### Border Properties **`border`**: `string` - Short-hand for all the borderXXX attributes. **`borderWidth`**: `CSSValue` - Sets the width of an element's border. - Note: make sure to set the borderColor - Default: `0` **`borderColor`**: `Color` - Sets the color of an element's four borders. - Note: make sure to set the borderWidth for the border to be visible - Default: `black` **`borderRadius`**: `CSSValue` - Defines the radius of the element's corners. - Can specify radius on a per-corner basis: `"5 10 0 20"` (top/left/right/bottom) - Or set all corners at once: `"10"` - Default: `0` **`boxShadow`**: `string` - Add a shadow to the view. - Syntax: `'{xOffset} {yOffset} {shadowOverflow} {color}'` - All number values are interpreted as points. - Example: `"0 2 10 rgba(0, 0, 0, 0.1)"` #### Gesture Properties **`touchEnabled`**: `boolean` - Set this to `false` to disable any user interactions on this view and its children. - Default: `true` **`hitTest`**: `(event: TouchEvent) => boolean` - Determines if a given view can capture any touches. **`onTouch`**: `(event: TouchEvent) => void` - Event handler called on every touch event captured by this view (started, changed, ended). **`onTouchStart`**: `(event: TouchEvent) => void` - Event handler called on the 'started' touch events captured by this view. **`onTouchEnd`**: `(event: TouchEvent) => void` - Event handler called on the 'ended' touch events captured by this view. **`onTouchDelayDuration`**: `number` - Specifies the minimum duration, in seconds, for an onTouch event to trigger. - When not set, will be zero. ##### Tap Gestures **`onTapDisabled`**: `boolean` - Set to `true` to disable tap completely. - Default: `false` **`onTap`**: `(event: TouchEvent) => void` - The handler that will be called when the user performs a tap gesture on this view. **`onTapPredicate`**: `(event: TouchEvent) => boolean` - The predicate used to decide whether the tap gesture should be recognized. - Prefer using `onTapDisabled` if the decision can be made without TouchEvent data. ##### Double Tap Gestures **`onDoubleTapDisabled`**: `boolean` - Set to `true` to disable double tap completely. - Default: `false` **`onDoubleTap`**: `(event: TouchEvent) => void` - Handler called when the user performs a double tap gesture. **`onDoubleTapPredicate`**: `(event: TouchEvent) => boolean` - Predicate to decide whether the double tap gesture should be recognized. ##### Long Press Gestures **`longPressDuration`**: `number` - Specifies the minimum duration, in seconds, for a long press to trigger. - When not set, will use a platform provided default. **`onLongPressDisabled`**: `boolean` - Set to `true` to disable long press completely. - Default: `false` **`onLongPress`**: `(event: TouchEvent) => void` - Handler called when the user performs a long press gesture. **`onLongPressPredicate`**: `(event: TouchEvent) => boolean` - Predicate to decide whether the long press gesture should be recognized. ##### Drag Gestures **`onDragDisabled`**: `boolean` - Set to `true` to disable drag completely. - Default: `false` **`onDrag`**: `(event: DragEvent) => void` - Handler called when the user performs a dragging gesture that started on this view. **`onDragPredicate`**: `(event: DragEvent) => boolean` - Predicate to decide whether the drag gesture should be recognized. ##### Pinch Gestures **`onPinchDisabled`**: `boolean` - Set to `true` to disable pinch completely. - Default: `false` **`onPinch`**: `(event: PinchEvent) => void` - Handler called when the user performs a pinch gesture on this view. **`onPinchPredicate`**: `(event: PinchEvent) => boolean` - Predicate to decide whether the pinch gesture should be recognized. ##### Rotate Gestures **`onRotateDisabled`**: `boolean` - Set to `true` to disable rotate completely. - Default: `false` **`onRotate`**: `(event: RotateEvent) => void` - Handler called when the user performs a rotate gesture on this view. **`onRotatePredicate`**: `(event: RotateEvent) => boolean` - Predicate to decide whether the rotate gesture should be recognized. #### Touch Area Extension **`touchAreaExtension`**: `number` - Can be used to increase the view's touch target area. **`touchAreaExtensionTop`**: `number` **`touchAreaExtensionRight`**: `number` **`touchAreaExtensionBottom`**: `number` **`touchAreaExtensionLeft`**: `number` #### Transform Properties **`scaleX`**: `number` - Specifies the horizontal scale component of the affine transformation to be applied to the view. **`scaleY`**: `number` - Specifies the vertical scale component of the affine transformation to be applied to the view. **`rotation`**: `number` - Specifies the rotation component in angle radians of the affine transformation to be applied to the view. **`translationX`**: `number` - Specifies the horizontal translation component of the affine transformation to be applied to the view. - Note: When the device is in RTL mode, the applied translationX value will be flipped. **`translationY`**: `number` - Specifies the vertical translation component of the affine transformation to be applied to the view. #### Mask Properties **`maskOpacity`**: `number` - Set an opacity to use on mask. - The opacity defines how much the mask should "erase" pixels that match the maskPath. - Opacity of 1 will make all the pixels matching the path transparent. - Default: `1` **`maskPath`**: `GeometricPath` - Set a geometric path to use as a mask on the given view. - Pixels that are within the given path will be turned transparent relative to the maskOpacity. #### Platform-Specific **`accessibilityId`**: `string` - Sets the view's accessibility identifier. - Commonly used to identify UI elements in UI tests. **`canAlwaysScrollHorizontal`**: `boolean` - Forces the platform surface method canScroll to always return true for horizontal touch events. - This property can be used to ensure that any platform-specific gesture handlers can be ignored when a valdi module would capture the event. **`canAlwaysScrollVertical`**: `boolean` - Forces the platform surface method canScroll to always return true for vertical touch events. **`filterTouchesWhenObscured`**: `boolean` - Optionally set filterTouchesWhenObscured for payment sensitive button on Android. - Not used for iOS. #### Styling **`style`**: `IStyle` - Styling object allows setting multiple attributes at once. - See [View Style Attributes](api-style-attributes.md#view-styles) for a complete list of attributes that can be used in `Style`. --- ## ScrollView **JSX Element:** `` **iOS Native:** `SCValdiScrollView` **Android Native:** `com.snap.valdi.views.ValdiScrollView` A view that provides scrolling functionality for its children. ### Properties All properties from [View](#view), except `flexDirection` (which is replaced by `horizontal`), plus: #### Scroll Event Callbacks **`onScroll`**: `(event: ScrollEvent) => void` - Called when the content offset of the scrollview changed. **`onScrollEnd`**: `(event: ScrollEndEvent) => void` - Called when the content offset of the scrollview has settled. **`onDragStart`**: `(event: ScrollEvent) => void` - Called when the user starts dragging the scroll content. **`onDragEnding`**: `(event: ScrollDragEndingEvent) => ScrollOffset | undefined` - Called synchronously when the ScrollView will end dragging. - The called function can return a scroll offset that should be used to replace the content offset where the scroll view should settle. **`onDragEnd`**: `(event: ScrollDragEndEvent) => void` - Called when the ScrollView ended dragging. - This will be called right after onDragEnding() is called, and will be called asynchronously. - The scroll view might still be animating its scroll at this point. **`onContentSizeChange`**: `(event: ContentSizeChangeEvent) => void` - Called whenever the content size of the scroll view has changed. #### Scroll Behavior **`horizontal`**: `boolean` - When enabled, the scroll view will allow horizontal scrolling instead of vertical. - Note: this attribute replaces flexDirection. - When enabled, children will be laid out as if flexDirection="row" was set. - When disabled, children will be laid out as if flexDirection="column" was set. - Default: `false` **`flexDirection`**: `never` - FlexDirection is not available on scroll views. - It can be set through the "horizontal" attribute. **`scrollEnabled`**: `boolean` - When enabled, the scroll view can be scrolled by the user. - Default: `true` **`pagingEnabled`**: `boolean` - When enabled, the scroll content offset will always settle on a multiple of the scrollview's size. - Default: `false` #### Bounce/Overscroll **`bounces`**: `boolean` - Configure whether or not there should be a visual effect when the user tries to scroll past the scroll boundaries. - On iOS: this visually looks like letting the user "bounce" on the edge of the scroll view. - On Android: this looks like a glow or squish effect that follows the finger or a bounce if using skia. - Default: `true` **`bouncesFromDragAtStart`**: `boolean` - Allow bouncing by dragging even when the content offset is already at the minimum. - Default: `true` **`bouncesFromDragAtEnd`**: `boolean` - Allow bouncing by dragging even when the content offset is already at the maximum. - Default: `true` **`bouncesVerticalWithSmallContent`**: `boolean` - Allow bouncing even when the vertical content size is smaller than the scroll itself. - Default: `false` **`bouncesHorizontalWithSmallContent`**: `boolean` - Allow bouncing even when the horizontal content size is smaller than the scroll itself. - Default: `false` #### Touch/Gesture Behavior **`cancelsTouchesOnScroll`**: `boolean` - Cancels all active touch gestures (from onTouch) of the scroll view's children when dragging the scroll view content. - Default: `true` **`dismissKeyboardOnDrag`**: `boolean` - If the keyboard is open, close it when we start scrolling. - Default: `false` **`dismissKeyboardOnDragMode`**: `'immediate' | 'touch-exit-below'` - When dismissKeyboardOnDrag is `true`, this changes the behavior of when the keyboard is dismissed. - `immediate`: keyboard is dismissed as soon as scrolling begins - `touch-exit-below`: keyboard is dismissed when the scroll drag gesture touches leave the lower boundary of the scroll bounds - Default: `'immediate'` #### Visual Indicators **`showsVerticalScrollIndicator`**: `boolean` - Shows the scroll indicator when scrolling vertically. - Default: `true` **`showsHorizontalScrollIndicator`**: `boolean` - Shows the scroll indicator when scrolling horizontally. - Default: `true` **`fadingEdgeLength`**: `number` - Create a fade effect on the content of the scroll view when scrolling is possible. - This attribute can control the size of the effect. - Default: `0` #### Viewport Extensions **`viewportExtensionTop`**: `number` - Can be used to extend the visible viewport of the scroll element. - When scrolling, this will cause child elements to be rendered potentially earlier (if positive) or later (if negative). - Default: `0` **`viewportExtensionRight`**: `number` - Extends the visible viewport on the right side. - Default: `0` **`viewportExtensionBottom`**: `number` - Extends the visible viewport on the bottom side. - Default: `0` **`viewportExtensionLeft`**: `number` - Extends the visible viewport on the left side. - Default: `0` #### Advanced Features **`circularRatio`**: `number` - Enables circular scroll by specifying the ratio between the calculated content size of the scroll element to the size of a single scrollable page. - For circular scroll to work properly, the children elements must be re-rendered at least twice, in which case `circularRatio` should be set to 2. - Default: `0` (scroll is not circular) **`decelerationRate`**: `'normal' | 'fast'` - [iOS-Only] Defines the rate at which the scroll view decelerates after a fling gesture. - Default: `'normal'` **`scrollPerfLoggerBridge`**: `IScrollPerfLoggerBridge` - Set this to enable scroll performance logging with given attribution parameters. - To get a value of this type, see `AttributedCallsite.forScrollPerfLogging` #### Interactive Properties (Programmatic Only) These properties should not be used in TSX tags, only for programmatic attribute manipulation: **`contentOffsetX`**: `number` - Can be programmatically set to change the current horizontal scroll offset. **`contentOffsetY`**: `number` - Can be programmatically set to change the current vertical scroll offset. **`contentOffsetAnimated`**: `boolean` - When set to true, any programmatic change to the contentOffset will be animated. **`staticContentWidth`**: `number` - When set, the scrollable content width will be based on this value for operations like snapping and scrolling. - This will bypass the automatic measurement. **`staticContentHeight`**: `number` - When set, the scrollable content height will be based on this value for operations like snapping and scrolling. - This will bypass the automatic measurement. #### Styling **`style`**: `IStyle` - See [ScrollView Style Attributes](api-style-attributes.md#scrollview-styles) for a complete list of attributes that can be used in `Style`. --- ## ImageView **JSX Element:** `` **iOS Native:** `SCValdiImageView` **Android Native:** `com.snap.valdi.views.ValdiImageView` A view for displaying images from local assets or remote URLs. ### Properties All properties from [Layout Attributes](#layout), plus: #### Image Source **`src`**: `string | Asset` - Specify the image asset or url to be rendered within the image's bounds. - Can be a URL string or an Asset object. - Default: `undefined` #### Image Display **`objectFit`**: `'fill' | 'contain' | 'cover' | 'none'` - Define how the image should be resized within the image view's bounds. - Useful when the aspect ratio of the image bounds may be different than the image asset content's aspect ratio. - `fill`: stretch the image to fill the image view's bounds - `contain`: conserve aspect ratio and scale to fit within bounds (can leave blank space) - `cover`: conserve aspect ratio and scale to fill bounds (can crop parts of the image) - `none`: conserve aspect ratio and don't scale to fit (just rendered in center) - Default: `'fill'` **`tint`**: `Color` - Apply a color tint on every pixel of the image. - Default: `undefined` **`flipOnRtl`**: `boolean` - When the current layout is in RTL, horizontally-mirror-flip the image's content. - Default: `false` #### Content Transform **`contentScaleX`**: `number` - Scale horizontally the content of the image within the image's bounds. - Default: `1` **`contentScaleY`**: `number` - Scale vertically the content of the image within the image's bounds. - Default: `1` **`contentRotation`**: `number` - Rotate the content of the image in radians. - Default: `0` #### Filters **`filter`**: `ImageFilter` - A post processing filter to apply on the image. #### Callbacks **`onAssetLoad`**: `(success: boolean, errorMessage?: string) => void` - Called when the loaded image asset has either successfully loaded or failed to load. **`onImageDecoded`**: `(width: number, height: number) => void` - Called when the image has been loaded and we have the dimensions. - Note: dimensions returned are of the raw image which may be different than the view. #### View Properties All view properties from [View](#view) including: - Lifecycle callbacks (`onViewCreate`, `onViewDestroy`) - Appearance properties (`backgroundColor`, `opacity`, `border`, etc.) - Gesture handlers (tap, drag, etc.) - Transform properties #### Styling **`style`**: `IStyle` - See [ImageView Style Attributes](api-style-attributes.md#imageview-styles) for a complete list of attributes that can be used in `Style`. --- ## VideoView **JSX Element:** `