CODEWITHSUNDEEP
react-nativeexporeact-native-camerareact-native-image-picker
Olivia
Olivia

Reputation: 2181

react-native-image-picker vs expo ImagePicker

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:

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?

Upvotes: 15

Views: 18853

Answers (2)

Zaytri
Zaytri

Reputation: 2584

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.

EDIT for 2025:

react-native link is not required in newer versions of react native because of auto linking. Also, Expo supports nearly every package requiring native code, including react-native-image-picker. You can use either in your project regardless of whether you're using Expo or not, but keep in mind that generally Expo libraries are more likely to be well maintained than community equivalents because Expo is a company with salaried developers being paid to maintain the library.

But there are cases where an Expo library may not do what you want so in those cases it may make sense to use a community solution

Upvotes: 16

Tanvi Agarwal
Tanvi Agarwal

Reputation: 156

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.

Upvotes: 1

Related Questions