Why Image picker in React Native? - Purpose & Use Cases

The Big Idea

Discover how a simple tool can save you hours of tricky coding and make your app photo-ready instantly!

The Scenario

Imagine you want to let users add photos to your app by browsing their phone gallery or taking a new picture. Without a tool, you'd have to write complex code to access device files, handle permissions, and manage different phone models.

The Problem

Doing this manually is slow and tricky. You might forget to ask for permission, causing the app to crash. Different phones store images differently, so your code might work on one device but fail on another. It's easy to get lost in details and make mistakes.

The Solution

The Image picker component solves all this for you. It gives a simple way to open the gallery or camera, handles permissions automatically, and returns the chosen image ready to use. This saves time and avoids errors.

Before vs After

✗ Before

async function pickImage() {
  // complex native code to access gallery
  // handle permissions manually
  // parse image data
}

✓ After

import {launchImageLibrary} from 'react-native-image-picker';

launchImageLibrary({}, response => {
  if (!response.didCancel && !response.errorCode) {
    console.log(response.assets[0].uri);
  }
});

What It Enables

With Image picker, you can easily add photo upload features that work smoothly on all devices, making your app more interactive and fun.

Real Life Example

Think about a social media app where users share photos. The Image picker lets them select or snap pictures quickly, so they can post moments instantly without frustration.

Key Takeaways

Manually accessing images is complex and error-prone.

Image picker handles permissions and device differences for you.

It makes adding photo features simple and reliable.

Practice

1. What is the main purpose of using an image picker in a React Native app?

easy

A. To let users select or take photos inside the app

B. To edit photos with filters

C. To upload files from the internet

D. To display images from a URL

Solution

1. Step 1: Understand the image picker role

   An image picker allows users to choose or capture photos within the app.

2. Step 2: Compare options

   Options B, C, and D describe different features unrelated to picking images from device storage or camera.

3. Final Answer:

   To let users select or take photos inside the app -> Option A

4. Quick Check:

   Image picker = select or take photos [OK]

Hint: Image picker = choose or take photos inside app [OK]

Common Mistakes:

• Confusing image picker with image editing
• Thinking it uploads images from internet
• Assuming it only displays images

2. Which of the following is the correct way to import the image picker library in React Native?

easy

A. import { launchCamera } from 'react-native-camera';

B. import ImagePicker from 'react-native-picker';

C. import { pickImage } from 'react-native-image-picker';

D. import { launchImageLibrary } from 'react-native-image-picker';

Solution

1. Step 1: Identify correct package and function

   The official image picker uses 'react-native-image-picker' and exports 'launchImageLibrary'.

2. Step 2: Check each import statement

   import { launchImageLibrary } from 'react-native-image-picker'; matches the correct import syntax and function name. Others use wrong package names or functions.

3. Final Answer:

   import { launchImageLibrary } from 'react-native-image-picker'; -> Option D

4. Quick Check:

   Correct import = import { launchImageLibrary } from 'react-native-image-picker'; [OK]

Hint: Use exact package and function names for import [OK]

Common Mistakes:

• Using wrong package name
• Importing non-existent functions
• Confusing camera and image picker imports

3. What will be the output of this code snippet when a user cancels the image selection?

launchImageLibrary({}, response => {
  if (response.didCancel) {
    console.log('User cancelled');
  } else if (response.errorCode) {
    console.log('Error:', response.errorMessage);
  } else {
    console.log('Image URI:', response.assets[0].uri);
  }
});

medium

A. Logs the image URI

B. Logs 'Error:' with error message

C. Logs 'User cancelled' to the console

D. Throws a runtime error

Solution

1. Step 1: Understand response properties

   If the user cancels, response.didCancel is true, so the first if block runs.

2. Step 2: Check code branches

   Since didCancel is true, it logs 'User cancelled' and skips other branches.

3. Final Answer:

   Logs 'User cancelled' to the console -> Option C

4. Quick Check:

   didCancel true logs 'User cancelled' [OK]

Hint: Check didCancel to detect user cancellation [OK]

Common Mistakes:

• Confusing didCancel with errorCode
• Expecting image URI when cancelled
• Not handling cancellation case

4. Identify the error in this React Native image picker usage:

launchImageLibrary(options, response => {
  if (response.didCancel) {
    console.log('User cancelled');
  } else if (response.errorCode) {
    console.log('Error:', response.errorMessage);
  } else {
    console.log('Image URI:', response.uri);
  }
});

medium

A. Using response.error instead of response.errorCode

B. Accessing response.uri instead of response.assets[0].uri

C. Missing import statement for launchImageLibrary

D. Not checking for user cancellation

Solution

1. Step 1: Check response object structure

   The image URI is inside response.assets array, not directly in response.uri.

2. Step 2: Identify incorrect property access

   Accessing response.uri will be undefined or cause error; correct is response.assets[0].uri.

3. Final Answer:

   Accessing response.uri instead of response.assets[0].uri -> Option B

4. Quick Check:

   Image URI = response.assets[0].uri [OK]

Hint: Image URI is in response.assets[0].uri, not response.uri [OK]

Common Mistakes:

• Using wrong error property
• Ignoring user cancellation
• Not importing the function

5. You want to allow users to pick only photos (no videos) from their library. Which option object should you pass to launchImageLibrary?

hard

A. { mediaType: 'photo' }

B. { mediaType: 'video' }

C. { mediaType: 'mixed' }

D. { mediaType: 'image' }

Solution

1. Step 1: Understand mediaType option

   The mediaType option controls what media types the picker shows: 'photo', 'video', or 'mixed'.

2. Step 2: Choose correct mediaType for photos only

   'photo' restricts selection to images only, which matches the requirement.

3. Step 3: Eliminate incorrect options

   'video' allows only videos, 'mixed' allows both, 'image' is invalid.

4. Final Answer:

   { mediaType: 'photo' } -> Option A

5. Quick Check:

   mediaType 'photo' = photos only [OK]

Hint: Use mediaType: 'photo' to pick only images [OK]

Common Mistakes:

• Using 'image' instead of 'photo'
• Choosing 'mixed' when only photos needed
• Confusing 'video' with photos