How to Prepare Images for React Native Apps
React Native handles images differently from web development. You need to think about multiple screen densities (@1x, @2x, @3x), static vs dynamic images, and the impact on your app bundle size. Using the wrong format or resolution leads to blurry icons, oversized app downloads, and wasted memory on mobile devices.
This guide covers how to prepare images for React Native, from choosing the right format to creating multi-density assets and optimizing bundle size.
Step-by-Step Instructions
- Choose the right format
React Native supports PNG, JPG, GIF, WebP (Android and iOS 14+), and SVG (with react-native-svg). Use PNG for icons, logos, and UI elements that need transparency and sharp edges. Use JPG for photographs and large background images. Use WebP when targeting newer OS versions for the best compression. Use SVG for scalable icons and illustrations.
- Create multi-density assets
React Native uses a density suffix system: image.png (1x), image@2x.png (2x), and image@3x.png (3x). For a 100x100 point icon, create three files: 100x100 (1x), 200x200 (2x), and 300x300 (3x). Place all three in the same directory. React Native automatically selects the right version based on the device screen density.
- Convert source images to the right format
Open imageconvert.co and convert your source images. For UI assets, convert to PNG for lossless quality. For photographs, convert to JPG at 85% quality. If your designer provides HEIC, AVIF, or TIFF files, convert them to the appropriate format before creating your multi-density assets.
- Organize in your project structure
Create an assets/images directory in your React Native project. Place your converted images with proper naming: icon-home.png, icon-home@2x.png, icon-home@3x.png. Import them in your components using require('./assets/images/icon-home.png'). React Native's packager bundles the correct density automatically.
- Optimize for bundle size
Static images bundled with require() increase your app download size. For large images or frequently updated content, use network images with the uri prop instead. Compress all bundled images before adding them to the project. A single unoptimized PNG can add 1-5 MB to your app bundle across all three density versions.
Static vs Network Images
React Native supports two image loading approaches. Static images are bundled with the app using require(). They load instantly but increase app download size. Network images load from a URL at runtime using the uri property. They do not affect app size but require network access and loading time.
Use static images for UI elements that are always needed: navigation icons, logos, placeholders, and onboarding screens. Use network images for user content, dynamic data, and anything that changes without an app update.
WebP Support in React Native
WebP offers 25-35% smaller files than PNG and JPG, which directly reduces your app bundle size. Android supports WebP natively. iOS supports WebP since iOS 14 (2020), which covers the vast majority of active iOS devices. For apps targeting iOS 14+, WebP is an excellent default format.
To use WebP in React Native, simply name your files with the .webp extension and use the same require() pattern. The multi-density system works identically: image.webp, image@2x.webp, image@3x.webp.
Image Caching Strategies
React Native's default image component has basic caching on iOS but minimal caching on Android. For apps with many network images, consider using a library like react-native-fast-image which provides consistent caching across both platforms. Proper caching reduces network requests and improves the user experience for image-heavy apps.
Regardless of caching strategy, always optimize your images before serving them. Smaller files cache faster, use less device storage, and render more quickly.
Frequently Asked Questions
What image format should I use for React Native icons?
PNG is the standard for React Native icons due to transparency support and sharp rendering at all densities. For scalable icons, consider SVG with the react-native-svg library. WebP works well on newer OS versions.
Do I really need @1x, @2x, and @3x versions?
For the best visual quality across all devices, yes. If you only provide one version, React Native will scale it, which causes blurriness on high-density screens or wasted memory on low-density screens. At minimum, provide @2x and @3x versions.
How do I reduce my React Native app size from images?
Convert bundled images to WebP for 25-35% smaller files. Move large or dynamic images to network loading. Compress all images at 85% quality for JPG and WebP. Remove unused image assets. Use SVG for icons and illustrations where possible.
Convert images to PNG for React Native