Image

Prop

Type

Default

Description

Props

63 props

source

ImageSourcePropType

–

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

accessible

boolean

false

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

accessibilityActions

ReadonlyArray<AccessibilityActionInfo>

–

Provides an array of custom actions available for accessibility.

aria-label

string

–

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

blurRadius

number

–

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

accessibilityRole

AccessibilityRole

–

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

capInsets

Insets

–

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

accessibilityState

AccessibilityState

–

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

onProgress

((event: ImageProgressEventIOS) => void)

–

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

aria-busy

boolean

false

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

aria-checked

boolean | 'mixed'

–

aria-disabled

boolean

false

aria-expanded

boolean

false

aria-selected

boolean

false

onPartialLoad

(() => void)

–

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.

accessibilityHint

string

–

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.

accessibilityValue

AccessibilityValue

–

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).

aria-valuemax

AccessibilityValue['max']

–

aria-valuemin

AccessibilityValue['min']

–

aria-valuenow

AccessibilityValue['now']

–

aria-valuetext

AccessibilityValue['text']

–

onAccessibilityAction

((event: AccessibilityActionEvent) => void)

–

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

importantForAccessibility

('auto' | 'yes' | 'no' | 'no-hide-descendants')

–

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

resizeMethod

'auto' | 'resize' | 'scale' | 'none'

–

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.

aria-hidden

boolean

false

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

aria-modal

boolean

false

fadeDuration

number

–

Duration of fade in animation in ms. Defaults to 300

role

Role

–

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