Turn React Native captures into store screenshots

1. Prepare one repeatable app state

Choose three moments that explain the product: the useful starting view, the action someone takes, and the result inside the app. Seed a dedicated demo account with fictional names and realistic content. Keep the same date, account state and navigation position across device captures.

Use your project's established build command. React Native's device guide covers device setup and running the native app; projects managed through a framework can have a different build workflow. Capture an approved build without development menus, error overlays or a disconnected development-server screen.

2. Capture the correct platform

1. Launch the iOS build on your selected iPhone or iPad target. Navigate to the first demo state and use the device or simulator screenshot control. Save the original PNG before adding decoration.
2. Launch the Android build separately. Check Android navigation, permissions and platform-specific UI rather than reusing the iOS capture inside an Android frame.
3. For Android command-line capture, authorize your own device, check its serial with adb devices, and direct the capture to that specific device. The example below writes a PNG to the current directory.
4. Open the saved image. Check for keyboard obstruction, loading spinners, test banners, real personal data and transient messages. Recapture the app instead of painting over incorrect UI.

adb devices
adb -s DEVICE_SERIAL exec-out screencap -p > android-01-overview.png

3. Import and design the listing set

Open Keep Ideas Forever or another library template in Skir. Choose App Store or Google Play in Screenshot platform, then replace the illustrative screen with your captured file. Keep the app artwork as one image so text, icons and spacing remain faithful to the running app.

Use the surrounding editable headline to explain the visible action. For a task app, ‘See today's priorities’ can accompany a priorities screen. A claim such as ‘Finish work twice as fast’ would need separate evidence and should not be inferred from a tidy interface. Review the sequence at a small preview size before adding more decoration.

4. Separate capture dimensions from delivery dimensions

A correctly sized native capture can still produce an incorrectly sized final composition. Export the saved project, unzip the result, and inspect every file with the screenshot size checker. Free exports the first three available screenshots; check the current plan limits before building a longer delivery set.

When the capture looks wrong

If the UI differs from production, resolve the build or demo state first. If a screenshot is sharp on disk but blurry in the composition, inspect the source resolution and its scale inside the board. If iOS text wraps differently from Android, keep the platform captures separate and adapt the surrounding copy. Skir does not compile or run a React Native project, and this guide is not evidence that your particular build has passed store review.