John Davidson

import React, { Component } from 'react';

import { ActivityIndicator, FlatList, Text, View } from 'react-native';



export default class App extends Component {

  constructor(props) {

    super(props);



    this.state = {

      data: [],

      isLoading: true

    };

  }



  async getMovies() {

    try {

      const response = await fetch('http://192.168.1.6:80/p4Lite/Sept2021/react_backend/index.php');

      const json = await response.json();

      this.setState({ data: json });

    } catch (error) {

      console.log(error);

    } finally {

      this.setState({ isLoading: false });

    }

  }



  componentDidMount() {

    this.getMovies();

  }



  render() {

    const { data, isLoading } = this.state;



    return (

      <View style={{ flex: 1, padding: 24 }}>

        {isLoading ? <ActivityIndicator/> : (

          <FlatList

            data={data}

            keyExtractor={({ id }, index) => id}

            renderItem={({ item }) => (

              <Text>{item.name}, {item.email}</Text>

            )}

          />

        )}

      </View>

    );

  }

};