Component

Image

React Native image wrapper with placeholder, loading, fallback, and resize options.

React Native

Image

Fast image wrapper with placeholder fallback.

import { Image } from '@sohantalukder/rn-kit';

export function ProfilePhoto() {
  return (
    <Image
      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
      width={96}
      height={96}
      borderRadius={48}
      resizeMode="cover"
      accessibilityLabel="Profile photo"
    />
  );
}

Live component

remote imageplaceholderrounded

Set explicit dimensions to avoid layout shift.
Use placeholders for optional remote media.

Usage

import { Image } from '@sohantalukder/rn-kit';

import { Image } from '@sohantalukder/rn-kit';

export function ProfilePhoto() {
  return (
    <Image
      source={{ uri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330' }}
      width={96}
      height={96}
      borderRadius={48}
      resizeMode="cover"
      accessibilityLabel="Profile photo"
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

sourceImageSourcePropType-Image source object or asset reference.

widthnumber | string-Sets the rendered width of the component.

heightnumber | string-Sets the rendered height of the component.

resizeModeImageResizeModecoverControls how the source image fits its bounds.

borderRadiusnumber0Controls corner rounding for image, avatar, or surface content.

Theme

Image reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

remote image
placeholder
rounded

Best Practices

Set explicit dimensions to avoid layout shift.
Use placeholders for optional remote media.