Aplicación en React Native que muestra una lista de imágenes y texto (super héroes) desde un JSON en Internet.

App.js

import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, FlatList, Text, Image } from 'react-native';

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {
      estaCargando: true
    }

  }

  // Se manda llamar cuando todo está montado
  componentDidMount() {
    this.peticionWeb();
  }

  // El que hace la petición
  peticionWeb = async () => {

    try {
      const respuesta = await fetch('https://api.jsonbin.io/b/5ed43cbc79382f568bd0b836', {
        method: 'GET',
        headers: {
          'secret-key': '$2b$10$n40lSCMNuVlnsWI/5AeUcupCCUhGZkIbvx8RlnrAVP/wz6UePLx9K'
        }
      });
      const respuestaJson = await respuesta.json();
      this.setState({
        estaCargando: false,
        dataSource: respuestaJson
      }, function () {

      });
    }
    catch (error) {
      console.error(error);
    }

  }

  // La línea de separación entre imágenes
  lineaDeSeparacion = () => {

    return (
      <View
        style={{
          height: 2,
          width: "100%",
          backgroundColor: "#000",
        }}
      />
    );

  }

  // La cosa que renderiza objetos en pantalla
  render() {

    // El círculo de cargar
    if (this.state.estaCargando) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      );
    }

    // Los elementos de la lista
    return (
      <View style={estilos.contenedor}>
        <FlatList
          data={this.state.dataSource}
          ItemSeparatorComponent={this.lineaDeSeparacion}
          renderItem={({ item }) =>
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <Image source={{ uri: item.imageurl }} style={estilos.imagen} />
              <Text style={estilos.texto} >{item.name}</Text>
            </View>
          }
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }

}

// Los estilos generales
const estilos = StyleSheet.create({

  contenedor: {
    justifyContent: 'center',
    flex: 1,
    marginTop: 20
  },
  imagen: {
    width: '50%',
    height: 100,
    margin: 7
  },
  texto: {
    width: '50%',
    textAlignVertical: 'center',
    textAlign: 'center',
    padding: 10,
    color: '#327e36',
    fontWeight: 'bold'
  }

});