import React, { useState, useEffect, Component } from 'react'
import { View, Text, FlatList, color, ImageBackground,StyleSheet} from 'react-native'

const FlatList_Api = () => 
{
  const [APi, Apiupt] = useState()
  
  async function callApi()
    {
      let resp = await fetch('https://reactnative.dev/movies.json')
      let resp_json = await resp.json()
      Apiupt(resp_json.movies)
    }
    

  useEffect(()=>{
    callApi()
  })
  return (
      <View style={styles.container}>
          <Text style={{fontSize:40, color:'red'}}>Flat List with API</Text>
         <FlatList 
          //  numColumns={2}
          data= {APi}
          renderItem = {
              ({item}) => 
              <Text style={styles.item}>
                {item.title},  {item.releaseYear}
              </Text>
        }
         />
      </View>
  ) 
}

const styles = StyleSheet.create
({
  container:
  {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 10,
    paddingHorizontal: 20
  },
  item:
  {
    marginTop: 20,
    padding: 10,
    backgroundColor: 'darkblue',
    fontSize:30,
    color: 'pink',
    // marginHorizontal:20,
    // marginTop:40
  }
})
export default FlatList_Api