Image

The image to display: a remote `{ uri }`, or a bundled asset from `require(...)`.

Fit: fit the whole image inside the box, letterboxing the spare space (pick one).

Fit: fill the box, cropping any overflow. The default when no fit is set (pick one).

Fit: fill the box by distorting the aspect ratio (pick one).

Fit: center at intrinsic size, scaling down only when larger than the box (pick one).

Fit: tile the image at its intrinsic size to fill the box (pick one).

Fit: show at intrinsic size with no scaling (pick one).

Width of the image box (px, or a percent string like `"100%"`). Images have no intrinsic layout size.

Height of the image box (px, or a percent string).

Corner radius from the kit's radius scale (pick one): none, sm, md, lg, xl, 2xl, 3xl, full.

Composition only (aspectRatio, layout within a parent). Size comes from `width` / `height`, rounding from `radius`.

Accessible name for the image, the same name `alt` gives (and it wins when both are set). On iOS and Android React Native makes an image its own accessibility element for `alt` (or `accessible`), so prefer `alt` for an image that stands on its own.

The image's alt text: a named image is announced as an image with this name on every platform (the web's <img alt>, the image role natively). With no name here or in `accessibilityLabel` the image is decorative, and assistive tech skips it.

E2E hook forwarded to the underlying image.

When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

Provides an array of custom actions available for accessibility.

Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-native/issues/34424

blurRadius: the blur radius of the blur filter added to the image

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.

When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info on Apple documentation

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.

Invoked on download progress with {nativeEvent: {loaded, total}}

alias for accessibilityState see https://reactnative.dev/docs/accessibility#accessibilitystate

—

—

—

—

Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.

An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.

Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

—

—

—

—

When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom action.

[Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.

The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`. - `auto`: Use heuristics to pick between `resize` and `scale`. - `resize`: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of `scale` when the image is much larger than the view. - `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view. - `none`: No sampling is performed and the image is displayed in its full resolution. This should only be used in rare circumstances because it is considered unsafe as Android will throw a runtime exception when trying to render images that consume too much memory. More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.

A value indicating whether the accessibility elements contained within this accessibility element are hidden.

—

Duration of fade in animation in ms. Defaults to 300

Indicates to accessibility services to treat UI component like a specific role.

Used to reference react managed images from native code.

onLayout function Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height} }}.

Invoked on load error with {nativeEvent: {error}}

Invoked when load completes successfully { source: { uri, height, width } }.

Invoked when load either succeeds or fails

Invoked on load start

—

—

—

—

—

—

Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element.

Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props, the text is read aloud. The value should should match the nativeID of the related element.

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only.

A string representing the resource identifier for the image. Similar to src from HTML. See https://reactnative.dev/docs/image#src

Similar to srcset from HTML. See https://reactnative.dev/docs/image#srcset

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only.

similarly to `source`, this property represents the resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.

Used to reference react managed images from native code.

A static image to display while downloading the final image off the network.

Enables the view to be screen reader focusable, not keyboard focusable.

A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden to the screen reader.

Adds the CORS related header to the request. Similar to crossorigin from HTML. See https://reactnative.dev/docs/image#crossorigin

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.

Changes the color of all the non-transparent pixels to the tintColor. See https://reactnative.dev/docs/image#tintcolor

When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).

A string indicating which referrer to use when fetching the resource. Similar to referrerpolicy from HTML. See https://reactnative.dev/docs/image#referrerpolicy

When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture.

When accessible is true, the system will invoke this function when the user performs the magic tap gesture.

https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios

By using the accessibilityLanguage property, the screen reader will understand which language to use while reading the element's label, value and hint. The provided string value must follow the BCP 47 specification (https://www.rfc-editor.org/info/bcp47). https://reactnative.dev/docs/accessibility#accessibilitylanguage-ios

A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ https://reactnative.dev/docs/accessibility#accessibilityshowslargecontentviewer

When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. https://reactnative.dev/docs/accessibility#accessibilitylargecontenttitle

Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact with it if this View is still accessible.