wants to set image URL by using state in react native

Question

hi i am setting my state in componentdidmount life cycle..but in image url nothing is setting but when i alert it gives my url here is my code where in setting state..

componentDidMount(){
ls.get("savedata").then(data => { this.setState({ name: data.user.name },()=>{alert(this.state.name)}); });
ls.get("savedata").then(data => { this.setState({ image: data.user.profile_photo },()=>alert(this.state.image)); });
    }

here is view where in using image component

          <Image source={{uri:this.state.image}}style={{width: 130, height: 110}}

Are you using and url www.google.com/cat.png or a reference to a local file ? Try to put a condition before your image to see if there is a kind of race condition. {this.state.image && } — zagoa, Nov 26 '18 at 13:52
i am getting image url from api and save into local storage and trying to show another page view — ahmad bilal, Nov 26 '18 at 13:55

score 0 · Answer 1 · answered Nov 26 '18 at 14:06

0

I wrote a little bit of code for you and this example is working. You can try it in expo. I hope that will help you :) I chained the Image container with two images, one after an other.

 componentDidMount(){
    this.setState({image: "https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg"}, () =>{
      this.setState({image: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg"})
    } );
  }


  render() {
    return (
      <View style={styles.container}>
      {this.state.image ?
        <Image source={{uri: this.state.image}} style={{width: 130, height:110}}/>
        : 
        null
      }
      </View>
    );
  }
}

answered Nov 26 '18 at 14:06

zagoa

798
4
23

i need only ane pic which is save in local storage when user login ..but here i used your method but nothing happens – ahmad bilal Nov 26 '18 at 14:15
Ok so if you have download your image before, you need to use require() now and not {uri:"http://someurl"}. Do you try with my real urls like mine, to now if that is not a css problem ? And can you put more code, and the result of your alert please – zagoa Nov 26 '18 at 14:18

score 0 · Answer 2 · answered Nov 26 '18 at 14:21

For Static Image Resources

React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

<Image source={require('./my-icon.png')} />

score 0 · Answer 3 · answered Nov 26 '18 at 14:25

0

If your image is stored locally then the Image tag should look like this:

    <Image
      style={styles.stretch}
      source={require(this.state.image)}
    />

answered Nov 26 '18 at 14:25

nikos fotiadis

1,040
2
8
16

1

You cannot do this, as react-native doesn't support [dynamic requires](https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string). – Andrew Mar 04 '19 at 21:17

wants to set image URL by using state in react native

3 Answers3

Linked