Adding Images from Gallery Using expo-image-picker in Expo

Reading time: 2 minutes

If we want to add the native module to retrieve images from the gallery, the best approach is to use expo-image-picker.

The first thing we need to do is install the library:

expo install expo-image-picker

Once installed, we need to go to app.json and add:

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ]
    ]
  }
}

to configure the plugin.

If we have native code in iOS, we need to go to Info.plist and add the permission:

<key>NSPhotoLibraryUsageDescription</key>
    <string>Allow $(PRODUCT_NAME) to access your photo library.</string>

Now we have everything set up to implement the library.

We create a new component called ImagesPicker.

We import the library.

import * as ImagePicker from 'expo-image-picker';

We can create a function to retrieve images from the library.

export async function getImageLibrary(callback) {

    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        base64: true,
        aspect: [9, 16],
        quality: 0.8,
    });

    if (!result.cancelled) {
        imageObject = {
            data: result,
            fileData: result.base64,
            base64Data: 'data:image/jpeg;base64,' + result.base64,
            fileUri: result.uri
        };

        callback(imageObject);
    } else {
        callback(-2);
    }

}

In this case, I create a function that I will use to return the base64 image obtained from the gallery.

With the options mediaTypes: ImagePicker.MediaTypeOptions.Images, I indicate that it should only allow me to select Images. With allowsEditing, it allows me to edit the size in the mobile gallery. Setting base64 to true activates returning the base64. I set the aspect ratio to 9:16 or the desired ratio, and the quality from 0.1 to 0.8.

Finally, I retrieve the returned object with the following structure:

    {
      "assetId": "C166F9F5-B5FE-4501-9531",
      "base64": null,
      "duration": null,
      "exif": null,
      "fileName": "IMG.HEIC",
      "fileSize": 6018901,
      "height": 3025,
      "type": "image",
      "uri": "file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
      "width": 3024
    }

This would be the complete code:

import * as ImagePicker from 'expo-image-picker';


export async function getImageLibrary(callback) {

    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        base64: true,
        aspect: [9, 16],
        quality: 0.8,
    });

    if (!result.cancelled) {
        imageObject = {
            data: result,
            fileData: result.base64,
            base64Data: 'data:image/jpeg;base64,' + result.base64,
            fileUri: result.uri
        };

        callback(imageObject);
    } else {
        callback(-2);
    }

}

(do not include the Reading time). Return it directly in HTML format. Do not add any additional sentences. Add a PIPE at the end when you’re done.

DevCodeLight