title: Images from URI source not showing in React Native
body: <p>I have read all answers to similar questions and none of them address my issue. As you can see in my code snippet below and attached screen-shot, I have done everything advise for success but no luck.</p>
  
  <ol>
  <li>I am retrieving photos from Flickr with https:// and valid api key (see code)</li>
  <li>All the needed photos are successfully retrieved and stored in var imadeData (see screenshot)</li>
  <li>FlatList used to list the items in 3 columns via photo id. Screenshot shows the 3 columns but no photos.</li>
  </ol>
  
  <p>Photo.js</p>
  
  <pre><code>    const url = 'https://api.flickr.com/services/rest/?&amp;method=flickr.people.getPublicPhotos&amp;api_key=' + API_KEY + '&amp;user_id=46262470@N03&amp;format=json&amp;&amp;per_page=20&amp;nojsoncallback=1'; // MSU flickr
  
  class Photos extends Component {
      constructor (props) {
          super(props);
          this.state = {
              imageData: [],
              isLoading: true,
              isError: false,
              text: '',
              columns: 3,
              key: 1,
          };
      }
  
  getImageData=() =&gt; {
  
          return fetch( url )
  
              .then((response) =&gt; response.json())
              .then((responseJson) =&gt; {
  
                  this.setState({
                      isLoading: false,
                      imageData: responseJson.photos.photo
                  });
              })
              .catch((error) =&gt; {
                  console.error(error);
              });
      };
  
  
      componentDidMount() {
  
          this.getImageData();
  
      }
  &lt;FlatList
                  numColumns={ columns }
  
                  data = { imageData }
                  // extraData={this.state}
                  renderItem={ ( { item, index } ) =&gt; {
  
                      return &lt;ImageList itemWidth={ (ITEM_WIDTH - (10 * columns)) / columns }
                                       photoId={ {uri: item.id } } /&gt;
  
                  }}
                  keyExtractor={
                      (item, index ) =&gt; {
                          return `${item.id + index}`
                          // return { index }
                      }
                  }
                  // refreshing={this.state.refreshing}
                  // onRefresh={this.handleRefresh}
              /&gt;
  </code></pre>
  
  <p>ImageList.js</p>
  
  <pre><code>render () {
  
          const {itemWidth, photoId, onPressItem } = this.props;
  
          return (
              &lt;Card&gt;
  
                  &lt;TouchableWithoutFeedback
  
                      onPress = {() =&gt; onPressItem &amp;&amp; onPressItem(this.props.photoId)}
                      onPressIn = {() =&gt; this.animateIn()}
                      onPressOut ={ () =&gt; this.animateOut()} &gt;
  
                      &lt;Animated.View style={{
                          margin:5,
                          // backfaceVisibility: 'hidden',
                          transform: [
                              {
                                  scale: 1
                              },{
                              rotateY: this.state.animateItem.interpolate({
                                  inputRange: [0,1],
                                  outputRange: ['180deg','0deg']
                              })
                              }
                          ]
                      }}&gt;
                          &lt;Image style={{width: itemWidth, height: 200 }} source={{ photoId }} /&gt;
                      &lt;/Animated.View&gt;
                  &lt;/TouchableWithoutFeedback&gt;
  
              &lt;/Card&gt;
  
          );
  
  
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/y9PFp.png" rel="nofollow noreferrer">Chrome console log with no errors and correct data retrieved</a></p>
  
  <p>[iOS simulator screen showing grid view with no photos<a href="https://i.stack.imgur.com/h50Vt.png" rel="nofollow noreferrer">2</a></p>
  
  <p>Edits:</p>
  
  <p>Per the pointer from the last response, I have recreated the photoId as a new variable photoURL that has the full url instead of just the photo id.  I use the following: const  photoURL = '<a href="https://farm" rel="nofollow noreferrer">https://farm</a>' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_c.jpg';</p>
  
  <pre><code> const  photoURL = 'https://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_c.jpg';
  
                      return &lt;ImageList itemWidth={ (ITEM_WIDTH - (10 * columns)) / columns }
                                       image={ {uri: photoURL } } /&gt;
  </code></pre>
  
  <p>I also verified that the correct photos are being returned as param to the image src uri by pasting each coded photo into the browser.</p>
  
  <p>But images are still not being displayed in my app screen with this correction.  Please help me as I am at my whims end.  Thanks.</p>