CODEWITHSUNDEEP
iosreact-nativereact-native-listview
vijayst
vijayst

Reputation: 21826

Image not appearing within ListView in a react native application

I have a ListView which renders images.

<ListView
  renderRow={this.renderRow}
  dataSource={this.dataSource}
  pageSize={4}
  initialListSize={4}
  contentInset={{ bottom: 50 }}
  automaticallyAdjustContentInsets={false}
/>

The renderRow method renders the image as follows:

<View style={styles.itemSection}>
  <Image
    source={{ uri: card.image }}
    style={styles.itemImage}
    resizeMode="cover"
  />
</View>

The image is not getting rendered. Screenshot below: enter image description here

Below embedding the image in a ListView, the images were getting rendered appropriately. Any pointers to get the image viewable within ListView?

Example of the image url is: http://s3.amazonaws.com/sendto.us/postcards/fronts/000/000/017/original/from_api.png?1471627160

Sharing the styles:

itemSection: {
    paddingTop: 20,
    paddingLeft: 30,
    paddingRight: 30,
    paddingBottom: 20,
    borderBottomColor: '#ccc',
    borderBottomWidth: StyleSheet.hairlineWidth,
    flexDirection: 'row',
  },
  itemImage: {
    width: 120,
    height: 80,
    borderWidth: 2,
    borderColor: '#333',
  },

Upvotes: 1

Views: 156

Answers (1)

nabn
nabn

Reputation: 2408

Try adding this to your info.plist enter image description here

Also, refer to

How do I load an HTTP URL with App Transport Security enabled in iOS 9? and

Transport security has blocked a cleartext HTTP

Upvotes: 1

Related Questions