How to implement React-Native image picker using react-native-image-crop-picker for iOS.

For this tutorial I will explain how to implement an image picker for your react-native application, this tutorial will only showcase selecting images from the gallery and not using the camera, the package I will be using will be react-native-image-crop-picker.

You can find out more about this package with the link below.

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera…

So the first thing to do is create a react-native application using a terminal and store the application somewhere safe, maybe your desktop or documents folder.

npx react-native@latest init ImageCropPicker

Once the project has finished being created open it in your chosen IDE, mine is VS Code.

We will now install the react-native-image-crop-picker package (try to say that after a few drinks) using the IDE terminal.

npm i react-native-image-crop-picker --save

Once that has installed we need to install the pods for this package too, so from the root of your project in the terminal run the below command.

cd ios && pod install

Once the pods have been installed we now need to edit the Info.plist file in order to ask the user whether they want to give us permission to access the photo library, you can open the Info.plist using Xcode or VS Code. I personally prefer to open the file in VS Code.

The Info.plist file should be found within the “/ios/build/projectname” folder.

Once this file is open on our IDE we need to add a key inside of the first “dict” tag. The key we will add will be NSPhotoLibraryUsageDescription , in addition, we need to add a valid message in a string tag to tell the user why we need access to the users photo library.

So we will need something like the below.

<key>NSPhotoLibraryUsageDescription</key>
 <string>Permission to access users photo library</string>

More on this key can be found below.

NSPhotoLibraryUsageDescription | Apple Developer Documentation

If you also want to access the users camera and/or microphone then you will need to add another 2 keys to the info.plist file with a string tag for each. NSCameraUsageDescription and NSMicrophoneUsageDescription

If you are wanting to do this for Android then you will need to make changes to the projects build.gradle file.

Now open the App.tsx file and replace the current code with the below.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import ImagePicker from 'react-native-image-crop-picker';

function App(): JSX.Element {

  return (
    <View style={{ flex: 1, justifyContent: 'center', marginTop: 100}}>

      <TouchableOpacity>
        <Text style={{ alignItems: 'center' }}>Click me to open gallery</Text>
      </TouchableOpacity>

    </View>
  );
}

export default App;

Now run your app by using the below command.

npx react-native run-ios

If it is the first time you are running the project it may take a while to load.

You should see the below.

Now that we have a basic touchable area set up we can go ahead and create the function that will run once we click the area.

We now need to import the ImagePicker from “react-native-image-crop-picker” using the below code.

import ImagePicker from 'react-native-image-crop-picker';

Create an anonymous function inside the App.tsx file called “OpenPicker”.

const OpenPicker = () => {
    
  } 

Inside of this function we will define what we want the app to do when we click the button. ImagePicker has a few functions to run including “openCamera” and “openPicker” so we will choose “openPicker” and define an object with a few property values as the first parameter.

 const OpenPicker = () => {
    ImagePicker.openPicker({
      includeBase64:true,
      cropping: false
    })
  }

We want to set “cropping” to false so the cropping functionality does not get included, furthermore, I have added “includeBase64” so a base 64 string is included in the response object of the call.

There are a plethora of options for the first parameter including “width” and “height” which defines the width and height of the selected image when the “cropping” option is set to true.

In addition, there is “includeExif” which enable you to return exif data about the image or not.

“MediaType” is another property that sets the accepted media type for image selection.

“Multiple” is a boolean property that allows you enable or disable multiple image selection.

After adding the “openPicker” property we will now add to the call with a “then” to define what happens when “openPicker” has been called successfully.

For now we are just going to add a console log inside of the “then” and run the application.

const OpenPicker = () => {
    ImagePicker.openPicker({
      cropping: false,
      includeBase64:true
    })
    .then(image=>{
      console.log(image);
    })
  }

Now when you run the application and click the text you’ll notice that a prompt is shown asking if you want to give the app permission to access the photo library, click “Allow access to all photos” and if you see above the options will be the text you set in the info.plist string key.

Navigate through the images and select one you like, once you do the gallery should close and you should see a response in the terminal (with a very large string which will be the base64 string)

So now that we have the data returning we are now going to add an Image component to show the user the image they selected.

Add Image to the “react-native” import statement so it now looks like this.

import {
  Text,
  TouchableOpacity,
  View,
  Image
} from 'react-native';

We will now add the Image component to the App.tsx file and give it a width and height of 200.

In order to use the base 64 string for later we need a piece of state to contain it so within your App.tsx component create a piece of state named “imageData” with a function named “setImageData”.

const [imageData, setImageData] = useState("");

Now within the “then” of the OpenPicker promise set the “imageData” equal to the image.data.

setImageData(image.data)

If you console logged all of the data like earlier you will have to scroll quite a bit in the terminal to see that the base64 string is contained within a property called “data”. So now once we set this we can set the Image component source property equal to the base64 string.

To do this correctly we need to manually enter some text into the “src” tag so the Image component recognises that it is rendering a base64 string.

<View style={{ alignItems: 'center', justifyContent: 'center' }}>
        <Image src={`data:image/png;base64,${imageData}`} style={{ width: 200, height: 200 }} />
 </View>

So we currently see the above.

I will click it and the gallery will open automatically as I already gave the application permission to access it, I click “recents” I am shown the below.

I will select the bottom right one and I am greeted with a loading icon and text of “processing assets” once this has complete the gallery closes and I can see my picture of pinkish/purpleish flowers on my app.

Voila! That is it, you now have an image showing on your screen which was present in your simulator phone gallery. You can do a lot with this package within the realm of cropping images, there is also the package “react-native-image-picker” which is probably very similar to “react-native-crop-image-picker”, however, I was having some issues when setting that up (it may have been me).

GitHub - react-native-image-picker/react-native-image-picker: :sunrise_over_mountains: A React…

However, I just wanted to write this tutorial as I am doing something similar with an application I am building in my free time and thought I would spend some time getting to know the package and there sharing the knowledge!

Thank you very much for taking the time to read my article and don’t forget to share, clap and follow.