jfs-components 0.0.73 → 0.0.77

package/lib/module/components/FormField/FormField.js

@@ -1,223 +1,373 @@
 "use strict";
 
-import React, { useState, useMemo, useCallback } from 'react';
-import { View, Text } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, Text, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import TextInput from '../TextInput/TextInput';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import SupportText from '../SupportText/SupportText';
+import Icon from '../../icons/Icon';
+import { useFormContext } from '../Form/Form';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function useFormField(props) {
-  const {
-    type = 'text',
-    isDisabled = false,
-    isInvalid = false,
-    supportText,
-    errorMessage,
-    modes: propModes = EMPTY_MODES,
-    onFocus,
-    onBlur
-  } = props;
-  const {
-    modes: globalModes
-  } = useTokens();
-  const baseModes = useMemo(() => ({
-    ...globalModes,
-    ...propModes
-  }), [globalModes, propModes]);
-  const [isFocused, setIsFocused] = useState(false);
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
 
-  // Merge FormField States collection based on focus
-  const modes = useMemo(() => ({
-    ...baseModes,
-    'FormField States': isFocused ? 'Active' : 'Idle'
-  }), [baseModes, isFocused]);
-
-  // -- Label tokens (from "FormField / Output" collection) --
-  const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
-  const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
-  const labelFontSize = parseInt(getVariableByName('formField/label/fontSize', modes), 10) || 14;
-  const labelLineHeight = parseInt(getVariableByName('formField/label/lineHeight', modes), 10) || 17;
-  const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
-  const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8;
-
-  // -- Input tokens (from "FormField / Output" + "FormField States" collections) --
-  const inputPaddingH = parseInt(getVariableByName('formField/input/padding/horizontal', modes), 10) || 12;
-  const inputGap = parseInt(getVariableByName('formField/input/gap', modes), 10) || 8;
-  const inputRadius = parseInt(getVariableByName('formField/input/radius', modes), 10) || 8;
-  const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-  const inputFontSize = parseInt(getVariableByName('formField/input/label/fontSize', modes), 10) || 16;
-  const inputLineHeight = parseInt(getVariableByName('formField/input/label/lineHeight', modes), 10) || 45;
-  const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-  const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-  const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes) || '#24262b';
-  const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
-  const inputBorderSize = parseInt(getVariableByName('formField/input/border/size', modes), 10) || 1;
-
-  // -- Styles --
-  const labelStyle = useMemo(() => ({
-    color: labelColor,
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
-  const wrapperStyle = useMemo(() => ({
-    gap,
-    opacity: isDisabled ? 0.5 : 1
-  }), [gap, isDisabled]);
-  const requiredIndicatorStyle = useMemo(() => ({
-    color: '#d93d3d',
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
-
-  // Style overrides for the input row, sourced from formField/input/* tokens
-  const inputContainerStyle = useMemo(() => ({
-    backgroundColor: inputBackground,
-    borderColor: inputBorderColor,
-    borderWidth: inputBorderSize,
-    borderRadius: inputRadius,
-    paddingHorizontal: inputPaddingH,
-    paddingVertical: 0,
-    gap: inputGap
-  }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap]);
-  const inputTextStyle = useMemo(() => ({
-    color: inputTextColor,
-    fontSize: inputFontSize,
-    lineHeight: inputLineHeight,
-    fontFamily: inputFontFamily,
-    fontWeight: inputFontWeight
-  }), [inputTextColor, inputFontSize, inputLineHeight, inputFontFamily, inputFontWeight]);
-
-  // -- Support text logic --
-  const supportStatus = isInvalid ? 'Error' : 'Neutral';
-  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText;
-
-  // -- Input type derived props --
-  const secureTextEntry = type === 'password';
-  const keyboardType = type === 'email' ? 'email-address' : 'default';
-  const autoCapitalize = type === 'email' || type === 'password' ? 'none' : 'sentences';
-
-  // -- Event handlers --
-  const handleFocus = useCallback(e => {
-    setIsFocused(true);
-    onFocus?.(e);
-  }, [onFocus]);
-  const handleBlur = useCallback(e => {
-    setIsFocused(false);
-    onBlur?.(e);
-  }, [onBlur]);
-  return {
-    modes,
-    labelStyle,
-    wrapperStyle,
-    requiredIndicatorStyle,
-    inputContainerStyle,
-    inputTextStyle,
-    supportStatus,
-    supportLabel,
-    secureTextEntry,
-    keyboardType,
-    autoCapitalize,
-    handleFocus,
-    handleBlur
-  };
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
 }
+function useFormFieldTokens(modes) {
+  return useMemo(() => {
+    // Wrapper
+    const gap = toNumber(getVariableByName('formField/gap', modes), 8);
+
+    // Label (Figma: 14/17 medium, color #0c0d10)
+    const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
+    const labelFontWeight = toFontWeight(getVariableByName('formField/label/fontWeight', modes), '500');
+
+    // Input row (Figma: 12 px padding-h, 8 px gap, 8 px radius, 1 px border)
+    const inputPaddingH = toNumber(getVariableByName('formField/input/padding/horizontal', modes), 12);
+    const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
+    const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
+    const inputBorderSize = toNumber(getVariableByName('formField/input/border/size', modes), 1);
+
+    // Input text (Figma: 16/45 regular)
+    const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
+    const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontWeight = toFontWeight(getVariableByName('formField/input/label/fontWeight', modes), '400');
+    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputBorderColor = getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    if (__DEV__) {
+      console.warn('[FormField] border color (modes changed)', {
+        'FormField States': modes['FormField States'],
+        inputBorderColor,
+        'formField/input/border/color': getVariableByName('formField/input/border/color', modes)
+      });
+    }
+    const inputTextColor = getVariableByName('formField/input/label/color', modes) || '#24262b';
+    return {
+      gap,
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBorderSize,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputBackground,
+      inputBorderColor,
+      inputTextColor
+    };
+  }, [modes]);
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function deriveTypeProps(type) {
+  switch (type) {
+    case 'password':
+      return {
+        secureTextEntry: true,
+        keyboardType: 'default',
+        autoCapitalize: 'none',
+        autoComplete: 'password',
+        textContentType: 'password'
+      };
+    case 'email':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'email-address',
+        autoCapitalize: 'none',
+        autoComplete: 'email',
+        textContentType: 'emailAddress'
+      };
+    case 'number':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'numeric',
+        autoCapitalize: 'none',
+        autoComplete: 'off',
+        textContentType: 'none'
+      };
+    case 'phone':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'phone-pad',
+        autoCapitalize: 'none',
+        autoComplete: 'tel',
+        textContentType: 'telephoneNumber'
+      };
+    case 'url':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'url',
+        autoCapitalize: 'none',
+        autoComplete: 'url',
+        textContentType: 'URL'
+      };
+    case 'search':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'default',
+        autoCapitalize: 'none',
+        autoComplete: 'off',
+        textContentType: 'none'
+      };
+    case 'text':
+    default:
+      return {
+        secureTextEntry: false,
+        keyboardType: 'default',
+        autoCapitalize: 'sentences',
+        autoComplete: 'off',
+        textContentType: 'none'
+      };
+  }
+}
+function firstError(error) {
+  if (!error) return undefined;
+  if (Array.isArray(error)) return error[0];
+  return error;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
 function FormField({
   label,
   placeholder,
-  value = '',
+  value,
   onChangeText,
   type = 'text',
+  name,
   leading,
   trailing,
   leadingIconName,
   isRequired = false,
   isDisabled = false,
   isInvalid = false,
+  isReadOnly = false,
   supportText,
   errorMessage,
-  modes = EMPTY_MODES,
+  maxLength,
+  autoFocus = false,
+  modes: propModes = EMPTY_MODES,
   style,
+  inputStyle,
+  inputTextStyle,
   onFocus,
   onBlur,
+  onSubmitEditing,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  testID
 }) {
+  // -- Form context integration -------------------------------------------
+  const formCtx = useFormContext();
+  const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
+  const resolvedIsInvalid = isInvalid || Boolean(formError);
+  const resolvedErrorMessage = errorMessage ?? formError;
+
+  // -- Mode resolution ----------------------------------------------------
   const {
-    modes: resolvedModes,
-    labelStyle,
-    wrapperStyle,
-    requiredIndicatorStyle,
-    inputContainerStyle,
-    inputTextStyle,
-    supportStatus,
-    supportLabel,
-    secureTextEntry,
-    keyboardType,
-    autoCapitalize,
-    handleFocus,
-    handleBlur
-  } = useFormField({
-    type,
-    isDisabled,
-    isInvalid,
-    supportText,
-    errorMessage,
-    modes,
-    onFocus,
-    onBlur
-  });
+    modes: globalModes
+  } = useTokens();
+  const baseModes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const [isFocused, setIsFocused] = useState(false);
+  const interactive = !isDisabled && !isReadOnly;
+
+  // FormField States cascade — error > read only/disabled > active (focused) > idle.
+  // Disabled maps to "Read Only" since there is no dedicated disabled mode and
+  // the visual treatment is closest. This is only the DEFAULT — an explicit
+  // `modes['FormField States']` passed in via props or the global theme
+  // always wins so consumers can force a state (e.g. for documentation).
+  const derivedStateMode = useMemo(() => {
+    if (resolvedIsInvalid) return 'Error';
+    if (isReadOnly || isDisabled) return 'Read Only';
+    if (isFocused) return 'Active';
+    return 'Idle';
+  }, [resolvedIsInvalid, isReadOnly, isDisabled, isFocused]);
+  const modes = useMemo(() => {
+    const explicitStateMode = baseModes['FormField States'];
+    const stateMode = explicitStateMode ?? derivedStateMode;
+    const explicitStatus = baseModes.Status;
+    // Default SupportText token mode is Auto (Figma resolves foreground from
+    // context). Pass modes={{ Status: 'Error' }} etc. to override.
+    const status = explicitStatus ?? 'Auto';
+    return {
+      ...baseModes,
+      'FormField States': stateMode,
+      Status: status
+    };
+  }, [baseModes, derivedStateMode]);
+  const tokens = useFormFieldTokens(modes);
+
+  // -- Type-derived input props ------------------------------------------
+  const typeProps = useMemo(() => deriveTypeProps(type), [type]);
+
+  // -- Event handlers ----------------------------------------------------
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const handleChangeText = useCallback(next => {
+    onChangeText?.(next);
+    if (name && formCtx) formCtx.onFieldChange(name);
+  }, [onChangeText, name, formCtx]);
+
+  // -- Styles ------------------------------------------------------------
+  const wrapperStyle = useMemo(() => ({
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens.gap, isDisabled]);
+  const labelRowStyle = useMemo(() => ({
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  }), []);
+  const labelTextStyle = useMemo(() => ({
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  }), [tokens.labelColor, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelLineHeight, tokens.labelFontWeight]);
+  const requiredIndicatorStyle = useMemo(() => ({
+    ...labelTextStyle,
+    color: '#d93d3d'
+  }), [labelTextStyle]);
+  const inputRowStyle = useMemo(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.inputBackground,
+    borderColor: tokens.inputBorderColor,
+    borderWidth: tokens.inputBorderSize,
+    borderStyle: 'solid',
+    borderRadius: tokens.inputRadius,
+    paddingHorizontal: tokens.inputPaddingH,
+    paddingVertical: 0,
+    gap: tokens.inputGap,
+    minHeight: tokens.inputLineHeight,
+    width: '100%'
+  }), [tokens.inputBackground, tokens.inputBorderColor, tokens.inputBorderSize, tokens.inputRadius, tokens.inputPaddingH, tokens.inputGap, tokens.inputLineHeight]);
+  const inputTextStyles = useMemo(() => ({
+    flex: 1,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.inputFontFamily,
+    fontSize: tokens.inputFontSize,
+    lineHeight: tokens.inputLineHeight,
+    fontWeight: tokens.inputFontWeight,
+    padding: 0,
+    margin: 0,
+    // Remove the default web focus ring; the input row's border acts as the
+    // focus indicator via the FormField States cascade.
+    outlineStyle: 'none',
+    outlineWidth: 0,
+    outlineColor: 'transparent'
+  }), [tokens.inputTextColor, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputLineHeight, tokens.inputFontWeight]);
+  const placeholderColor = useMemo(() => {
+    // Slightly muted version of the resolved text color, mirroring the
+    // sibling TextInput behavior.
+    const c = tokens.inputTextColor;
+    if (typeof c !== 'string') return undefined;
+    if (c.startsWith('rgb(')) {
+      return c.replace('rgb(', 'rgba(').replace(')', ', 0.55)');
+    }
+    return '#888a8d';
+  }, [tokens.inputTextColor]);
+
+  // -- Slots --------------------------------------------------------------
+  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/_jsx(Icon, {
+    name: leadingIconName,
+    size: 20,
+    color: tokens.inputTextColor
+  }) : null);
+  const processedLeading = leadingElement ? cloneChildrenWithModes(leadingElement, modes) : null;
+  const processedTrailing = trailing ? cloneChildrenWithModes(trailing, modes) : null;
+
+  // -- Support text -------------------------------------------------------
+  const supportStatus = resolvedIsInvalid ? 'Error' : 'Neutral';
+  const supportLabel = resolvedIsInvalid && resolvedErrorMessage ? resolvedErrorMessage : supportText;
+
+  // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/_jsxs(View, {
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
-    accessible: true,
-    accessibilityRole: "none",
-    accessibilityLabel: resolvedA11yLabel,
-    accessibilityState: {
-      disabled: isDisabled
-    },
+    testID: testID,
+    accessible: false,
     children: [label != null && /*#__PURE__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'baseline'
-      },
+      style: labelRowStyle,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: labelStyle,
+        style: labelTextStyle,
         children: label
       }), isRequired && /*#__PURE__*/_jsx(Text, {
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/_jsx(TextInput, {
-      placeholder: placeholder || '',
-      value: value,
-      ...(onChangeText ? {
-        onChangeText
-      } : {}),
-      leading: leading,
-      trailing: trailing,
-      leadingIconName: leadingIconName || 'ic_search',
-      modes: resolvedModes,
-      style: inputContainerStyle,
-      inputStyle: inputTextStyle,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      secureTextEntry: secureTextEntry,
-      keyboardType: keyboardType,
-      autoCapitalize: autoCapitalize,
-      editable: !isDisabled,
-      accessibilityLabel: resolvedA11yLabel,
-      accessibilityHint: accessibilityHint || ''
-    }), supportLabel != null && /*#__PURE__*/_jsx(SupportText, {
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [inputRowStyle, inputStyle],
+      children: [processedLeading != null && /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: processedLeading
+      }), /*#__PURE__*/_jsx(RNTextInput, {
+        style: [inputTextStyles, inputTextStyle],
+        value: value ?? '',
+        onChangeText: handleChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onSubmitEditing: onSubmitEditing,
+        placeholder: placeholder ?? '',
+        placeholderTextColor: placeholderColor,
+        editable: interactive,
+        maxLength: maxLength,
+        autoFocus: autoFocus,
+        secureTextEntry: typeProps.secureTextEntry,
+        keyboardType: typeProps.keyboardType,
+        autoCapitalize: typeProps.autoCapitalize,
+        autoComplete: typeProps.autoComplete,
+        textContentType: typeProps.textContentType,
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityHint: accessibilityHint
+      }), processedTrailing != null && /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: processedTrailing
+      })]
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/_jsx(SupportText, {
       label: supportLabel,
       status: supportStatus,
-      modes: resolvedModes
+      modes: modes
     })]
   });
 }

