Data Fetching and APIs

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

export default function PostsScreen() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=20')
      .then(r => r.json())
      .then(data => { setPosts(data); setLoading(false); })
      .catch(err => { setError(err.message); setLoading(false); });
  }, []);

  if (loading) return <ActivityIndicator size="large" style={{ flex:1 }} />;
  if (error) return <Text style={{ color:'red', padding:16 }}>{error}</Text>;

  return (
    <FlatList
      data={posts}
      keyExtractor={item => String(item.id)}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.body} numberOfLines={2}>{item.body}</Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={{ height:1, background:'#eee' }} />}
    />
  );
}

const styles = StyleSheet.create({
  row: { padding:16, backgroundColor:'#fff' },
  title: { fontWeight:'700', marginBottom:4 },
  body: { color:'#555' },
});