Fetch-2 Next Button

//src/navigation/DrawerNavigator.js
import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

import { USersStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";
import DrawerContent from "../components/DrawerContent";
const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        drawerPosition: "right",
        drawerType: "front",
        swipeEnabled: true, // elle kaydırma
        drawerStyle: { width: 150 },
      }}
      //drawerContent={() => <DrawerContent />}
      initialRouteName="UsersDrawer"
    >
      <Drawer.Screen
        name="HomeDrawer"
        options={{ title: "Home" }}
        component={TabNavigator}
      />
      <Drawer.Screen
        name="UsersDrawer"
        options={{ title: "Users" }}
        component={USersStackNavigator}
      />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

//src/navigation/StackNavigator.js
import React from "react";
import { View, Text, Button } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Ionicons from "@expo/vector-icons/Ionicons";

// screens
import HomeScreen from "../screens/Home";
import UsersScreen from "../screens/Users";
import UserDetail from "../screens/UsersDetail";
import DrawerButton from "../components/DrawerButton";

//Home Stack
const HomeStack = createNativeStackNavigator();

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={() => ({
          headerLeft: () => <DrawerButton />,

          //   (
          // <Button
          //   title="Open Drawer"
          //   onPress={() => navigation.toggleDrawer()}
          // //   onPress={() => navigation.openDrawer()}
          // />
          //   ),
        })}
      />
    </HomeStack.Navigator>
  );
}

//Settings Stack
const UsersStack = createNativeStackNavigator();

function USersStackNavigator() {
  return (
    <UsersStack.Navigator>
      <UsersStack.Screen name="Users" component={UsersScreen} />
      <UsersStack.Screen name="UserDetail" component={UserDetail} />
    </UsersStack.Navigator>
  );
}

export { HomeStackNavigator, USersStackNavigator };

//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";

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(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(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";

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(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(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;