orn-ui 0.2.9 → 0.3.0

package/src/organisms/DateField.tsx

@@ -5,10 +5,13 @@ import { useAllowFontScaling, useColors, useLabels } from '../theme/UIProvider';
 import { Modal } from './Modal';
 import { DatePicker, type DatePickerProps, type DateRange } from './DatePicker';
 import { Button } from '../atoms/Button';
+import { Icon } from '../icons/Icon';
 
 export interface DateFieldProps
   extends Pick<DatePickerProps, 'minDate' | 'maxDate' | 'monthNames' | 'weekdayNames' | 'firstDayOfWeek'> {
+  /** Text above the field; also its accessible name. */
   label?: string;
+  /** Shows an asterisk and says "required" to screen readers. @default false */
   required?: boolean;
   /**
    * 'single' picks one date; 'range' picks an interval with two taps.
@@ -23,8 +26,11 @@ export interface DateFieldProps
   range?: DateRange;
   /** Called in mode="range", both when setting the start and when closing the range. */
   onRangeChange?: (range: DateRange) => void;
+  /** Text while empty. @default labels.selectDate */
   placeholder?: string;
+  /** Error under the field (red border); announced to screen readers. */
   error?: string;
+  /** Dims the field and ignores taps. @default false */
   disabled?: boolean;
   /** Formats the date in the field. @default "Month D, YYYY" */
   format?: (date: Date) => string;
@@ -37,6 +43,7 @@ export interface DateFieldProps
   onClear?: () => void;
   /** Text for that button. @default the `clear` from `useLabels()` */
   clearLabel?: string;
+  /** Style of the outer wrapper (label, field and error). */
   containerStyle?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -45,6 +52,13 @@ function defaultFormat(date: Date, monthNames: string[]): string {
   return `${monthNames[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
 }
 
+const DISABLED_OPACITY = 0.5;
+const PRESSED_OPACITY = 0.7;
+/** Same box as Input, so a form reads as one column of identical fields. */
+const FIELD_MIN_HEIGHT = 50;
+const FIELD_BORDER = 2;
+const CHEVRON_SIZE = 20;
+
 const useStyles = createStyles((theme) => ({
   container: { marginBottom: theme.tokens.spacing.lg, width: '100%', gap: theme.tokens.spacing.sm },
   label: { fontSize: theme.tokens.fontSize.md, fontWeight: theme.tokens.fontWeight.medium, color: theme.colors.text },
@@ -55,12 +69,13 @@ const useStyles = createStyles((theme) => ({
     justifyContent: 'space-between',
     backgroundColor: theme.colors.inputBackground,
     borderRadius: theme.tokens.radius.lg,
-    borderWidth: 2,
+    borderWidth: FIELD_BORDER,
     borderColor: theme.colors.border,
-    minHeight: 50,
+    minHeight: FIELD_MIN_HEIGHT,
     paddingHorizontal: theme.tokens.spacing.lg,
   },
   fieldError: { borderColor: theme.colors.error },
+  fieldDisabled: { opacity: DISABLED_OPACITY },
   fieldText: { fontSize: theme.tokens.fontSize.lg, color: theme.colors.text },
   placeholder: { color: theme.colors.textLight },
   errorText: { fontSize: theme.tokens.fontSize.sm, color: theme.colors.errorText },
@@ -68,9 +83,17 @@ const useStyles = createStyles((theme) => ({
 
 /**
  * DateField
- * Campo de fecha: se ve como un Input, abre un `DatePicker` en un Modal al
- * tocarlo. Sin picker nativo del sistema, así que se ve y se comporta igual
- * en iOS y Android.
+ * Date field: looks like an Input, opens a `DatePicker` in a Modal when
+ * tapped. No native system picker, so it looks and behaves the same on iOS
+ * and Android.
+ *
+ * Gestalt, similarity (and Jakob's law): same box, border, height and label
+ * as Input, and the same chevron as Select, so in a form it reads as one more
+ * field; only the chevron says it opens something. Proximity: label, field
+ * and error stack tight, as one unit.
+ *
+ * Accessibility: the name includes the label, "required" and the chosen date;
+ * the error is a hint; `expanded` tells whether the calendar is open.
  */
 export const DateField = memo(
   ({
@@ -81,7 +104,7 @@ export const DateField = memo(
     onChange,
     range,
     onRangeChange,
-    placeholder = 'Select a date',
+    placeholder,
     error,
     disabled = false,
     format,
@@ -100,12 +123,13 @@ export const DateField = memo(
     const [open, setOpen] = useState(false);
 
     const months = monthNames ?? labels.months;
+    const emptyText = placeholder ?? labels.selectDate;
     const isRange = mode === 'range';
 
     const formatDate = (date: Date) => (format ? format(date) : defaultFormat(date, months));
 
-    // El calendario se cierra solo cuando ya no falta nada por elegir: en
-    // rango, recién cuando el segundo toque cierra el intervalo.
+    // The calendar closes on its own only once there is nothing left to pick:
+    // in range mode, only when the second tap closes the interval.
     const handleChange = useCallback(
       (date: Date) => {
         onChange?.(date);
@@ -128,7 +152,7 @@ export const DateField = memo(
     }, [onClear]);
 
     const hasValue = isRange ? !!range?.start : !!value;
-    let display = placeholder;
+    let display = emptyText;
     if (isRange && range?.start) {
       display = range.end ? `${formatDate(range.start)} — ${formatDate(range.end)}` : formatDate(range.start);
     } else if (!isRange && value) {
@@ -145,20 +169,21 @@ export const DateField = memo(
         )}
 
         <TouchableOpacity
-          style={[styles.field, !!error && styles.fieldError, disabled && { opacity: 0.5 }]}
+          style={[styles.field, !!error && styles.fieldError, disabled && styles.fieldDisabled]}
           onPress={() => setOpen(true)}
           disabled={disabled}
-          activeOpacity={0.7}
+          activeOpacity={PRESSED_OPACITY}
           accessibilityRole="button"
-          accessibilityLabel={hasValue ? `${label ?? placeholder}, ${display}` : (label ?? placeholder)}
+          accessibilityLabel={[label ?? emptyText, required ? labels.required : null, hasValue ? display : null]
+            .filter(Boolean)
+            .join(', ')}
+          accessibilityHint={error || undefined}
           accessibilityState={{ disabled, expanded: open }}
         >
           <Text allowFontScaling={allowFontScaling} style={[styles.fieldText, !hasValue && styles.placeholder]}>
             {display}
           </Text>
-          <Text allowFontScaling={allowFontScaling} style={{ color: colors.textLight }}>
-            {'▾'}
-          </Text>
+          <Icon name="chevron-down" size={CHEVRON_SIZE} color={colors.textLight} />
         </TouchableOpacity>
 
         {!!error && (

package/src/organisms/DatePicker.tsx

@@ -9,12 +9,12 @@ export const DEFAULT_MONTH_NAMES = [
   'July', 'August', 'September', 'October', 'November', 'December',
 ];
 
-/** Índice 0 = domingo, para alinear con Date.getDay(). */
+/** Index 0 = Sunday, to line up with Date.getDay(). */
 export const DEFAULT_WEEKDAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
 export interface DateRange {
   start: Date;
-  /** Falta mientras el rango está a medio elegir (sólo se tocó el inicio). */
+  /** Missing while the range is half-picked (only the start was tapped). */
   end?: Date;
 }
 
@@ -32,7 +32,9 @@ export interface DatePickerProps {
   range?: DateRange;
   /** Called in mode="range", both when setting the start and when closing the range. */
   onRangeChange?: (range: DateRange) => void;
+  /** Earliest selectable day; earlier days are dimmed and the back arrow stops there. */
   minDate?: Date;
+  /** Latest selectable day; later days are dimmed and the forward arrow stops there. */
   maxDate?: Date;
   /** Month shown on open if there's no `value`. @default today */
   defaultMonth?: Date;
@@ -52,7 +54,7 @@ function startOfDay(d: Date): Date {
   return new Date(d.getFullYear(), d.getMonth(), d.getDate());
 }
 
-/** Timestamp del día, para comparar sin volver a crear Date en cada celda. */
+/** The day's timestamp, to compare without creating a Date again in each cell. */
 function dayTime(d: Date): number {
   return startOfDay(d).getTime();
 }
@@ -61,21 +63,21 @@ function dayTimeOf(d: Date | undefined): number | undefined {
   return d ? dayTime(d) : undefined;
 }
 
-/** Milisegundos que faltan para la próxima medianoche local. */
+/** Milliseconds left until the next local midnight. */
 function msUntilNextMidnight(from: Date): number {
   const next = new Date(from.getFullYear(), from.getMonth(), from.getDate() + 1);
   return next.getTime() - from.getTime();
 }
 
-/** Número de mes absoluto (año * 12 + mes), para comparar meses con un `<`. */
+/** Absolute month number (year * 12 + month), to compare months with a `<`. */
 function monthIndex(d: Date): number {
   return d.getFullYear() * 12 + d.getMonth();
 }
 
 /**
- * Devuelve la grilla del mes: 6 filas de 7 celdas. Las celdas fuera del mes
- * son null, así el layout no salta de alto entre meses (un mes puede
- * necesitar 4, 5 o 6 filas según en qué día caiga el 1).
+ * Returns the month grid: 6 rows of 7 cells. Cells outside the month are
+ * null, so the layout doesn't jump in height between months (a month can
+ * need 4, 5 or 6 rows depending on which day the 1st falls on).
  */
 export function buildMonthGrid(year: number, month: number, firstDayOfWeek: 0 | 1): (Date | null)[][] {
   const first = new Date(year, month, 1);
@@ -92,9 +94,16 @@ export function buildMonthGrid(year: number, month: number, firstDayOfWeek: 0 |
   return rows;
 }
 
+/** Drawn size of a day; hitSlop takes the touch target to 44pt (Fitts). */
+const DAY_SIZE = 36;
+const MIN_TOUCH = 44;
+const DAY_HIT_SLOP = (MIN_TOUCH - DAY_SIZE) / 2;
+const DAY_HIT = { top: DAY_HIT_SLOP, bottom: DAY_HIT_SLOP, left: DAY_HIT_SLOP, right: DAY_HIT_SLOP };
+
 const useStyles = createStyles((theme) => ({
   container: {
-    backgroundColor: theme.colors.surface,
+    // Raised, like Card: in dark the calendar reads as a panel, not only as a border.
+    backgroundColor: theme.colors.surfaceRaised,
     borderRadius: theme.tokens.radius.lg,
     borderWidth: 1,
     borderColor: theme.colors.border,
@@ -113,12 +122,12 @@ const useStyles = createStyles((theme) => ({
   },
   row: { flexDirection: 'row' },
   cell: { flex: 1, aspectRatio: 1, alignItems: 'center', justifyContent: 'center' },
-  dayButton: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
+  dayButton: { width: DAY_SIZE, height: DAY_SIZE, borderRadius: DAY_SIZE / 2, alignItems: 'center', justifyContent: 'center' },
   dayText: { fontSize: theme.tokens.fontSize.md, color: theme.colors.text },
   daySelected: { backgroundColor: theme.colors.primary },
   dayTextSelected: { color: theme.colors.onPrimary, fontWeight: theme.tokens.fontWeight.bold },
-  // El resaltado del tramo intermedio va en la celda (cuadrada, sin gaps) y
-  // no en el botón redondo, así la barra del rango se ve continua.
+  // The highlight of the in-between stretch goes on the cell (square, no gaps)
+  // and not on the round button, so the range bar looks continuous.
   cellInRange: { backgroundColor: theme.colors.primarySoft },
   cellRangeStart: { borderTopLeftRadius: 18, borderBottomLeftRadius: 18 },
   cellRangeEnd: { borderTopRightRadius: 18, borderBottomRightRadius: 18 },
@@ -144,8 +153,8 @@ interface DayCellProps {
 }
 
 /**
- * Una celda del calendario. Va memoizada aparte porque el mes entero son 42
- * celdas: sin esto, cualquier render del padre reconcilia las 42.
+ * A calendar cell. It is memoized separately because the whole month is 42
+ * cells: without this, any parent render reconciles all 42.
  */
 const DayCell = memo(
   ({
@@ -173,7 +182,8 @@ const DayCell = memo(
         style={[styles.dayButton, selected && styles.daySelected, !selected && isToday && styles.dayToday]}
         onPress={() => onPress(day)}
         disabled={disabled}
-        activeOpacity={0.7}
+        activeOpacity={PRESSED_OPACITY}
+        hitSlop={DAY_HIT}
         accessibilityRole="button"
         accessibilityLabel={label}
         accessibilityState={{ selected, disabled }}
@@ -197,10 +207,21 @@ DayCell.displayName = 'DayCell';
 
 /**
  * DatePicker
- * Calendario mensual dibujado con View/Text puros — sin
- * @react-native-community/datetimepicker ni ningún picker nativo, para
- * mantener la librería en cero dependencias y verse igual en iOS y Android.
+ * Monthly calendar drawn with plain View/Text — without
+ * @react-native-community/datetimepicker or any native picker, to keep the
+ * library at zero dependencies and look the same on iOS and Android.
+ *
+ * Gestalt, common region and alignment: 6 rows of 7 cells always (the grid
+ * never jumps between months), weekdays aligned over their column. Similarity:
+ * every day is the same circle; state changes only fill and color (selected
+ * filled, today outlined, out of range dimmed). Continuity: a range is one
+ * band from start to end, not separate dots. Fitts: each day reaches a 44pt touch target (36pt circle + hitSlop).
+ *
+ * Accessibility: the month is a header, each day reads its full date, and the
+ * arrows' names come from `labels` (`previousMonth`, `nextMonth`).
  */
+const PRESSED_OPACITY = 0.7;
+
 export const DatePicker = memo(
   ({
     mode = 'single',
@@ -232,8 +253,8 @@ export const DatePicker = memo(
           onChange?.(day);
           return;
         }
-        // Primer toque (o rango ya cerrado, o toque antes del inicio): arranca
-        // un rango nuevo. Segundo toque en adelante: lo cierra.
+        // First tap (or range already closed, or a tap before the start): starts
+        // a new range. Second tap onward: closes it.
         if (!range?.start || range.end || dayTime(day) < dayTime(range.start)) {
           onRangeChange?.({ start: day });
         } else {
@@ -248,8 +269,8 @@ export const DatePicker = memo(
       () => new Date((anchor ?? new Date()).getFullYear(), (anchor ?? new Date()).getMonth(), 1)
     );
 
-    // La fecha elegida puede cambiar desde afuera (uso controlado): sin esto,
-    // el calendario se quedaba clavado en el mes con el que montó.
+    // The selected date can change from outside (controlled use): without this,
+    // the calendar stayed stuck on the month it mounted with.
     const anchorMonth = anchor ? monthIndex(anchor) : undefined;
     const lastAnchorMonth = useRef(anchorMonth);
     useEffect(() => {
@@ -258,8 +279,8 @@ export const DatePicker = memo(
       setVisibleMonth(new Date(Math.floor(anchorMonth / 12), anchorMonth % 12, 1));
     }, [anchorMonth]);
 
-    // "Hoy" se recalcula en la próxima medianoche: una app que queda abierta
-    // toda la noche marcaba el día anterior.
+    // "Today" is recalculated at the next midnight: an app left open all
+    // night marked the previous day.
     const [todayTs, setTodayTs] = useState(() => dayTime(new Date()));
     useEffect(() => {
       const timer = setTimeout(() => setTodayTs(dayTime(new Date())), msUntilNextMidnight(new Date()));
@@ -276,8 +297,8 @@ export const DatePicker = memo(
       [weekdays, firstDayOfWeek]
     );
 
-    // Los límites se resuelven una vez y no 42 veces por render: comparar
-    // timestamps sale gratis, crear un Date por celda no.
+    // The limits are resolved once and not 42 times per render: comparing
+    // timestamps is free, creating a Date per cell isn't.
     const bounds = useMemo(
       () => ({
         min: dayTimeOf(minDate),
@@ -296,8 +317,8 @@ export const DatePicker = memo(
         return next;
       });
 
-    // Un mes entero fuera de los límites no tiene nada que elegir: la flecha
-    // que lleva ahí se apaga en vez de dejar navegar al vacío.
+    // A month entirely outside the limits has nothing to pick: the arrow
+    // leading there turns off instead of letting you navigate into the void.
     const visibleIndex = monthIndex(visibleMonth);
     const canGoBack = !minDate || visibleIndex > monthIndex(minDate);
     const canGoForward = !maxDate || visibleIndex < monthIndex(maxDate);
@@ -309,7 +330,7 @@ export const DatePicker = memo(
         <View style={styles.header}>
           <IconButton
             iconName="chevron-left"
-            accessibilityLabel="Previous month"
+            accessibilityLabel={labels.previousMonth}
             disabled={!canGoBack}
             onPress={() => shiftMonth(-1)}
           />
@@ -318,7 +339,7 @@ export const DatePicker = memo(
           </Text>
           <IconButton
             iconName="chevron-right"
-            accessibilityLabel="Next month"
+            accessibilityLabel={labels.nextMonth}
             disabled={!canGoForward}
             onPress={() => shiftMonth(1)}
           />
@@ -351,8 +372,8 @@ export const DatePicker = memo(
                   day={day}
                   label={`${months[day.getMonth()]} ${day.getDate()}, ${day.getFullYear()}`}
                   selected={selected}
-                  // Un día fuera de los límites no se pinta como parte del
-                  // rango: se ve deshabilitado, y eso es lo que es.
+                  // A day outside the limits isn't painted as part of the
+                  // range: it looks disabled, and that is what it is.
                   inRange={between && !disabled}
                   isRangeStart={!!closed && isStart && !disabled}
                   isRangeEnd={isEnd && !disabled}

package/src/organisms/List.tsx

@@ -8,18 +8,24 @@ import { Spinner } from '../atoms/Spinner';
 import type { IconName } from '../icons/types';
 
 export interface ListProps<T> {
+  /** Items to render. */
   data: T[];
+  /** Stable key per item. */
   keyExtractor: (item: T, index: number) => string;
+  /** Renders each row (same as FlatList's `renderItem`). */
   renderItem: FlatListProps<T>['renderItem'];
 
   /** Initial load: while true and there's no data, placeholders are shown. */
   isLoading: boolean;
   /** Reload with data already on screen (pull-to-refresh). @default false */
   isRefreshing?: boolean;
+  /** Shows a spinner in the footer while the next page loads. @default false */
   isLoadingMore?: boolean;
   /** Controlled by the consumer: while false, a fullscreen spinner is shown. @default true */
   isReady?: boolean;
+  /** Text of the fullscreen spinner shown while `isReady` is false. @default labels.loading */
   loadingText?: string;
+  /** Text of the footer spinner shown with `isLoadingMore`. @default labels.loadingMore */
   loadingMoreText?: string;
 
   /** Ghost rows for the initial load. @default 6 */
@@ -27,22 +33,33 @@ export interface ListProps<T> {
   /** Custom placeholder, to match the real shape of the item. */
   renderSkeletonItem?: () => React.ReactElement;
 
+  /** Called when scrolling gets close to the end (to load the next page). */
   onEndReached?: () => void;
+  /** How close to the end `onEndReached` fires, in visible lengths of the list. @default 0.3 */
   onEndReachedThreshold?: number;
+  /** Enables pull-to-refresh and is called when the user pulls. */
   onRefresh?: () => void;
 
+  /** Title of the empty state. @default labels.noResultsTitle */
   emptyTitle?: string;
+  /** Supporting line of the empty state. @default labels.noResultsDescription */
   emptyDescription?: string;
+  /** Icon of the empty state. @default 'search' */
   emptyIconName?: IconName;
 
+  /** Rendered above the items, inside the scroll. */
   ListHeaderComponent?: FlatListProps<T>['ListHeaderComponent'];
+  /** Rendered below the items, before the pagination loader. */
   ListFooterComponent?: FlatListProps<T>['ListFooterComponent'];
 
+  /** Style of the list's content container (also used by the skeleton). */
   contentContainerStyle?: ViewStyle;
+  /** Style of the outer wrapper. */
   containerStyle?: ViewStyle;
 
   /** List component to use (FlashList, etc). @default FlatList */
   ListComponent?: React.ComponentType<any>;
+  /** Extra props passed to `ListComponent`; they override the ones set here. */
   listProps?: Record<string, unknown>;
 }
 
@@ -56,14 +73,33 @@ const useStyles = createStyles((theme) => ({
     gap: theme.tokens.spacing.md,
     padding: theme.tokens.spacing.md,
   },
-  skeletonText: { flex: 1, gap: theme.tokens.spacing.sm },
+  skeletonText: { flex: 1 },
+  empty: { marginTop: theme.tokens.spacing.xxxl },
 }));
 
+/** Same as Avatar's default size: the placeholder row matches a typical avatar row. */
+const SKELETON_AVATAR = 44;
+
+function renderHeader(Header: ListProps<unknown>['ListHeaderComponent']) {
+  if (!Header) return null;
+  return typeof Header === 'function' ? <Header /> : (Header as React.ReactElement);
+}
+
 /**
  * List
- * Lista con estados de carga/paginación/vacío resueltos, sin atarse a
- * expo-router ni a FlashList: `ListComponent` permite inyectar cualquiera
- * (por defecto FlatList del propio React Native).
+ * List with loading/pagination/empty states handled, without being tied to
+ * expo-router or FlashList: `ListComponent` lets you inject any of them
+ * (React Native's own FlatList by default).
+ *
+ * Design:
+ * - Continuity (Gestalt): the first load shows placeholders shaped like the
+ *   rows and keeps `ListHeaderComponent` in place, so nothing jumps when the
+ *   data arrives.
+ * - Doherty threshold: every wait has immediate feedback (placeholders,
+ *   pull-to-refresh spinner, footer loader while paging), and "no results"
+ *   only appears once it is known there is nothing.
+ * - Jakob's law: the native pull-to-refresh and infinite scroll people
+ *   already know from other apps.
  */
 export function List<T>({
   data,
@@ -98,8 +134,8 @@ export function List<T>({
 
   const isInitialLoading = isLoading && data.length === 0;
 
-  // El footer propio y el loader de paginación conviven: antes el primero
-  // tapaba al segundo y la lista dejaba de avisar que estaba trayendo más.
+  // The custom footer and the pagination loader coexist: previously the first
+  // covered the second and the list stopped signaling it was fetching more.
   const renderFooter = useCallback(() => {
     const custom =
       typeof ListFooterComponent === 'function' ? (
@@ -120,16 +156,16 @@ export function List<T>({
     );
   }, [isLoadingMore, resolvedLoadingMoreText, ListFooterComponent, styles.footerLoader]);
 
-  // Vacío sólo cuando ya se sabe que no hay nada: durante la carga inicial se
-  // muestran placeholders, no "sin resultados".
+  // Empty only once it is known there is nothing: during the initial load
+  // placeholders are shown, not "no results".
   const renderEmpty = useCallback(() => {
     if (isLoading || isRefreshing) return null;
-    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={{ marginTop: 50 }} />;
-  }, [isLoading, isRefreshing, emptyTitle, emptyDescription, emptyIconName]);
+    return <EmptyState title={emptyTitle} description={emptyDescription} iconName={emptyIconName} style={styles.empty} />;
+  }, [isLoading, isRefreshing, emptyTitle, emptyDescription, emptyIconName, styles.empty]);
 
   if (!isReady) {
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, containerStyle]}>
         <Spinner text={resolvedLoadingText} />
       </View>
     );
@@ -137,22 +173,35 @@ export function List<T>({
 
   if (isInitialLoading) {
     return (
-      <View style={[styles.container, containerStyle]} testID="list-skeleton">
+      <View style={[styles.container, containerStyle]}>
         <View style={[styles.listContent, contentContainerStyle]}>
+        {/* Same padding as the loaded list, and outside the group below so it
+            stays reachable (a search field above the list, say). */}
+        {renderHeader(ListHeaderComponent as ListProps<unknown>['ListHeaderComponent'])}
+        <View
+          testID="list-skeleton"
+          // The placeholders themselves are hidden from screen readers: the
+          // group announces that the list is loading instead of silence.
+          accessible
+          accessibilityRole="progressbar"
+          accessibilityLabel={resolvedLoadingText}
+          accessibilityState={{ busy: true }}
+        >
           {Array.from({ length: skeletonCount }, (_, i) => (
             <React.Fragment key={i}>
               {renderSkeletonItem?.() ?? (
                 <View style={styles.skeletonRow}>
-                  <Skeleton variant="circle" width={40} />
+                  <Skeleton variant="circle" width={SKELETON_AVATAR} />
                   <View style={styles.skeletonText}>
-                    <Skeleton width="60%" height={14} />
-                    <Skeleton width="35%" height={12} />
+                    <Skeleton variant="text" width="60%" />
+                    <Skeleton variant="text" width="35%" />
                   </View>
                 </View>
               )}
             </React.Fragment>
           ))}
         </View>
+        </View>
       </View>
     );
   }