Image picker in React Native - UI Render Trace

Component - Image picker

This component lets users pick an image from their device gallery or take a new photo with the camera. It shows the selected image on the screen and a button to open the image picker.

Widget Tree

View
├── Image
└── Button

The root View holds two children stacked vertically: an Image component that displays the chosen picture, and a Button below it that triggers the image picker.

Render Trace - 3 Steps

Step 1: View

Step 2: Image

Step 3: Button

State Change - Re-render

Trigger:User taps the 'Pick Image' button and selects an image

Before

selectedImageUri is null, so placeholder is shown

→

After

selectedImageUri is set to the chosen image URI

Re-renders:The Image component re-renders to show the new selected image

UI Quiz - 3 Questions

What happens when the user taps the 'Pick Image' button?

A The app closes

B The image picker opens to select or take a photo

C The image disappears

D Nothing happens

Key Insight

Using an image picker involves managing state to store the selected image URI and updating the Image component to reflect the user's choice. Keeping the UI simple with a clear button and preview area helps users understand the flow easily.