Add expo-image (Android)
Drop-in <Image> replacement with caching, blurhash, WebP support, and SVG.
Install
bashnpm exec --no -- expo install expo-image
Use
tsximport { Image } from 'expo-image'; <Image source={{ uri: 'https://cdn.example.com/image.jpg' }} style={{ width: 200, height: 200 }} contentFit="cover" placeholder={{ blurhash: 'L6PZfSi_.AyE_3t7t7R**0o#DgR4' }} transition={300} cachePolicy="memory-disk" />
Why over RN Image
- Disk cache by default (RN Image doesn't on Android)
- Blurhash placeholder
- WebP encoding/decoding
- Tinting + content fit modes
- Transitions (fade-in on load)
Cache policies
none— no cachedisk— disk onlymemory— RAM onlymemory-disk— both (default, recommended)
Performance tips
tsx<Image // Provide intrinsic size to avoid layout shifts source={{ uri, width: 800, height: 600 }} // Use lower-res placeholder during list scroll recyclingKey={uri} // For very large lists priority="low" />
Local assets
tsximport Logo from '../assets/logo.png'; <Image source={Logo} />
SVG support
bashpnpm add react-native-svg
Use <SvgUri /> for remote SVG.
Android-specific gotchas
- Glide-backed under the hood
- Animated WebP/GIF works
- Don't render >1000 images simultaneously (use FlashList virtualization)
- Memory cache cleared on app background; disk cache persists
Pair with
add-flashlistfor image-heavy listsoptimize-aab-size(image assets bloat AAB)


