Validasi — formulir + berkas + video

Hook useFormValidation dari NexaJS mengelola nilai, error, isValid, handleChange, handleBlur, dan resetForm. Layar demo menggabungkan input teks, unggah foto (galeri/kamera), dokumen PDF/gambar, dan video dengan aturan panjang, tipe MIME, ukuran, dan durasi — plus pratinjau gambar/video memakai komponen dari react-native dan expo-video.

Alur penggunaan di aplikasi

Pendaftaran route — "Validasi" di MenuComponents (judul: "From Validasi").
Navigasi — navigation.navigate("Validasi") atau dari tombol di layar From. MenuComponents.
Render — ScrollView berisi Input terikat values / errors, tombol Buttons memicu pickImage, pickCamera, pickDocument, pickVideo, recordVideo, lalu submit/reset.

Cuplikan cepat

useFormValidation

import { Input, useFormValidation, Buttons } from "NexaJS";

const { values, errors, isValid, handleChange, handleBlur, resetForm } =
  useFormValidation(
    { nama: "", email: "" },
    {
      nama: { type: "text", length: [3, 50], placeholder: "Nama" },
      email: { type: "email", length: [5, 100], placeholder: "Email" },
    }
  );

<Input
  label="Nama"
  value={values.nama}
  onChangeText={(t) => handleChange("nama", t)}
  onBlur={() => handleBlur("nama")}
  errors={errors.nama}
/>

Intisari aturan pada demo

Teks: type text / email / tel dengan length min–max. Berkas: file, document (allowedTypes, maxSize), video (maxDuration, maxSize), required bila perlu.

Helper picker (NexaJS)

pickImage, pickCamera, pickDocument, pickVideo, recordVideo — hasil dipasangkan ke handleChange("field", result). Validasi tambahan (ukuran, MIME, durasi) dilakukan di handler sebelum mengubah state. formatFileSize memformat tampilan ukuran berkas.

Praktik yang disarankan

Selaraskan batas ukuran/durasi antara handler manual dan aturan useFormValidation.
Pastikan izin kamera/galeri/mikrofon sesuai platform sebelum memanggil picker.
Ganti Alert / console.log dengan UX produksi (toast, inline error).