Published March 11, 2026
React Native apps need image assets during development long before the design team delivers final artwork. Using random web URLs introduces network dependencies that slow the simulator, fail on airplane mode, and produce inconsistent screenshots. Local placeholder images solve all three problems — they load instantly, work offline, and produce identical layouts every time.
React Native's <Image> component supports both `require()` for local files and `{ uri }` for remote URLs. Local images are bundled into the app binary, so they load instantly and work without a network connection. Remote images require an HTTP fetch, which adds latency and can fail.
During development, you want the fastest possible iteration cycle. Waiting for images to download over the network — even from a local server — adds friction to every reload. Committed placeholder files eliminate this delay entirely.
React Native apps typically use these image sizes:
- **App icon**: 1024×1024 (source), scaled down by the build process - **Splash screen**: 1242×2688 (iPhone), 1080×1920 (Android) - **List item thumbnail**: 80×80, 120×120 - **Profile avatar**: 96×96, 200×200 - **Card hero**: 375×200, 390×220 - **Full-width banner**: 375×180, 390×180
Enter these sizes in PlacePack with labels matching your component names. Download the ZIP and extract into an `assets/images/` directory in your React Native project.
Using local placeholder images
import React from "react";
import { Image, View } from "react-native";
const heroPlaceholder = require("../assets/images/card_hero_375x200.png");
export function ProductCard() {
return (
<View>
<Image source={heroPlaceholder} style={{ width: 375, height: 200 }} />
</View>
);
}React Native uses density-independent pixels (dp). A 375dp-wide image needs a 750px source file on a 2x device and 1125px on a 3x device. PlacePack's retina multiplier handles this — add @2x or @3x to any size to generate the high-density variant.
Place the generated files in your assets directory following React Native's naming convention (`image.png`, `image@2x.png`, `image@3x.png`). The bundler automatically selects the correct variant for the device's screen density.
iOS and Android render images slightly differently — iOS respects aspect ratio by default, while Android may stretch images depending on the `resizeMode` prop. Using consistent placeholder images across both platforms makes it easy to spot these differences during development.
Run both simulators side by side and compare the placeholder layout. If a card image appears stretched on Android but correct on iOS, you know the `resizeMode` prop needs adjustment — and you caught it early, before real photos obscure the issue.
When the design team delivers final artwork, replace the placeholder files at the same paths. Because React Native resolves images by `require()` path, no code changes are needed — only the files change. The layout remains identical because the placeholders were generated at the exact dimensions the components expect.
Ready to generate placeholder images?
Open the generator with the right preset pre-loaded and download your pack in seconds.