How to modify a map annotation?

Question

I am trying to modify the image source when it focuses. This is how I fill my annotation array, and you can see my onFocus event where I try to re-set the annotation to a new image. I am trying to not load the image until the annotation is open.

  for(i = 0; i < data.length; i++){
    this.state.annotations.push({
      longitude: Number(data[i].lng),
      latitude: Number(data[i].lat),
      title: data[i].loc_str,
      focused: false,
      onFocus: () => {
        this.state.annotations[i].detailCalloutView =
          <Image 
            source={{uri: "http://i.imgur.com/6zc8Apn.jpg", cache: 'force-cache'}}
            style={styles.thumbnail}
            resizeMode={Image.resizeMode.contain}
          />
      },
      detailCalloutView:
        <Image 
          source={require('./placeholder.png')}
          style={styles.thumbnail}
          resizeMode={Image.resizeMode.contain}
        />,
    })
  }

  this.setState({
    annotations: this.state.annotations,
  });

Error:

undefined is not an object (evaluating 'data[i].img_url')

@DanielA.White If that was the problem, then it would be showing the same image, but that's not the case. It's showing no image, but an error. While that may be an additional problem here, it is not the problem specified in the question. — User, Mar 31 '17 at 20:10
Please make the example in your question a [mcve]. Make sure to include everything necessary to reproduce the problem, and exclude everything that isn't necessary to reproduce the issue. — , Mar 31 '17 at 20:26
@TinyGiant If I include any more, then I'm going to have to give my API key out. — User, Mar 31 '17 at 20:32
@User Include some sample data, like a snipped version of the response from the API. Then remove anything not directly related. — , Mar 31 '17 at 20:34

How to modify a map annotation?

0 Answers0