How do you handle images and static assets?

React Native's Image component accepts a local asset from require or an object with a uri. Local assets are bundled by Metro and resolve to platform resources. Remote images are downloaded at runtime, and the default behaviour does not give you fine-grained cache control.

import { Image } from "react-native";

const logo = require("./assets/logo.png");

export function Avatar({ uri }: { uri: string }) {
  return (
    <Image
      source={{ uri }}
      style={{ width: 48, height: 48, borderRadius: 24 }}
      resizeMode="cover"
      accessibilityLabel="User avatar"
    />
  );
}

Practical asset rules

• Request server-side resized images instead of downloading full-resolution photos
• Use a caching image library for feeds and repeated remote images
• Prefer WebP or platform-efficient formats where supported
• Provide 2x and 3x assets, or vector icons, instead of one oversized bitmap
• Set accessibilityLabel for meaningful images and mark decorative ones as not accessible

Large local assets increase download size and startup memory. Optimise them during the build, and avoid shipping multi-megabyte PNGs for icons. For icons, a vector icon library is usually smaller and sharper than raster sets.