I have followed this tutorial to create an image upload app using Firebase and got to the very end and when I build the app using npx react-native run-ios I get this error:
Uncaught Error
undefined is not an object (evaluating
'_reactNativeImagePicker.default.showImagePicker')
Source
29 | }
30 |};
>31 |ImagePicker.showImagePicker(options, respon
|^
32 | if (response.didCancel) {
33 | console.log('User cancelled image picked
34 | } else if (response.error) {
UploadScreen.js (31:5)
This is my UploadScreen.js file:
import React, { useState } from 'react';
import {
View,
SafeAreaView,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
Image
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
export default function UploadScreen() {
const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images'
}
};
ImagePicker.showImagePicker(options, response => {
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
const source = { uri: response.uri };
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const { uri } = image;
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
const task = storage()
.ref(filename)
.putFile(uploadUri);
// set progress state
task.on('state_changed', snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
try {
await task;
} catch (e) {
console.error(e);
}
setUploading(false);
Alert.alert(
'Photo uploaded!',
'Your photo has been uploaded to Firebase Cloud Storage!'
);
setImage(null);
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== null ? (
<Image source={{ uri: image.uri }} style={styles.imageBox} />
) : null}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#bbded6'
},
selectButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center'
},
uploadButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#ffb6b9',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold'
},
imageContainer: {
marginTop: 30,
marginBottom: 50,
alignItems: 'center'
},
progressBarContainer: {
marginTop: 20
},
imageBox: {
width: 300,
height: 300
}
});
I believe I read that the showImagePicker is no longer in use by the react-native-image-picker package so I think this may be the problem here?
If that is correct then I assume there is a replacement for 'showImagePicker', if so what is it and how can I modify my code to work?
Thank you :)
Edit: I have now implemented launchCamera and launchImageLibrary which allows me to pick a photo from the library but then I get this warning/error? and nothing is uploaded to Firebase.... 
