Async/Await

import { View, Text, StyleSheet } from "react-native";
import React from "react";
import { measure } from "react-native-reanimated";

const Error = ({ message }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Error : {message}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
  text: { color: "#000", backgroundColor: "orange", padding: 10, fontSize: 18 },
});

export default Error;

//Users/index.js
import React, { useEffect, useState } from "react";
import { View, FlatList } from "react-native";
import Item from "./item";
import axios from "axios";
import Error from "../../components/Error";
import Loading from "../../components/Loading";

const UsersScreen = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState([true]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // axios("https://jsonplaceholder.typicode.com/usersf")
    //   .then((res) => setUsers(res.data))
    //   .catch((err) => setError(err.message))
    //   .finally(() => setLoading(false));

    getData();
  }, []);

  const getData = async () => {
    try {
      const res = await axios("https://jsonplaceholder.typicode.com/users");
      setUsers(res.data);
    } catch (err) {
      setError(err.message);
    }
    setLoading(false);
  };

  if (loading) {
    return <Loading text="Loading..." />;
  }

  if (error) {
    return <Error message={error} />;
  }

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={users}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Item id={item.id} name={item.name} />}
      />
    </View>
  );
};

export default UsersScreen;

//Users/item.js
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

const item = ({ name, id }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => navigation.navigate("UserDetail", { id })}
      >
        <Text style={styles.text}>{name}</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: "#D8D8D8",
    borderBottomWidth: 1,
  },
  text: {
    fontSize: 24,
  },
});

export default item;

//UserDetail/index.js
import { View, Text, StyleSheet, Button } from "react-native";
import React, { useEffect, useState, useLayoutEffect } from "react";
import Loading from "../../components/Loading";
import axios from "axios";
import Error from "../../components/Error";

const UserDetail = ({ route, navigation }) => {
  const { id } = route.params;

  const [userId, setUserId] = useState(id);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button
          onPress={() => setUserId((id) => (id + 1 === 11 ? 1 : id + 1))}
          title="Next"
        />
      ),
    });
  }, [navigation]);

  useEffect(() => {
    // axios(`https://jsonplaceholder.typicode.com/usersf/${userId}`)
    //   .then((res) => setUser(res.data))
    //   .catch((err) => setError(err.message))
    //   .finally(() => setLoading(false));

    getData();
  }, [userId]);

  const getData = async () => {
    try {
      const { data } = await axios(
        `https://jsonplaceholder.typicode.com/usersf/${userId}`
      );
      setUser(data);
    } catch (err) {
      setError(err.message);
    }

    setLoading(false);
  };

  if (loading) {
    return <Loading text="Loading User..." />;
  }

  if (error) {
    return <Error message={error} />;
  }

  return (
    <View>
      <Text style={styles.text}>{JSON.stringify(user, null, 2)}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
  },
});

export default UserDetail;