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
Rafi Taufiqurrahman
Dipublish 09/08/2025
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.
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:
profile.tsx
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:
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";
-
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.
profile.tsx
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:
profile.tsx
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:
profile.tsx
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:
profile.tsx
<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)
Artikel Lainnya
Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.
1
Tutorial Inertia Roles & Permissions - #8 - Membuat Reusable Component Dengan React
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan belajar membuat sebuah reusable component menggunakan react.
2
Tutorial Laravel Rest API - #2 - Installasi Laravel Sanctum
Artikel ini merupakan series dari Tutorial Authentication Dengan Laravel Sanctum dan Unit Testing, disini kita akan mulai melakukan installasi laravel sanctum dan implementasi api token pada model user.
3
Tutorial Laravel Livewire - #2 - Installasi Project Laravel
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan mulai melakukan installasi project laravel kita dari awal menggunakan composer.
4
Tutorial Inertia Roles & Permissions - #7 - Membuat Share Data Global Inertia
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan belajar membuat sebuah data yang dapat diakses di semua halaman menggunakan inertia.
5
Tutorial Laravel Livewire - #3 - Installasi Laravel Breeze & Livewire
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan melakukan installasi laravel breeze dan livewire sebagai starter-kit kita.
6
Tutorial Laravel Rest API - #5 - Membuat Module Profile
Artikel ini merupakan series dari Tutorial Authentication Dengan Laravel Sanctum dan Unit Testing, disini kita belajar membuat module profile selain membuat rest api kita juga menuliskan sebuah unit test untuk module tersebut.