react-native-image-picker vs expo ImagePicker

Question

I have tried many attempts to get react-native-image-picker up and working with my RN app. I am using Expo and VS Code and am not running the app with Xcode or Android Studio. There seems to be many options to getting the camera roll available in an app and I am not sure which is the best path to take. None seem to be working for me so I would like to pick the best path and focus on making that one route work.

I am following the documentation: https://github.com/react-native-community/react-native-image-picker

Things I have tried:

• React Native Camera Roll
• Expo ImagePicker
• expo-image-picker
• react-native-image-picker
• react-images-upload
• react-native-photo-upload

My code:

import React, {useState, useEffect} from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, CameraRoll } from 'react-native'
import ImagePicker from 'react-native-image-picker';
// import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';

const PicturesScreen = ({navigation}) => {
    const [pictures, setPictures] = useState([]);

getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
};

useEffect(() => {
    getPermissionAsync();
}, []);

selectPhotoTapped = () => {
   const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true,
      },
    };

    ImagePicker.showImagePicker(options, response => {    
      if (response.didCancel) {
        console.log('User cancelled photo picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        let source = {uri: response.uri};
        console.log('source: ' + source);
        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };

        setPictures({
          picture: source
        });
      }
    });
  };


return (
    <View style = {styles.container}>
        <TouchableOpacity style = {styles.buttonContainerPhoto} onPress={()=> selectPhotoTapped()}> 
            <Text style={styles.buttonText} >
                Upload Photos 
            </Text>
        </TouchableOpacity> 

    <TouchableOpacity style = {styles.buttonContainer} onPress={()=> navigation.navigate('NextScreen')}> 
            <Text style={styles.buttonText} >
                Next 
            </Text>
        </TouchableOpacity>
    </View>
    );
};

const styles = StyleSheet.create({
    container: {
        ...
    }
});

export default PicturesScreen; 

I have made sure to link the packages, I have also uninstalled and reinstalled and started from scratch a few times. I have downgraded the version to make it work but I still continue to get one of these error messages:

react-native-image-picker: NativeModule.ImagePickerManager is null

or

Can not read property 'showImagePicker' of undefined.

or

undefined is not an object(evaluating 'imagepickerManager.showimagepicker')

Is it causing issues because I am using Expo? Should I just be using CameraRoll with react-native?

Answer 1

Use expo-image-picker if you're using Expo.

Anything that requires the use of react-native link will not work with Expo, unless stated that it is already included in Expo.

Answer 2

I was stuck with the same issue, and now I have resolved this. React native cli and expo cli both have some package differences. Similarly image-picker for both works differently.

For expo cli, you can check the documentation here: https://docs.expo.io/versions/latest/sdk/imagepicker/#__next

You can try for uploading image via camera using ImagePicker.launchCameraAsync and from photo library using ImagePicker.launchImageLibraryAsync.

While in react-native cli I was able to write a single function to choose from both camera and photo library but could not find a way for the same in expo yet.