I can't view the picture in the firebase storage

Question

my get code

` getImage = async (imageUrl) => {
    const user = firebase.auth().currentUser;
    const url = await storage()
        .ref(`Users/${user.uid}/picture`)
        .getDownloadURL()
    console.log(url)
    imageUrl = url;
    let imgSource = { uri: imageUrl }; // change this line
    if (isNaN(imageUrl)) {
      imgSource = { uri: this.state.imageUrl };
      if (Platform.OS == 'android') {
        imgSource.uri = "file:///" + imgSource.uri;
      }
    }
    
}


  render() {

    let {imageUrl} = this.state;

    return (
        <View>
             <Image source={this.getImage(imageUrl)} style={{width:200,height:200}}/> 
        </View>

` console screenshot I can get the url from my console but the picture is not showing in my app, what's the problem

Answer 1

This might help

state = { newImageURL : undefined }

getImage = async (imageUrl) => {
    const user = firebase.auth().currentUser;
    const url = await storage()
        .ref(`Users/${user.uid}/picture`)
        .getDownloadURL()
    console.log(url)
    imageUrl = url;
    let imgSource = { uri: imageUrl }; // change this line
    if (isNaN(imageUrl)) {
      imgSource = { uri: this.state.imageUrl };
      if (Platform.OS == 'android') {
        imgSource.uri = "file:///" + imgSource.uri;
      }
    }
    this.setState({ newImageURL: imgSource }); // update code here
    
}

componentDidMount(){
  let {imageUrl} = this.state;
  this.getImage(imageUrl)
}


  render() {
    return (
        <View>
             {newImageURL ? <Image source={newImageURL} style={{width:200,height:200}}/> : null }
        </View>