Tutorial React Native Auth - #6 - Membuat Dashboard Screen React Native
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah dashboard screen pada project kita
Pada artikel kali ini kita akan lanjutkan untuk membuat screen dashboard dari aplikasi kita, agar ketika user login tidak lagi menampilkan screen error.
Membuat Screen Dashboard
Setelah user berhasil login, aplikasi akan mengarahkan ke halaman Dashboard. Di halaman ini kita akan menampilkan informasi dasar pengguna dari Auth Context.
Struktur Folder
Silakan teman–teman buat folder baru bernama (home) di dalam folder app, lalu buat dua file:
-
app/(home)/dashboard.tsx -
app/(home)/profile.tsx(biarkan kosong dulu, nanti kita isi di artikel berikutnya)
Kode Dashboard
Masukkan kode berikut ke dalam dashboard.tsx.
import { Button } from "@/components/button";
import { useAuth } from "@/hooks/useAuth";
import { router } from "expo-router";
import { StyleSheet, Text, View } from "react-native";
export default function Dashboard() {
// call useAuth hooks
const { user, handleLogout } = useAuth();
return (
<View style={styles.container}>
<Text style={styles.title}>Selamat Datang</Text>
<View style={styles.profileBox}>
<Text style={styles.label}>Nama:</Text>
<Text style={styles.value}>{user?.name}</Text>
<Text style={styles.label}>Email:</Text>
<Text style={styles.value}>{user?.email}</Text>
</View>
<Button
title="Ubah Profile"
variant="dark"
onPress={() => router.push("/(home)/profile")}
/>
<Button title="Keluar" variant="danger" onPress={handleLogout} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 32,
backgroundColor: "#fff",
justifyContent: "center",
},
title: {
fontSize: 28,
fontWeight: "bold",
textAlign: "center",
marginBottom: 32,
},
profileBox: {
backgroundColor: "#f2f2f2",
padding: 16,
borderRadius: 12,
marginBottom: 24,
},
label: {
fontWeight: "bold",
color: "#444",
},
value: {
marginBottom: 12,
color: "#000",
},
});
Penjelasan Kode
Pertama, kita import semua yang dibutuhkan:
import { Button } from "@/components/button";
import { useAuth } from "@/hooks/useAuth";
import { router } from "expo-router";
import { StyleSheet, Text, View } from "react-native";
-
Button: komponen tombol kustom yang mendukung variant (mis.dark,danger). -
useAuth: custom hook dari Auth Context untuk aksesuserdan aksihandleLogout. -
router(expo-router): utilitas navigasi berbasis file routing. -
StyleSheet,Text,View: komponen bawaan React Native untuk membangun UI.
Di dalam React Functional Component Dashboard, kita ambil state dan method dari Auth Context:
// call useAuth hooks
const { user, handleLogout } = useAuth();
-
user: berisi data pengguna yang saat ini login (mis.name,email, dst). -
handleLogout: method untuk menghapus sesi, lalu mengembalikan user ke alur login (akan terpental ke/ (auth)/loginoleh logika Redirect diindex.tsx).
Untuk tombol Ubah Profile, kita arahkan ke screen /(home)/profile menggunakan router.push:
<Button
title="Ubah Profile"
variant="dark"
onPress={() => router.push("/(home)/profile")}
/>
Dan untuk tombol Keluar, kita cukup memanggil handleLogout:
<Button title="Keluar" variant="danger" onPress={handleLogout} />
Memperbarui Root Layout
Setelah Screen Dashboard siap, kita daftarkan rute-nya ke dalam navigator supaya expo-router mengenali halaman-halaman ini. Silakan buka file app/_layout.tsx, lalu pastikan kodenya seperti berikut.
import { AuthProvider } from "@/context/AuthContext";
import { Stack } from "expo-router";
export default function RootLayout() {
return (
<AuthProvider>
<Stack>
<Stack.Screen name='(auth)/login' options={{ headerShown: false }}/>
<Stack.Screen name='(home)/dashboard' options={{ headerShown: false }}/>
</Stack>
</AuthProvider>
)
}
Apa yang berubah?
- Kita menambahkan
Stack.Screenuntuk"(home)/dashboard"dan tetap menyembunyikan header bawaan stack (headerShown: false) agar tampilannya clean.
Screenshoot Hasil
Silakan jalankan aplikasi:
-
Login → setelah login kita akan diarahakn ke halaman Screen Dashboard.
-
Klik tombol Ubah Profile → kita akan diarahkan menuju halaman
/(home)/profileyang masih kosong, sehingga tampilannya seperti ini (wajar, karenaprofile.tsxbelum kita isi apapun).
-
Klik tombol Keluar → kita akan diarahakan kembali ke halaman Login berkat
handleLogout+ redirect awal diindex.tsx.
Artikel Lainnya
Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.