Tutorial React Native Auth - #8 - Membuat Register Screen React Native
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat sebuah register screen pada project kita
Pada artikel ini kita akan membuat sebuah screen register agar user dapat melakukan registrasi di aplikasi kita.
Membuat Screen Register
Halaman Register kita gunakan untuk membuat akun baru. Setelah data dikirim dan berhasil dibuat, kita bisa langsung login otomatis ke halaman Dashboard.
Struktur Folder
Pastikan file ini berada di: app/(auth)/register.tsx.
Kode Register
Masukkan kode berikut:
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 Register() {
// call useAuth hooks
const { handleRegister } = useAuth();
// define state name
const [name, setName] = useState('');
// define state email
const [email, setEmail] = useState('');
// define state password
const [password, setPassword] = useState('');
// define state loading
const [loading, setLoading] = useState(false);
// define method register
const handleAuth = async () => {
if (!name || !email || !password) {
Alert.alert("Validasi", "Semua kolom harus diisi");
return;
}
try{
setLoading(true);
await handleRegister(name, email, password);
}catch(error: any){
Alert.alert('Register Gagal', error?.response?.data?.message || 'Terjadi kesalahan');
}finally{
setLoading(false);
}
}
return (
<View style={styles.container}>
<Text style={styles.title}>Register</Text>
<View>
<Text style={styles.label}>Nama</Text>
<Input
placeholder="John Doe"
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>
<View>
<Text style={styles.label}>Kata Sandi</Text>
<Input
placeholder="********"
secureTextEntry
value={password}
onChangeText={setPassword}
/>
</View>
<Button title="Kembali" variant="danger" onPress={() => router.back()}/>
<Button title="Simpan" disabled={loading} onPress={handleAuth}/>
</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,
}
});
Penjelasan Kode
Pertama-tama, kita import hal-hal yang diperlukan:
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";
-
Button&Input: komponen UI kustom. -
useAuth: menyediakan methodhandleRegister(name, email, password). -
router: untuk navigasi balik ke halaman sebelumnya. -
useState,Alert,StyleSheet,Text,View: utilitas dari React/React Native.
Di dalam React Functional Component Register, kita ambil handleRegister dari AuthContext.
const { handleRegister } = useAuth();
Lalu kita siapkan state untuk menampung input pengguna
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
- name / email / password → isi dari form pendaftaran.
- loading → mencegah double submit dan bisa dipakai untuk disabled tombol.
Fungsi handleAuth menjalankan proses registrasi
const handleAuth = async () => {
if (!name || !email || !password) {
Alert.alert("Validasi", "Semua kolom harus diisi");
return;
}
try {
setLoading(true);
await handleRegister(name, email, password);
} catch (error: any) {
Alert.alert('Register Gagal', error?.response?.data?.message || 'Terjadi kesalahan');
} finally {
setLoading(false);
}
}
Alurnya:
- Validasi: semua kolom wajib diisi.
-
Proses Register: panggil
handleRegister. - Tangani Error: tampilkan pesan dari server bila ada.
- Matikan Loading: setelah proses selesai.
Bagian UI:
<Button title="Kembali" variant="danger" onPress={() => router.back()}/>
<Button title="Simpan" disabled={loading} onPress={handleAuth}/>
- Kembali: menutup halaman register dan kembali ke halaman sebelumnya (biasanya Login).
- Simpan: kirim data registrasi.
Memperbarui Root Layout
Pastikan rute register, login, dashboard, dan profile sudah terdaftar di _layout.tsx:
tsx
CopyEdit
import { AuthProvider } from "@/context/AuthContext";
import { Stack } from "expo-router";
export default function RootLayout() {
return (
<AuthProvider>
<Stack>
<Stack.Screen name='(auth)/register' options={{ headerShown: false }}/>
<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>
)
}
Dengan ini, navigasi router.back() dari Register → Login akan berjalan mulus, dan alur setelah handleRegister redirect ke dashboard juga aman karena rute sudah dikenal navigator.
Pada kode di atas
- Kita membuat form register sederhana: Nama, Email, Kata Sandi.
- Kita menambahkan validasi ringan dan loading state.
- Kita memanggil
handleRegisterdari Auth Context untuk membuat akun. - Kita siapkan tombol Kembali (ke halaman sebelumnya) dan Simpan (kirim data).
- Kita daftarkan rute yang dibutuhkan di
_layout.tsx.
Screenshoot Hasil
-
Tampilan awal register
-
Validasi form kosong
-
Register sukses (akan diarahkan ke screen dashboard)
Penutup
Pada artikel kali ini kita telah berhasil menyelesaikan pembuatan screen register, dan ini merupakan artikel terakhir dari series Tutorial Authentication Dengan React Native dan Laravel Sanctum, saya ucapkan banyak terimakasih kepada teman - teman yang sudah mengikuti seri ini dari awal sampai akhir, jika ada pertanyaan bisa langsung ke telegram saya Rafi Taufiqurrahman, dan jika ada salah kata maupun ada kekurangan mohon dimaklumi, nantikan seri - seri selanjutnya dari saya, semoga bermanfaat terimakasih : )
Source Code
Untuk source code teman - teman bisa dapatkan di github saya : expo-react-native-auth
Artikel Lainnya
Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.