session 24/6

app.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ScrollView, FlatList } from 'react-native';
import axios from 'axios';
import { Card } from 'react-native-paper';
import { FlashList } from "@shopify/flash-list";

export default function App() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const getData = () => {
    // fetch usgin api
    axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
      setData(response.data);
    }).catch((err) => {
      console.log(err);
    });

    setLoading(false);
  }

  useEffect(() => {
    getData()
  })

  return (
    <View style={styles.container}>
      <Text style={styles.title}>List of Posts</Text>
      <View>
        {loading ? (
            <Text>Loading...</Text>
          ) : (
            <FlashList
              data={data}
              estimatedItemSize={100}
              keyExtractor={({ id }, index) => id}
              renderItem={({ item }) => (
                <Text style={styles.item}>{item.title}</Text>
              )}
            />
          )
        }
      </View>
    </View>
  );
}