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
Belajar Typescript Dasar - #1 - Installasi Typescript
Artikel ini merupakan series dari Belajar Typescript Dasar, disini kita akan belajar melakukan installasi typescript pada komputer kita.
2
Tutorial Inertia Roles & Permissions - #1 - Project Overview
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan bahasa teknologi apa saja yang kita gunakan dan scope dari project yang akan kita bangun.
3
Tutorial Membuat Dynamic Dependent Dropdown Menggunakan Laravel Livewire
Pada artikel kali ini, kita akan belajar membuat sebuah dynamic dependent dropdown atau sebuah dropdown bertingkat menggunakan laravel livewire.
4
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.
5
Tutorial Laravel Livewire - #4 - Membuat Schema Database Dengan Laravel
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah schema database yang nantinya akan kita gunakan pada study case kali ini dan kita akan memanfaatkan model dan migration dari laravel.
6
Tutorial React Native Auth - #4 - Membuat Custom Context Authentikasi React Native
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah custom context authentikasi pada project kita