Getting image url using contentful

Question

I'm trying to return an image to a React Native component. I've searched this problem, and I'm unable to figure out what is happening with contentful to return an image url. I've tried this and this. I'm not completely understandding linking in contentful and how I would return an Image Gallery. In this case I only want to return the first entry. Does anybody have any pointers?

import React from "react";
import { StyleSheet, ListView, View } from "react-native";
const { createClient } = require("contentful/dist/contentful.browser.min.js");
import { List, ListItem, Text } from "react-native-elements";
export default class App extends React.Component {
  constructor() {
    super();
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = { dataSource: this.ds.cloneWithRows(["row1", "row2"]) };
  }
  componentDidMount() {
    this.getContentFromcontentful();
  }
  getContentFromcontentful() {
    const client = createClient({
      accessToken:
      API_KEY,
      space: SPACE_ID,
      resolveLinks: true
    });
    client
    .getEntries({ content_type: "events" })
    .then(response => {
      this.setState({
        dataSource: this.ds.cloneWithRows(
          response.items.map(function(events) {

            return events.fields;
          })
        )
      });
    })
    .catch(function(error) {
      console.log(error);
    });
  }
  render() {
    return (
      <View
        style={{
          flex: 1
        }}
        >
          <Text h1 style={{ alignItems: "center", marginTop: 20 }}>
            Events
          </Text>

          <ListView
            style={styles.container}
            dataSource={this.state.dataSource}
            renderRow={rowData => (
              <List containerStyle={{ marginBottom: 10 }}>
                <ListItem
                  roundAvatar
                  title={rowData.title}
                  subtitle={rowData.description}
                />
              </List>
            )}
          />
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 50,
      backgroundColor: "#F5FCFF"
    },
    title: {
      fontSize: 20,
      textAlign: "center",
      padding: 20
    }
  });

JSON View

{
  "id": "featuredImage",
  "name": "Featured Image",
  "type": "Array",
  "localized": false,
  "required": true,
  "validations": [],
  "disabled": false,
  "omitted": false,
  "items": {
    "type": "Link",
    "validations": [
      {
        "linkMimetypeGroup": [
          "image"
        ]
      }
    ],
    "linkType": "Asset"
  }
}

When I do a console.log(events.fields)

            Object {
            23:38:55:   "fields": Object {
            23:38:55:     "date": "2018-02-21T18:30-06:00",
            23:38:55:     "description": "Removed due to length",
            23:38:56:     "featuredImage": Array [
            23:38:56:       Object {
            23:38:56:         "fields": Object {
            23:38:56:           "file": Object {
            23:38:56:             "contentType": "image/jpeg",
            23:38:56:             "details": Object {
            23:38:56:               "image": Object {
            23:38:56:                 "height": 540,
            23:38:56:                 "width": 960,
            23:38:56:               },
            23:38:56:               "size": 113601,
            23:38:56:             },
            23:38:56:             "fileName": "26814561_1628330070555932_5667937158923006052_n.jpg",
            23:38:56:             "url": "//images.contentful.com/yidayada/
            f4cab422c6637/26814561_1628330070555932_5667937158923006052_n.jpg",
            23:38:56:           },
            23:38:56:           "title": "Fight Night: Dragonball FighterZ",
            23:38:56:         },
            23:38:56:         "sys": Object {
            23:38:56:           "createdAt": "2018-01-30T15:17:01.022Z",
            23:38:56:           "id": "1kTBNvadFqSsyKswKusmcG",
            23:38:56:           "locale": "en-US",
            23:38:56:           "revision": 1,
            23:38:56:           "space": Object {
            23:38:56:             "sys": Object {
            23:38:56:               "id": "h7xctdj5jj2k",
            23:38:56:               "linkType": "Space",
            23:38:56:               "type": "Link",
            23:38:56:             },
            23:38:56:           },
            23:38:56:           "type": "Asset",
            23:38:56:           "updatedAt": "2018-01-30T15:17:01.023Z",
            23:38:56:         },
            23:38:56:       },
            23:38:56:     ],
            23:38:56:     "location": Object {
            23:38:56:       "lat": 339,
            23:38:56:       "lon": -93.0003,
            23:38:56:     },
            23:38:56:     "place": "This Place",
            23:38:56:     "slug": "a-nice-slug",
            23:38:56:     "startTime": "2018-02-21T06:30-06:00",
            23:38:56:     "title": "Awesome",
            23:38:56:     "url": "https://www.facebook.com/",
            23:38:56:   },

Answer 1

Checking to see if the data has loaded prevents the error.

            <ListView
                    style={styles.container}
                    dataSource={this.state.dataSource}
                    renderRow={rowData => {
                        var image = rowData.featuredImage
                        ? "http:" + rowData.featuredImage[0].fields.file.url
                        : "https://images.contentful.com/h7xctdj5jj2k/3shmqkZIjSEq6uEkKyWQsu/a2782f623e7a6dac21d9d146fcbe1dcc/1600x900.png";
                        return (
                        <Tile
                            imageSrc={{ uri: image }}