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