From — formulir Input dasar

Materi ini merangkum modul form di assets/modules/Form: Input, SelectList, Switch, RichTextEditor, dan helper validasi/media dari Validasi.js.

Alur penggunaan di aplikasi

Pendaftaran route — Default export (komponen layar beranda formulir) terdaftar sebagai "From" di MenuComponents (judul: "From").
Navigasi — navigation.navigate("From"). Tombol “Componen Validasi” memanggil navigation.navigate("Validasi") — pastikan route tersebut ada di navigator yang sama. Konfigurasi route · MenuComponents.
Render — SafeAreaView → ScrollView → dua section: field input dan aksi tombol.

Cuplikan cepat

State + Input

import {
  SafeAreaView, ScrollView, View, Text, StyleSheet,
  useState, Input, Buttons,
} from "NexaJS";

export default function Screen({ navigation }) {
  const [formData, setFormData] = useState({ username: "", email: "", password: "" });
  const [errors] = useState({ username: "", email: "", password: "" });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView>
        <Input
          label="Username"
          type="Text"
          Material="account"
          placeholder="Enter your username"
          value={formData.username}
          onChangeText={(t) => setFormData({ ...formData, username: t })}
          errors={errors.username}
          backgroundColor="#f5f5f5"
        />
        <Buttons label="Kirim" onPress={() => {}} background="#007AFF" txColor="#FFF" border={10} vertical={8} />
      </ScrollView>
    </SafeAreaView>
  );
}

Input: tipe field & properti penting

type mendukung Text, Email, Password, Date, document.
Date otomatis format ke DD-MM-YYYY saat mengetik.
Password punya toggle show/hide bawaan (ikon mata).
document mendukung tombol pilih dokumen lewat onSelectDocument dan selectedFile.
Ikon field: Material, Feather, Ion, atau iconName.
value / onChangeText terikat ke formData.
errors menampilkan pesan error langsung di bawah field.

Validasi: helper & hook

File Validasi.js menyediakan validator siap pakai untuk text, email, telepon, dokumen, dan video.

useFormValidation

import { useFormValidation } from "NexaJS";

const { values, errors, isValid, handleChange, handleBlur, resetForm } =
  useFormValidation(
    { email: "", phone: "" },
    {
      email: { type: "email", placeholder: "Email", length: [5, 120] },
      phone: { type: "tel", placeholder: "Nomor HP", length: [8, 13] },
    }
  );

<Input
  label="Email"
  type="Email"
  value={values.email}
  onChangeText={(v) => handleChange("email", v)}
  onBlur={() => handleBlur("email")}
  errors={errors.email}
/>

Media helper dari Validasi.js

pickImage(), pickMultipleImages(), pickCamera().
pickDocument(), pickMultipleDocuments().
pickVideo(), recordVideo().
validateDocument(), validateVideo(), parseFileSize(), formatFileSize().

SelectList (dropdown)

Contoh SelectList

import { SelectList, useState } from "NexaJS";

const [selectedRole, setSelectedRole] = useState("");
const roleData = [
  { key: "1", value: "Admin" },
  { key: "2", value: "Editor" },
];

<SelectList
  label="Role"
  data={roleData}
  setSelected={setSelectedRole}
  save="value"
  placeholder="Pilih role"
  searchPlaceholder="Cari role..."
/>

Switch (toggle)

Contoh Switch

import { Switch, useState } from "NexaJS";

const [enabled, setEnabled] = useState(false);

<Switch
  value={enabled}
  onValueChange={setEnabled}
  color="#24bca9"
  disabled={false}
/>

RichTextEditor

Komponen ini memakai react-native-pell-rich-editor dengan toolbar bawaan (bold, italic, underline, align, list, heading, blockquote, undo/redo).

Contoh RichTextEditor

import { RichTextEditor } from "NexaJS";

<RichTextEditor
  value="<p>Konten awal</p>"
  placeholder="Mulai menulis di sini..."
  onChangeText={(html) => console.log(html)}
/>

Praktik yang disarankan

Satukan state form di satu objek (values/formData) agar submit lebih mudah.
Tandai field sebagai touched sebelum menampilkan error untuk UX yang lebih halus.
Gunakan validator tipe-spesifik (email, tel, document, video) sesuai field.
Pisahkan komponen field kompleks (document/media) agar form utama tetap ringkas.
Gunakan Buttons dan Validasi secara konsisten.

Nxdom Framework