Hata Ayıklama

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;

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

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

//src/navigation/TabNavigator.js
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";
import { HomeStackNavigator, USersStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      headerShown: false,
      tabBarIcon: ({ color, size }) => {
        let iconName;

        if (route.name === "HomeTab") {
          iconName = "home-outline";
        } else if (route.name === "UsersTab") {
          iconName = "people-outline";
        }
        return <Ionicons name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: "tomato",
      tabBarInactiveTintColor: "gray",
    })}
  >
    <Tab.Screen
      name="HomeTab"
      component={HomeStackNavigator}
      options={{ title: "Home" }}
    />
    <Tab.Screen
      name="UsersTab"
      component={USersStackNavigator}
      options={{ tabBarBadge: 3, title: "Users" }}
    />
  </Tab.Navigator>
);

export default BottomTabNavigator;

//Home/index.js
import React, { useState, useEffect } from "react";
import { View, Text, Button } from "react-native";

function HomeScreen({ navigation }) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title="Update" />
      ),
    });
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>{count}</Text>
      <Text>Home Screen</Text>
      <Button
        title="Kullanıcılar"
        onPress={() => navigation.navigate("UsersTab")}
      />

      {/* <Button title="Users" onPress={() => navigation.push("Users")} /> */}
    </View>
  );
}

export default HomeScreen;

//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";
import Error from "../../components/Error";

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));
  }, []);

  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));
  }, [userId]);

  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;

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