How to DIsplay images from Firebase Storage in React Native in using snapshot? - react-native

Question

I am new at React Native and using Expo, I was able to successfully set up an app that uploads pictures to Firebase Storage, but now I'm having trouble showing those images on the app(Homescreen).
How do I pull/Display the latest images into a FlatList or similar scrollable component? I've looked through StackOverflow for previous answers, but have had no luck.
Thank you For Any Help!
HomeS.js:
export default class HomeS extends React. Component {
renderPost = post => {
return (
<View style={styles.feedItem}>
<Image source={post.avatar} style={styles.avatar} />
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<View>
<Text style={styles.name}>{post.name}</Text>
<Text style={styles.timestamp}>{moment(post.timestamp).fromNow()}</Text>
</View>
<Feather name="more-horizontal" size={24} color="#73788B" />
</View>
<Text style={styles.post}>{post.text}</Text>
<Image source={post.image} style={styles.postImage} resizeMode="cover" />
<View style={{ flexDirection: "row" }}>
<Feather name="heart" size={24} color="#73788B" style={{marginRight:16}} />
<Ionicons name="chatbox" size={24} color="#73788B" />
</View>
</View>
</View>
);
};
constructor(props){
super(props);
this.state=({
posts:[],
newtext:'',
loading:false,
});
this.ref = firebase.firestore().collection('posts').orderBy("timestamp", "desc");
}
componentDidMount() {
const {imageName} = this.state;
let imageRef = firebase.storage().ref('photos' + imageName);
imageRef
.getDownloadURL()
.then((url) => {
//from url you can fetched the uploaded image easily
this.setState({profileImageUrl: url});
})
.catch((e) => console.log('getting downloadURL of image error => ', e));
this.unsubscribe = this.ref.onSnapshot((querySnapshot => {
const example = [];
querySnapshot.forEach((doc, index)=>{
example.push({
name: doc.data().name, //Work
id: doc.data().id, //Work
text: doc.data().text, //Work
timestamp: doc.data().timestamp, //Work
imageRef: doc.data().imageRef // Not Working
});
});
this.setState({
posts:example,
loading: false,
});
}));
}
onPressPost = () => {
this.ref.add({
textname : this.props.text,localUri: this.state.image
}).then((data)=>{
console.log(`adding data = ${data}`);
this.setState({
newtext:'',
image:null,
loading:true
});
}).catch((error)=>{
console.log(`error to add doc = ${error}`);
this.setState({
newtext:'',
loading:true
});
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Feed</Text>
</View>
<FlatList
style={styles.feed}
data={this.state.posts}
renderItem={({ item }) => this.renderPost(item)}
keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
></FlatList>
</View>
);
}

Answer 1

to display images in firebase storage you wil follow these steps:-
upload image to firebase
get download link
use download link in image source
first you will get file object from input type file
<input type="file" onchange={(e)=>(this.uploadImage(e))}
upload image & get download url
uploadImage = async (e) => {
var files = e.target.files
var image = files[0]
const Buffer = await image.arrayBuffer() // convert img to buffer
var storageRef = firebase.storage().ref('/MyPix')
var picPath = "pic_awesome.jpg"
var ref = storageRef.child(picPath)
var metadata = { contentType: 'image/jpeg', public: true }
await ref.put(Buffer, metadata)
var downloadUrl = await ref.getDownloadURL()
console.log('Download Url :: ' + downloadUrl)
return downloadUrl;
}
now display image from download url
<Image
style={{width: 50, height: 50}}
source={{uri: this.state.ImageUrl}}
/>
now let me tell you a performant way of uploading mutiple images
const imageList = ['https://imgpath.jpg','https://imgpath2.jpg']
const requests = imageList.map((image) => {
return uploadImage(image) // upload image method is given above
})
console.log(`start uploading All images in imageList in parallel`)
const response = await Promise.all(requests)
response.map((image)=> saveToFireStore(image))
now save download url to firestore
import { addDoc, collection , getFirestore } from "firebase/firestore";
...
const saveToFireStore = async (downloadUrl) => {
const db = getFirestore();
const docRef = await addDoc(collection(db, "users"), {
userId: "123",
userName: "Mathison",
profilePic: downloadUrl
});
}
now lets come to your final homejs component where we get images from frestore & display in listview
import { collection, getDocs } from "firebase/firestore";
...
componentDidMount = () => {
// get Images from Firestore & save To State
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((doc) => {
example.push({
name: doc.data().name, //Work
id: doc.data().id, //Work
text: doc.data().text, //Work
timestamp: doc.data().timestamp, //Work
imageRef: doc.data().profilePic // saved in saveToFireStore(): Working
});
})
this.setState({
posts:example,
loading: false,
});
}
now other methods render & renderPost will start working as they are because user object has images now
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerTitle}>Feed</Text>
</View>
<FlatList
style={styles.feed}
data={this.state.posts}
renderItem={({ item }) => this.renderPost(item)}
keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
></FlatList>
</View>
);
}
display image from user object
renderPost = post => {
return (
<Image source = {{uri:post.imageRef}} />
)
}