Avatar— komponen foto profil

Komponen Avatar diimpor dari NexaJS bersama View dan StyleSheet. Komponen ini menampilkan gambar lingkar (atau mirip lingkar), dengan opsi ikon aksi di sudut dan penyesuaian ukuran serta gaya tepi.

Alur penggunaan di aplikasi

Pendaftaran route — Modul layar Avatar diekspor sebagai default dan didaftarkan pada array MenuComponents dengan nama route "Avatar" (judul header: "Avatar").
Navigasi — Dari layar lain yang memakai React Navigation (stack/tab sesuai template Anda), panggil navigasi ke route tersebut, misalnya navigation.navigate("Avatar"), dengan syarat nama string sama persis dengan name di entri menu. Gambaran umum route ada di Konfigurasi dan flow route dan menu.js & MenuComponents.
Render — Saat route aktif, navigator me-render komponen root layar (default export); di dalamnya beberapa instance <Avatar /> ditata dalam <View> dengan gaya kontainer (padding, gap, perataan tengah).

Import dan kerangka layar

UI primitif pada layar ini bersumber dari namespace NexaJS; tidak ada import langsung dari react-native untuk komponen yang dipakai di JSX utama.

Import & kerangka layar

import { View, StyleSheet, Avatar } from "NexaJS";

export default function Screen() {
  const userImage = "https://...";
  return (
    <View style={styles.container}>
      <Avatar source={""} size={80} />
    </View>
  );
}

Properti `Avatar` pada layar demo

Tabel berikut merangkum properti yang dipakai pada variasi di halaman ini. Nama dan perilaku mengikuti implementasi NexaJS pada proyek Anda; sesuaikan jika versi framework berbeda.

Properti	Peran
`source`	String URL gambar (contoh memakai foto dari Unsplash).
`size`	Diameter area avatar dalam piksel logis (56, 80, 40, 100, 70 pada contoh).
`icon`	Nama ikon (mis. `edit-2`, `camera`, `plus`) ditampilkan sebagai badge aksi.
`iconColor`	Warna ikon badge.
`iconSize`	Ukuran glyph ikon (contoh: `16` pada avatar kamera).
`iconPadding`	Ruang di sekitar ikon di badge (contoh: `8`).
`iconBottom` / `iconRight`	Offset posisi badge; contoh `plus` menempelkan ikon di pojok kanan bawah.
`onIconPress`	Callback ketika badge ikon ditekan (contoh mem-`console.log`).
`style`	Gaya tambahan pada wadah avatar (contoh: bayangan lewat `StyleSheet`).
`borderWidth` / `borderColor`	Garis tepi avatar (contoh: `1` dan abu-abu terang).

Lima variasi pada layar contoh

Avatar dasar — Hanya source dan size={56}; cocok untuk daftar pengguna atau header minimal.
Ikon edit — icon="edit-2", warna biru iOS, dan onIconPress untuk memicu alur ubah foto (ganti console.log dengan navigasi ke pemilih gambar atau modal).
Ukuran kecil + gaya kustom — size={40} dengan style bayangan (shadow* / elevation) dan border tipis untuk tampilan kartu.
Ikon kamera — Avatar besar (100) dengan ikon hijau; iconSize dan iconPadding mengontrol proporsi badge.
Posisi ikon kustom — icon="plus" dengan iconBottom={0} dan iconRight={0} agar badge menempel pojok; berguna untuk “tambah foto” atau aksi sekunder.

Gaya kontainer

styles.container memakai flex: 1, padding: 20, gap: 20, alignItems: "center", dan latar putih. Jarak antaravatar diatur dengan gap (perilaku tergantung versi React Native di toolchain Anda).

Praktik yang disarankan

Untuk produksi, ganti URL statis dengan URI dari state (unggahan, CDN, atau URL API) dan tangani gagal muat gambar (placeholder atau inisial) sesuai kebijakan desain Anda.
onIconPress sebaiknya memicu alur nyata: buka ImgPicker, izin kamera, atau layar edit profil.
Pertahankan size konsisten dalam satu daftar agar grid tidak “bergetar” secara visual.

Nxdom Framework