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?
react-native linkwill not work with Expo, unless stated that it is already bundled with Expo – Cape