CODEWITHSUNDEEP
androidgoogle-cloud-firestorereact-nativereact-native-firebase
Stayheuh
Stayheuh

Reputation: 147

How to show the image from the cloud firestore in react native?

SOLVED! : Check the reply below, many thanks to the people who helped! I also had to change the storage rules like this. It's in storage>Rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

I am doing this only for test purposes though. Don't allow everyone to write when you write a real program!

PROBLEM:

enter image description here

This is my cloud storage, how to show this image in my react native app? I tried to do it like this:

<Image style={styles.stretch} source={{
  uri: 'gs://mezuniyet2r.appspot.com/images/erkek.jpg',
}}
  />

What am I missing here? It doesn't work like this. Isn't it supposed to work like this? I can't find anything like this at official documentation. Very bad documentation indeed. It doesn't say much. Can someone please help me? And this is the full code:

import React, {Component} from 'react';
import {
Platform,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
Button,
StatusBar,
} from 'react-native';
import firebase from '@react-native-firebase/app'
import firestore from '@react-native-firebase/firestore'
import { format } from "date-fns";
import storage from '@react-native-firebase/storage';
class App extends Component {
state = {
tablo: {
adSoyad: "",
yas: "",
dogumTarihi: "",
mezunDurumu: "",

}
}
constructor(props) {
super(props);
this.getUser();
this.subscriber=firestore().collection("tablo").doc
('J6mAav1kjkcjrMupeOqX').onSnapshot(doc => {
this.setState({
tablo: {
adSoyad: doc.data().adSoyad,
yas: doc.data().yas,
dogumTarihi: doc.data().dogumTarihi,
mezunDurumu:doc.data().mezunDurumu,

}
}
)
});
}

getParsedDate(date){
  date = String(date).split(' ');
  var days = String(date[0]).split('-');
  var hours = String(date[1]).split(':');
  return [parseInt(days[2]), parseInt(days[1])-1, parseInt(days[0]), parseInt(hours[0]), parseInt(hours[1]), parseInt(hours[2])];
}



getUser= async() => {
const userDocument= await firestore().collection("tablolar").doc
("J6mAav1kjkcjrMupeOqX").get()
console.log(userDocument)
}
render() {
  var mezund;
  var date = new String(this.state.tablo.dogumTarihi);
  var date2=this.getParsedDate(date);

//const reference = storage().ref('erkek.jpg');
  //var storageRef = firebase.storage().ref();
  //var mountainsRef = storageRef.child('erkek.jpg');
  //var mountainImagesRef = storageRef.child('images/erkek.jpg');
  //mountainsRef.name === mountainImagesRef.name;
  console.log(date2);


  //this doesn't work though how do we do this??? it gives undefined.
  if(this.state.tablo.mezunDurumu==false){mezund="Mezun Değil"}
  else if(this.state.tablo.mezunDurumu=true){mezund="mezun"}
 // var dtarih= new String(this.state.tablo.dogumTarihi);
 
 

 
return (
<View style={styles.body}>
<Text style={styles.row}>Ad Soyad: {this.state.tablo.adSoyad}</Text>
<Text style={styles.row}>Yaş: {this.state.tablo.yas}</Text>
<Text style={styles.row}>Doğum Tarihi: {date}</Text>

<Text style={styles.row}>Mezun Durumu: {mezund}</Text>
<Image style={styles.stretch} source={{
  uri: 'gs://mezuniyet2r.appspot.com/erkek.jpg',
}}
  />
</View>
);
}
}
const styles=StyleSheet.create({
  body:{
    padding: 25,
    margin:25,
    backgroundColor:'orange',
    flex: 1
  },
  stretch:{width:50,height:50,
    resizeMode:'stretch',},
    row:{
    backgroundColor:'#fff',
    
    borderBottomWidth:4,
    }
  })
export default App

Upvotes: 1

Views: 2082

Answers (1)

rezso.dev
rezso.dev

Reputation: 427

The image path has to be converted into a URL that the <Image/> component can fetch and display. This asynchronous operation is best done once in the component lifecycle and stored in the state.

class App extends Component {
    state = {
       ...,
       imageUrl: null,
    }

    ...

    async componentDidMount() {
        var imageRef = firebase.storage().ref('erkek.jpg');
        var imageUrl = await imageRef.getDownloadURL();
        this.setState({ imageUrl });
    }

    render() {
        ...
        <Image style={styles.stretch} source={{ uri: this.state.imageUrl }}/>
        ...
    }
}

You should also make sure that the user has read access to the image. You can set read and write permissions in Firebase Security Rules, see https://firebase.google.com/docs/storage/security/start#sample-rules. If you want the image to be readable by everyone set ".read": true in your rules but be careful not to set write public to prevent unwanted tampering with your project!

Upvotes: 3

Related Questions