How to Use Image Picker in React Native: Simple Guide

To use react-native-image-picker, first install the package, then import it and call launchImageLibrary or launchCamera to let users pick or take photos. Handle the response to get the image URI and display or upload it in your app.

Syntax

The main functions to pick images are launchImageLibrary(options, callback) and launchCamera(options, callback). You pass options to customize behavior and a callback to handle the result.

• options: Configure media type, quality, etc.
• callback: Receives response with image data or error info.

javascript

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

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

Example

This example shows a simple React Native component that opens the image library when a button is pressed, then displays the selected image.

javascript

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

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

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

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="Pick an Image" onPress={pickImage} />
      {photoUri && <Image source={{uri: photoUri}} style={{width: 200, height: 200, marginTop: 20}} />}
    </View>
  );
}

Output

A screen with a button labeled 'Pick an Image'. When tapped, it opens the device's photo library. After selecting an image, the image appears below the button.

Common Pitfalls

• Not installing or linking the package correctly causes errors.
• For iOS, missing permission keys in Info.plist blocks image picking.
• Not checking response.didCancel or response.errorCode leads to crashes.
• Using deprecated callback style instead of promise-based API in newer versions.

javascript

/* Wrong: Not checking cancel or error */
launchImageLibrary({}, (response) => {
  console.log(response.assets[0].uri); // May crash if user cancels
});

/* Right: Check before using */
launchImageLibrary({}, (response) => {
  if (!response.didCancel && !response.errorCode) {
    console.log(response.assets[0].uri);
  }
});

Quick Reference

Remember these key points when using react-native-image-picker:

• Install with npm install react-native-image-picker and run pod install on iOS.
• Request permissions in AndroidManifest.xml and Info.plist.
• Use launchImageLibrary for gallery and launchCamera for camera.
• Always check for cancellation or errors in the response.

Key Takeaways

Install and link react-native-image-picker before using it in your app.

Use launchImageLibrary or launchCamera functions to open image picker UI.

Always check response.didCancel and response.errorCode to handle user cancellation or errors.

Add required permissions in AndroidManifest.xml and Info.plist for Android and iOS.

Display the selected image using the URI from response.assets[0].uri.