axios

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

const data = [
  {
    id: 1,
    name: "Ahmet",
  },
  {
    id: 2,
    name: "Ayşe",
  },
  {
    id: 3,
    name: "Fatma",
  },
];

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

  useEffect(() => {
    axios("https://jsonplaceholder.typicode.com/users")
      .then((res) => setUsers(res.data))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {loading ? (
        <Loading text="Loading..." />
      ) : (
        <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";

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

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

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

  useEffect(() => {
    axios(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((res) => setUser(res.data))
      .finally(() => setLoading(false));
  }, [userId]);

  return (
    <View>
      {loading ? (
        <Loading text="Loading User..." />
      ) : (
        <>
          <Text style={styles.text}>UserDetail</Text>
          <Text style={styles.text}>{JSON.stringify(user, null, 2)}</Text>
        </>
      )}
    </View>
  );
};

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

export default UserDetail;

// App.js
import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import BottomTabNavigator from "./src/navigation/TabNavigator";
import DrawerNavigator from "./src/navigation/DrawerNavigator";

function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

export default App;

//src/components/Loading.js
import { View, Text, StyleSheet } from "react-native";
import React from "react";

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

const styles = StyleSheet.create({
  container: {
    padding: 10,
    width: "100%",
    backgroundColor: "bisque",
  },
  text: {
    fontSize: 24,
    textAlign: "center",
  },
});

export default Loading;