Image picker in React Native

Introduction

We use an image picker to let users choose pictures from their phone or take new photos. This makes apps more fun and personal.

When users want to upload a profile picture in a social app.

When users need to attach photos to a message or post.

When users want to scan documents or take pictures inside the app.

When users want to customize content with their own images.

Syntax

React Native

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

const pickImage = () => {
  launchImageLibrary({mediaType: 'photo'}, (response) => {
    if (!response.didCancel && !response.errorCode) {
      console.log(response.assets[0].uri);
    }
  });
};

Use launchImageLibrary to open the phone's gallery.

Check response.didCancel to see if the user canceled picking.

Examples

Open gallery to pick photos only.

React Native

launchImageLibrary({mediaType: 'photo'}, callback);

Open gallery to pick videos only.

React Native

launchImageLibrary({mediaType: 'video'}, callback);

Allow picking photos or videos.

React Native

launchImageLibrary({mediaType: 'mixed'}, callback);

Sample App

This app shows a button to pick an image from the gallery. When the user picks one, it displays the image below the button.

React Native

import React, {useState} from 'react';
import {View, Button, Image, StyleSheet} from 'react-native';
import {launchImageLibrary} from 'react-native-image-picker';

export default function App() {
  const [photoUri, setPhotoUri] = useState(null);

  const pickImage = () => {
    launchImageLibrary({mediaType: 'photo'}, (response) => {
      if (!response.didCancel && !response.errorCode && response.assets && response.assets.length > 0) {
        setPhotoUri(response.assets[0].uri);
      }
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Pick an Image" onPress={pickImage} />
      {photoUri && <Image source={{uri: photoUri}} style={styles.image} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16
  },
  image: {
    width: 200,
    height: 200,
    marginTop: 20,
    borderRadius: 10
  }
});

Important Notes

Remember to add permissions in your app config for accessing photos.

Test on a real device because simulators may not have a photo gallery.

Handle user canceling the picker gracefully to avoid errors.

Summary

Image picker lets users select or take photos inside your app.

Use launchImageLibrary with options to control media type.

Always check if the user canceled or if there was an error.

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