solution.js

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

import data from './data';

const Separator = () => (
  <View style={{ width: '100%', height: 1, backgroundColor: '#ddd' }} />
);

export default class App extends Component {
  state = {
    movies: [],
    loading: true,
  };
  keyExtractor = item => item.id.toString();
  renderItem = ({ item }) => (
    <View style={styles.listItem}>
      <Text>{item.title}</Text>
      <Text>{item.description}</Text>
    </View>
  );
  fetchData = () => {
    this.setState({
      loading: true,
    });
    setTimeout(() => {
      fetch('https://4r3v4kxk49.lp.gql.zone/graphql', {
        headers: {
          'content-type': 'application/json',
        },
        method: 'POST',
        body: JSON.stringify({
          query: `
          {
            movies {
              id,
              title,
              description,
              director,
              genres
            }
          }
        `,
        }),
      })
        .then(res => res.json())
        .then(data => {
          this.setState({
            loading: false,
            movies: data.data.movies,
          });
        })
        .catch(err => {
          console.log(err);
        });
    }, 2000);
  };
  componentDidMount() {
    this.fetchData();
  }
  render() {
    console.log(this.state);
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.movies}
          ItemSeparatorComponent={Separator}
          ListEmptyComponent={() => (
            <View style={styles.container}>
              <ActivityIndicator />
            </View>
          )}
          refreshing={this.state.loading}
          onRefresh={this.fetchData}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    paddingTop: Platform.select({ ios: 20, android: 0 }),
  },
  listItem: {
    padding: 20,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});