LaravelSanctumRest APIReact Native

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
Rafi Taufiqurrahman
Dipublikasikan 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 ambil user dan fungsi fetchUser.
  • router → utilitas navigasi expo-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 & email langsung di-prefill dari user supaya 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');
  }
}
  1. Update ke server → kirim name & email via PUT /profile.
  2. Update AuthContext → panggil fetchUser() agar data user di aplikasi ikut terbarui tanpa perlu restart.
  3. 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 user dari Auth Context.
  • Kita melakukan validasi ringan (nama & email wajib).
  • Kita update profile via api.put('/profile', { name, email }).
  • Setelah sukses, kita refresh data user dengan fetchUser() 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)/profile pada app/_layout.tsx agar navigasi router.push/router.back berjalan mulus.

Screenshoot Hasil

  1. Tampilan awal profileprofile-screen

  2. Validasi form kosongvalidation

  3. Update Profile sukses (akan diarahkan ke screen dashboard)

    validation