Tutorial React Native Auth - #7 - Membuat Profile Screen React Native
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah profile screen pada project kita
Pada artikel ini kita akan membuat sebuah screen profile agar user dapat memperbarui nama dan email yang dia miliki.
Membuat Screen Profile
Di halaman Profile, kita akan menampilkan dan mengubah data yang dimiliki oleh user yang sedang login yaitu: nama dan email. Setelah data disimpan, kita perbarui data user di AuthContext lalu kembali ke halaman sebelumnya (Dashboard).
Struktur Folder
Pastikan kamu sudah punya file app/(home)/profile.tsx. Kalau belum, buat dulu di dalam folder (home).
Kode Profile
Masukkan kode berikut ini ke dalam profile.tsx.
import api from "@/api";
import { Button } from "@/components/button";
import { Input } from "@/components/input";
import { useAuth } from "@/hooks/useAuth";
import { router } from "expo-router";
import { useState } from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
export default function Profile() {
// call useAuth hooks
const { user, fetchUser } = useAuth();
// define state name
const [name, setName] = useState(user?.name);
// define state email
const [email, setEmail] = useState(user?.email);
// define method to update profile
const handleUpdateProfile = async () => {
console.log(email, name);
if (!email || !name) {
Alert.alert("Validasi", "Kolom nama dan email harus diisi");
return;
}
try{
await api.put('/profile', { name, email });
// call fetch user from hooks
await fetchUser();
// push to dashboard screen
router.back();
}catch(error: any){
Alert.alert('Gagal', error.response.data.message || 'Terjadi kesalahan');
}
}
return (
<View style={styles.container}>
<Text style={styles.title}>Ubah Profile</Text>
<View>
<Text style={styles.label}>Nama</Text>
<Input
value={name}
onChangeText={setName}
/>
</View>
<View>
<Text style={styles.label}>Email</Text>
<Input
placeholder="email@example.com"
keyboardType="email-address"
autoCapitalize="none"
value={email}
onChangeText={setEmail}
/>
</View>
<Button title="Simpan" onPress={handleUpdateProfile}/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 32,
backgroundColor: "#fff",
},
title: {
fontSize: 32,
fontWeight: "bold",
marginBottom: 32,
textAlign: "center",
},
label : {
marginBottom: 4,
}
});
Daftarkan Route Profile di Root Layout
Terakhir, pastikan /(home)/profile terdaftar di navigator. Buka app/_layout.tsx, lalu tambahkan satu Stack.Screen untuk profile:
tsx
CopyEdit
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.Screen name='(home)/profile' options={{ headerShown: false }}/>
</Stack>
</AuthProvider>
)
}
Penjelasan Kode
Pertama, kita import modul dan komponen yang dibutuhkan:
import api from "@/api";
import { Button } from "@/components/button";
import { Input } from "@/components/input";
import { useAuth } from "@/hooks/useAuth";
import { router } from "expo-router";
import { useState } from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
-
api→ instance HTTP (mis. Axios) untuk berkomunikasi dengan backend. -
Button&Input→ komponen kustom UI kita. -
useAuth→ custom hook dari Auth Context untuk ambiluserdan fungsifetchUser. -
router→ utilitas navigasiexpo-router. -
useState,Alert,StyleSheet,Text,View→ tool dari React/React Native untuk state & UI.
Di dalam komponen Profile, kita ambil user & fetchUser dari AuthContext.
const { user, fetchUser } = useAuth();
-
user→ menyimpan data pengguna yang sedang login (digunakan sebagai nilai awal form). -
fetchUser→ fungsi untuk re-fetch data user terbaru dari server setelah profile diperbarui.
Lalu kita siapkan state untuk form:
const [name, setName] = useState(user?.name);
const [email, setEmail] = useState(user?.email);
-
name&emaillangsung di-prefill dariusersupaya pengguna tinggal mengubah nilai yang diperlukan.
Fungsi handleUpdateProfile melakukan 3 hal utama:
const handleUpdateProfile = async () => {
if (!email || !name) {
Alert.alert("Validasi", "Kolom nama dan email harus diisi");
return;
}
try {
await api.put('/profile', { name, email });
await fetchUser();
router.back();
} catch (error: any) {
Alert.alert('Gagal', error.response?.data?.message || 'Terjadi kesalahan');
}
}
-
Update ke server → kirim
name&emailviaPUT /profile. -
Update AuthContext → panggil
fetchUser()agar datauserdi aplikasi ikut terbarui tanpa perlu restart. -
Navigasi balik →
router.back()mengembalikan pengguna ke halaman sebelumnya (Dashboard).
Bagian UI:
<View style={styles.container}>
<Text style={styles.title}>Ubah Profile</Text>
<View>
<Text style={styles.label}>Nama</Text>
<Input value={name} onChangeText={setName} />
</View>
<View>
<Text style={styles.label}>Email</Text>
<Input
placeholder="email@example.com"
keyboardType="email-address"
autoCapitalize="none"
value={email}
onChangeText={setEmail}
/>
</View>
<Button title="Simpan" onPress={handleUpdateProfile}/>
</View>
- Dua input sederhana: Nama dan Email dengan nilai awal dari
user. - Tombol Simpan memanggil
handleUpdateProfile.
Pada kode di atas
- Kita prefill form menggunakan data
userdari Auth Context. - Kita melakukan validasi ringan (nama & email wajib).
- Kita update profile via
api.put('/profile', { name, email }). - Setelah sukses, kita refresh data
userdenganfetchUser()agar data di seluruh aplikasi langsung sinkron. - Kita navigasi balik dengan
router.back()supaya pengguna kembali ke Dashboard tanpa perlu klik tambahan. - Kita mendaftarkan route
(home)/profilepadaapp/_layout.tsxagar navigasirouter.push/router.backberjalan mulus.
Screenshoot Hasil
-
Tampilan awal profile
-
Validasi form kosong
-
Update Profile sukses (akan diarahkan ke screen dashboard)
Series Artikel
Berikut ini daftar series artikel dari Tutorial Authentication Dengan React Native dan Laravel Sanctum
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan mulai melakukan installasi project react native kita dari awal menggunakan expo.
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat beberapa reusable components yang akan kita gunakan pada project kita.
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah global api yang akan kita gunakan pada project kita.
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah custom context authentikasi pada project kita
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah login screen pada project kita
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah dashboard screen pada project kita
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah profile screen pada project kita
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah register screen pada project kita
Series Lainnya
Beberapa series rekomendasi lainnya untuk menambah pengetahuan.