Please provide the following:
- SDK Version: 42.0
- Platforms(Android/iOS/web/all): All
- Add the appropriate “Tag” based on what Expo library you have a question on.
Hello there. I am trying to upload some information and an image to firebase.
The information uploads but not the image. I can view the image in-app but when I try to upload it crashes with the following error.
"Unhandled Rejection (Error): You attempted to use a firebase module that’s not installed on your Android project by calling firebase.app().
Ensure you have:
- imported the ‘io.invertase.firebase.app.ReactNativeFirebaseAppPackage’ module in your ‘MainApplication.java’ file.
- Added the ‘new ReactNativeFirebaseAppPackage()’ line inside of the RN ‘getPackages()’ method list.
See React Native Firebase - A react native firebase library supporting both android and ios native firebase SDK's for full setup instructions."
I have tried various pieces of code from the internet but they seem to change a lot depending on SDK version. (ie.sometimes storage(), sometimes firebase.storage())
Is there a more straight forward way to upload an image with the latest SDK?
Thanks in advance.
Richard
All code below…
import React, { useEffect, useState } from 'react';
import { Image, FlatList, Keyboard, Text, TextInput, TouchableOpacity, View, SelectInput, Platform } from 'react-native';
import styles from './styles';
import { firebase } from '../../firebase/config';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
import * as ImagePicker from 'expo-image-picker';
export default function HomeScreen(props) {
const [titleText, setTitleText] = useState('')
const [locationText, setLocationText] = useState('')
const [descriptionText, setDescriptionText] = useState('')
const [image, setImage] = useState(null);
const [entities, setEntities] = useState([])
const entityRef = firebase.firestore().collection('entities')
const userID = props.extraData.id;
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
let openImagePickerAsync = async () => {
let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (permissionResult.granted === false) {
alert("Permission to access camera roll is required!");
return;
}
let pickerResult = await ImagePicker.launchImageLibraryAsync();
console.log(pickerResult);
setImage(pickerResult.uri);
}
useEffect(() => {
entityRef
.where("authorID", "==", userID)
.orderBy('createdAt', 'desc')
.onSnapshot(
querySnapshot => {
const newEntities = []
querySnapshot.forEach(doc => {
const entity = doc.data()
entity.id = doc.id
newEntities.push(entity)
});
setEntities(newEntities)
},
error => {
console.log(error)
}
)
}, [])
const uploadImage = async () => {
const { uri } = image;
//const filename = entityRef;
const filename = "test.png";
//const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
const uploadUri = 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);
};
const onAddButtonPress = () => {
if (titleText && titleText.length > 0) {
const timestamp = firebase.firestore.FieldValue.serverTimestamp();
const data = {
text: titleText,
location: locationText,
description: descriptionText,
authorID: userID,
createdAt: timestamp,
};
entityRef
.add(data)
.then(_doc => {
setTitleText('')
setLocationText('')
setDescriptionText('')
Keyboard.dismiss()
})
.catch((error) => {
alert(error)
});
uploadImage();
}
}
const renderEntity = ({item, index}) => {
return (
<View style={styles.entityContainer}>
<Text style={styles.entityText}>
{index}. {item.text}
</Text>
</View>
)
}
return (
<View style={styles.container}>
<View style={styles.formContainer}>
<TextInput
style={styles.input}
placeholder='Add new title'
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setTitleText(text)}
value={titleText}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholder='Location'
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setLocationText(text)}
value={locationText}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholder='Description'
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setDescriptionText(text)}
value={descriptionText}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<View>
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
<TouchableOpacity onPress={openImagePickerAsync} style={styles.button}>
<Text style={styles.buttonText}>Pick a photo</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={onAddButtonPress}>
<Text style={styles.buttonText}>Add</Text>
</TouchableOpacity>
</View>
{ entities && (
<View style={styles.listContainer}>
<FlatList
data={entities}
renderItem={renderEntity}
keyExtractor={(item) => item.id}
removeClippedSubviews={true}
/>
</View>
)}
</View>
)
}