package/lib/module/components/IconButton/IconButton.js

@@ -6,6 +6,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants
@@ -93,6 +95,7 @@ function IconButton({
   inactiveIcon,
   inactiveSource,
   isActive = false,
+  loading,
   ...rest
 }) {
   // Merge explicit props with modes for token resolution. Memoize the merged
@@ -104,6 +107,13 @@ function IconButton({
     isActive
   }), [modes, isToggle, isActive]);
   const tokens = useMemo(() => resolveIconButtonTokens(componentModes, disabled), [componentModes, disabled]);
+
+  // Hook called unconditionally — short-circuit below comes AFTER all hooks
+  // to keep React's hook order stable across renders.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const userHandlersRef = useRef({});
@@ -175,6 +185,16 @@ function IconButton({
   const styleCallback = useCallback(({
     pressed
   }) => [tokens.baseContainerStyle, style, pressed && !disabled ? pressedOverlayStyle : null, isHovered && !disabled ? hoverOverlayStyle : null, isFocused && !disabled ? focusOverlayStyle : null], [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]);
+  if (isLoading) {
+    const size = tokens.baseContainerStyle.width;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "other",
+      width: size,
+      height: size,
+      style: style,
+      modes: componentModes
+    });
+  }
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,

package/lib/module/components/Image/Image.js

@@ -2,6 +2,8 @@
 
 import React, { useMemo } from 'react';
 import { Image as RNImage, View } from 'react-native';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 function normalizeSource(imageSource) {
   if (imageSource == null) return undefined;
@@ -41,7 +43,8 @@ function Image({
   style,
   accessibilityLabel,
   accessibilityElementsHidden,
-  importantForAccessibility
+  importantForAccessibility,
+  loading
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
   const layoutStyle = useMemo(() => {
@@ -63,6 +66,27 @@ function Image({
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
   }, [ratio, width, height, borderRadius]);
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    // Match the loaded image's exact box. If height is unknown but a ratio
+    // is set, the skeleton uses `aspectRatio` the same way the loaded image
+    // would, so layout never jumps when the load resolves.
+    const skeletonStyle = {
+      width: width ?? '100%',
+      ...(height != null ? {
+        height: height
+      } : {
+        aspectRatio: ratio
+      })
+    };
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "image",
+      style: skeletonStyle
+    });
+  }
   if (!source) {
     return /*#__PURE__*/_jsx(View, {
       style: [layoutStyle, style]