Images, App Size and Hermes

Images, bundle size and the engine

Images are a frequent source of memory and jank. Serve images at roughly the size they are displayed, use modern formats such as WebP, and cache remote images; expo-image offers disk and memory caching, placeholders and transitions. For app size, remove unused dependencies, avoid shipping large assets inside the binary when they can be downloaded, and on Android publish an App Bundle (AAB) so the Play Store delivers per-device APKs; enable code shrinking where your setup supports it. Hermes is the JavaScript engine built for React Native and the default in current versions: it compiles JavaScript to bytecode at build time, which improves start-up time and reduces memory use. Check the docs for your version for alternatives and settings.

Cached images with expo-image

Sized, cached and with a placeholder (check the docs for your version).

import { Image } from "expo-image";

export function ProductPhoto({ uri, blurhash }: { uri: string; blurhash?: string }) {
  return (
    <Image
      source={{ uri }}                 // ask your CDN for a size close to 160x160
      placeholder={blurhash ? { blurhash } : undefined}
      contentFit="cover"
      transition={200}
      cachePolicy="memory-disk"
      style={{ width: 160, height: 160, borderRadius: 12 }}
      accessibilityLabel="Product photo"
    />
  );
}

Measure start-up on a low-end Android

Cold start time on an older Android phone is usually the harshest test. Defer non-essential work until after the first screen renders.

Quick check: How does Hermes improve start-up time?

• It removes all JavaScript from the app
• It precompiles JavaScript to bytecode at build time
• It renders views with WebGL
• It downloads the bundle from a CDN on every launch