@webority-technologies/mobile 0.0.5 → 0.0.7

package/README.md

@@ -1,443 +1,11 @@
 # @webority-technologies/mobile
 
-The single React Native package for Webority projects: 41 UI components, theme, API client, auth, logging, storage, formatters, validators, network, permissions, and version-check — all in one import path.
-
-`v0.0.1` · MIT · React Native 0.81+ · React 19 · TypeScript strict
-
----
-
-## Install
+Internal React Native foundation for Webority projects — UI components, theme, API client, auth, logging, storage, formatters, validators, network, permissions, and version-check in one package.
 
 ```bash
 npm install @webority-technologies/mobile
 ```
 
-### Peer dependencies
-
-`react` 19.1 and `react-native` 0.81+ are required. Everything else is **optional** — install only what the modules you use need:
-
-| Peer dep                                          | Needed for                                                        |
-| ------------------------------------------------- | ----------------------------------------------------------------- |
-| `react-native-reanimated` (3.x)                   | `BottomSheet`, `Drawer`, `Swipeable` (others use native Animated) |
-| `react-native-gesture-handler` (2.x)              | `BottomSheet`, swipe-to-dismiss interactions                      |
-| `react-native-safe-area-context` (5.x)            | Layout components, modals, toast positioning                      |
-| `react-native-vector-icons` (10.x)                | Icon-bearing components (`Button`, `Avatar`, etc.)                |
-| `@react-native-async-storage/async-storage` (2.x) | `Storage` module + token persistence                              |
-| `react-native-keychain` (9.x)                     | Secure credential storage (`storeToken` / `getToken`)             |
-| `react-native-device-info` (14.x)                 | `versionCheck` helpers                                            |
-| `@react-native-community/netinfo` (11.x)          | `useNetworkStatus`, `NetworkStatusBanner`                         |
-| `react-native-permissions` (4.x)                  | `Permissions` module                                              |
-| `react-native-compressor` (1.10+)                 | `compressImage` utility                                           |
-
-```bash
-npm install react-native-reanimated \
-            react-native-gesture-handler \
-            react-native-safe-area-context \
-            react-native-vector-icons \
-            @react-native-async-storage/async-storage \
-            react-native-keychain \
-            react-native-device-info \
-            @react-native-community/netinfo \
-            react-native-permissions \
-            react-native-compressor
-```
-
-Follow each library's native-setup steps (Reanimated babel plugin, Gesture Handler import at the top of the entry file, vector-icons font linking, etc.).
-
----
-
-## Setup
-
-Wrap the app with `GestureHandlerRootView`, `SafeAreaProvider`, `ThemeProvider`, and `ToastProvider`. Initialize the SDK once at module scope.
-
-```tsx
-// App.tsx
-import 'react-native-gesture-handler';
-import React from 'react';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import {
-  initWebority,
-  initUserAuth,
-  ThemeProvider,
-  ToastProvider,
-  NetworkStatusBanner
-} from '@webority-technologies/mobile';
-import store from './store';
-import { logout, refreshToken } from './store/auth';
-
-initWebority({
-  baseUrl: 'https://api.example.com',
-  environment: __DEV__ ? 'Development' : 'Production',
-  country: 'in' // optional, defaults to 'in'
-});
-
-initUserAuth(store, { logout, refreshToken });
-
-export default function App(): JSX.Element {
-  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
-        <ThemeProvider>
-          <ToastProvider>
-            <NetworkStatusBanner />
-            {/* your screens */}
-          </ToastProvider>
-        </ThemeProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
-  );
-}
-```
-
-`initUI` is also exported for advanced setups that need to register UI-only globals (theme overrides, default color mode) without the API/auth side of the SDK.
-
----
-
-## API surface
-
-```ts
-import {
-  // bootstrap
-  initWebority,
-  initUserAuth,
-  initUI,
-
-  // configuration
-  setConfig,
-  getConfig,
-  getConfigValue,
-  resetConfig,
-
-  // theme
-  ThemeProvider,
-  useTheme,
-  useThemeMode,
-  mergeTheme,
-  lightTheme,
-  darkTheme,
-
-  // hooks
-  useToggle,
-  useDebounce,
-  usePressAnimation,
-
-  // http
-  publicClient,
-  userClient,
-
-  // auth
-  storeToken,
-  getToken,
-  removeToken,
-  decodeJWT,
-  isJWTExpired,
-  getJWTExpiry,
-
-  // storage
-  Storage,
-  setStorageImplementation,
-
-  // logger + remote sink (Crashlytics / Sentry adapter)
-  Logger,
-  setRemoteLogger,
-
-  // version + force update
-  VersionCheck,
-  useVersionCheck,
-  ForceUpdateDialog,
-
-  // network
-  useNetworkStatus,
-  getNetworkStatus,
-  NetworkStatusBanner,
-
-  // permissions
-  Permissions,
-
-  // formatters
-  formatDate,
-  formatTime,
-  formatRelativeTime,
-  formatPhone,
-  formatCurrency,
-  formatNumber,
-  formatPercent,
-  formatCompactNumber,
-  getInitials,
-
-  // validators
-  isEmail,
-  isIndianMobile,
-  isPhone,
-  isUrl,
-  isStrongPassword,
-  isPan,
-  isGstin,
-  isAadhaar,
-  isIfsc,
-  isIndianPincode,
-  isHexColor,
-  isNumeric,
-  isInteger,
-  isAlphanumeric,
-  isBetween,
-  minLength,
-  maxLength,
-
-  // utilities
-  Responsive,
-  Spacing,
-  Padding,
-  Margin,
-  isTablet,
-  shadowStyle,
-  triggerHaptic,
-  compressImage,
-
-  // toast
-  ToastProvider,
-  toast,
-  useToast
-
-  // …41 UI components
-} from '@webority-technologies/mobile';
-```
-
----
-
-## HTTP clients
-
-### `publicClient`
-
-Axios instance for unauthenticated calls. Handles retries (network errors, 429, 503), 30s timeout, environment-aware base URL, and standard headers (including gzip `Accept-Encoding`).
-
-### `userClient`
-
-Axios instance for authenticated calls. Injects a Bearer token from Keychain, queues concurrent 401s while a single refresh is in flight, and replays them on success. Wires into the host app's Redux store via `initUserAuth(store, { logout, refreshToken })`.
-
----
-
-## Auth & tokens
-
-```ts
-import {
-  storeToken,
-  getToken,
-  removeToken,
-  decodeJWT,
-  isJWTExpired
-} from '@webority-technologies/mobile';
-
-await storeToken('accessToken', token, expiry);
-const stored = await getToken('accessToken'); // { token, expiry } | null
-if (stored && isJWTExpired(stored.token)) {
-  /* refresh */
-}
-const claims = decodeJWT<{ sub: string; role: string }>(stored.token);
-```
-
-Tokens are persisted via `react-native-keychain` with biometry-friendly defaults and graceful recovery from "Key permanently invalidated" errors.
-
----
-
-## Storage
-
-Typed `AsyncStorage` wrapper with safe JSON helpers. All operations swallow errors (logging them) and return falsy results so storage failures never crash the app.
-
-```ts
-import { Storage } from '@webority-technologies/mobile';
-
-await Storage.setItem('lang', 'en');
-const lang = await Storage.getItem('lang'); // string | null
-
-await Storage.setJson('user', { id: '1', name: 'Navneet' });
-const user = await Storage.getJson<User>('user'); // User | null
-
-await Storage.multiSet({ pushToken: '…', deviceId: '…' });
-await Storage.multiRemove(['pushToken']);
-```
-
-Override the backend (e.g. with MMKV) via `setStorageImplementation()`.
-
----
-
-## Logger & crash reporting
-
-`Logger.info / warn / error` write to the console. `Logger.recordError`, `Logger.breadcrumb`, `Logger.setUser`, and `Logger.setAttribute` forward to an optional **remote sink** that you wire from your app — keeping the library Firebase- and Sentry-agnostic.
-
-```ts
-import { Logger, setRemoteLogger } from '@webority-technologies/mobile';
-import crashlytics from '@react-native-firebase/crashlytics';
-
-setRemoteLogger({
-  log: (level, message) => crashlytics().log(`[${level}] ${message}`),
-  recordError: (error, ctx) => {
-    if (ctx) Object.entries(ctx).forEach(([k, v]) => crashlytics().setAttribute(k, String(v)));
-    crashlytics().recordError(error instanceof Error ? error : new Error(String(error)));
-  },
-  breadcrumb: (msg, data) => crashlytics().log(data ? `${msg} ${JSON.stringify(data)}` : msg),
-  setUser: (id) => crashlytics().setUserId(id ?? ''),
-  setAttribute: (k, v) => crashlytics().setAttribute(k, v == null ? '' : String(v))
-});
-
-Logger.recordError(new Error('boom'), { route: '/checkout', orderId: 42 });
-```
-
-The same shape works for Sentry, Bugsnag, Datadog, or any custom backend — implement only the methods you need.
-
----
-
-## Version check & force update
-
-```tsx
-import { useVersionCheck, ForceUpdateDialog } from '@webority-technologies/mobile';
-
-const { isUpdateRequired, updateUrl } = useVersionCheck(isAppReady);
-return <ForceUpdateDialog visible={isUpdateRequired} mandatory updateUrl={updateUrl} />;
-```
-
-`useVersionCheck` only runs in `'Production'`. Country code (used for App Store / Play Store lookups) is configurable via `initWebority({ country: 'us' })`; defaults to `'in'`.
-
----
-
-## Network status
-
-```tsx
-import { useNetworkStatus, NetworkStatusBanner } from '@webority-technologies/mobile';
-
-// Mount once near the app root
-<NetworkStatusBanner />;
-
-// Or read it inside a screen
-const { isConnected, isInternetReachable, type } = useNetworkStatus();
-```
-
-Falls back to an optimistic "online" status when `@react-native-community/netinfo` is not installed.
-
----
-
-## Permissions
-
-```ts
-import { Permissions } from '@webority-technologies/mobile';
-
-await Permissions.isAuthorized('camera'); // boolean
-const status = await Permissions.ensure('photos'); // 'granted' | 'denied' | 'limited' | 'blocked' | 'unavailable'
-if (status === 'blocked') await Permissions.openSettings();
-```
-
-Maps an abstract `PermissionKind` (camera, microphone, photos, location, contacts, calendar, notifications, bluetooth, …) to the right iOS / Android permission string under the hood.
-
----
-
-## Formatters
-
-```ts
-formatDate(new Date(), 'medium'); // '8 Apr 2026'
-formatRelativeTime(then, now); // '5 minutes ago'
-formatPhone('9876512345'); // '+91 98765 12345'
-formatCurrency(150000); // '₹1,50,000'
-formatCurrency(99, { currency: 'USD', locale: 'en-US' }); // '$99.00'
-formatCompactNumber(1500000); // '15L' (en-IN)
-getInitials('Navneet Singh'); // 'NS'
-```
-
-All formatters default to `en-IN` locale (Indian numbering / DD-MMM-YYYY style) and accept overrides.
-
----
-
-## Validators
-
-Pragmatic regex-based validators that match common Indian-app needs:
-
-```ts
-isEmail('a@b.co'); // true
-isIndianMobile('+919876512345'); // true
-isPan('ABCDE1234F'); // true
-isGstin('27AAPFU0939F1ZV'); // true
-isIfsc('HDFC0001234'); // true
-isIndianPincode('110001'); // true
-isStrongPassword('Aa1!@#$%', { requireSymbol: true }); // true
-```
-
-Plus generic helpers: `isUrl`, `isNumeric`, `isInteger`, `isAlphanumeric`, `isHexColor`, `isBetween`, `minLength`, `maxLength`.
-
----
-
-## Theme
-
-`ThemeProvider` exposes the design-token surface (colors, typography, spacing, radius, shadows, motion) and tracks the system color-scheme automatically. Read it via `useTheme()`. Every shipped component reads from the active theme — no hard-coded colors anywhere. Customize with `mergeTheme` or `initUI({ light, dark })`.
-
----
-
-## Toast
-
-Imperative `toast.success(...)` / `toast.error(...)` from anywhere in the tree, or `useToast().show(...)` inside components.
-
-```ts
-toast.success('Saved.');
-toast.error('Network is down', { description: 'Check your connection.' });
-```
-
-Mount `<ToastProvider>` once near the app root.
-
----
-
-## Components
-
-41 components across Layout, Forms & Inputs, Feedback & Status, Overlay, Navigation, and Data Display.
-
-For the full catalog with props tables and minimal usage examples, see [`docs/COMPONENTS.md`](../../docs/COMPONENTS.md).
-
-For runnable usage of every component, see [`example/`](../../example/).
-
----
-
-## Designing skeleton-aware components
-
-Presentational primitives (`Card`, `ListItem`, `Avatar`, `Badge`) accept an optional
-`loading?: boolean` prop. When `true`, the component renders its normal layout wrapped
-in `<SkeletonContent loading mode="auto">` — the walker replaces every `<Text>`,
-`<Image>`, and sized leaf `<View>` with a shimmer block matching the element's
-dimensions. When `loading` is `false` or omitted, behaviour is unchanged.
-
-Conventions for components that opt into this pattern:
-
-- **Render gracefully with undefined data.** Use optional chaining and string defaults
-  so the auto walker has leaves to skeletonize even before data arrives:
-  `{item?.title ?? ' '}`, `{item?.subtitle ?? ' '}`. Never let a `<Text>` render `undefined`.
-- **Use explicit dimensions on visual elements.** Set `width`/`height` on `<Image>` and
-  `<View>` leaves, and `fontSize` on `<Text>`, so the walker can size each shimmer
-  block correctly. Inline styles, `StyleSheet.create`, and arrays all work — they get
-  flattened.
-- **Wrap once at the top.** Don't sprinkle `<SkeletonContent>` inside subtrees; wrap the
-  component's final return so the entire layout becomes a single coherent placeholder.
-- **For data-driven lists, prefer `<SkeletonList>`.** It owns the "show N placeholder
-  rows while loading, then real data" branching so callers don't hand-roll it.
-
-Before / after with `Card`:
-
-```tsx
-// Before — caller hand-rolls a placeholder branch
-{loading ? (
-  <SkeletonCard />
-) : (
-  <Card>
-    <Text>{site.name}</Text>
-    <Text>{site.address}</Text>
-  </Card>
-)}
-
-// After — Card itself is skeleton-aware
-<Card loading={loading}>
-  <Text>{site?.name ?? ' '}</Text>
-  <Text>{site?.address ?? ' '}</Text>
-</Card>
-```
-
----
-
-## License
+This package is published for use inside Webority repositories. Documentation is maintained internally.
 
-MIT. Copyright © Webority Technologies.
+MIT © Webority Technologies.

package/lib/commonjs/components/Accordion/Accordion.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AccordionGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -92,7 +93,8 @@ const Accordion = props => {
     style,
     headerStyle,
     contentStyle,
-    testID
+    testID,
+    loading = false
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
@@ -158,6 +160,23 @@ const Accordion = props => {
     backgroundColor: theme.colors.background.elevated,
     borderRadius: theme.radius.md
   }] : null;
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      style: [cardStyle, style],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.header,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.title, {
+            fontSize: theme.typography.fontSize.base
+          }],
+          numberOfLines: 1,
+          children: title ?? ' '
+        })
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [cardStyle, style],
     testID: testID,

package/lib/commonjs/components/Banner/Banner.js

@@ -7,6 +7,7 @@ exports.default = exports.Banner = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
+var _index2 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
@@ -20,6 +21,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     onDismiss,
     visible = true,
     animateMount = true,
+    loading = false,
     accessibilityLabel,
     style,
     testID
@@ -64,6 +66,8 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   if (!mounted) return null;
+  const safeTitle = title ?? ' ';
+  const safeMessageString = typeof message === 'string' ? message ?? ' ' : '';
   const renderIcon = () => {
     if (icon === false) return null;
     if (icon) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -86,7 +90,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const messageString = typeof message === 'string' ? message : '';
   const builtA11y = accessibilityLabel ?? (title ? `${title}. ${messageString}` : messageString || undefined);
   const liveRegion = variant === 'error' ? 'assertive' : 'polite';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     ref: ref,
     accessibilityRole: 'alert',
     accessibilityLiveRegion: liveRegion,
@@ -109,7 +113,7 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       style: styles.row,
       children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.textBlock,
-        children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        children: [title || loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
@@ -117,15 +121,15 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             lineHeight: 20
           },
           numberOfLines: 2,
-          children: title
-        }) : null, typeof message === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          children: safeTitle
+        }) : null, typeof message === 'string' || loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: {
             color: theme.colors.text.secondary,
             fontSize: theme.typography.fontSize.sm,
             lineHeight: 18,
             marginTop: title ? 2 : 0
           },
-          children: message
+          children: safeMessageString || ' '
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: {
             marginTop: title ? 2 : 0
@@ -179,6 +183,14 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       })
     }) : null]
   });
+  if (loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      children: rendered
+    });
+  }
+  return rendered;
 });
 Banner.displayName = 'Banner';
 const tintFor = (theme, variant) => {

package/lib/commonjs/components/Button/Button.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _usePressAnimation = require("../../hooks/usePressAnimation.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
+var _index2 = require("../Spinner/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
@@ -55,9 +56,11 @@ const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const accessibleLabel = accessibilityLabel ?? title;
   const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.contentRow,
-    children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+    children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Spinner, {
+      variant: "circular",
+      size: "small",
       color: variantStyles.textColor,
-      size: size === 'xs' || size === 'sm' ? 'small' : 'small'
+      accessibilityLabel: "Loading"
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.iconLeft,

package/lib/commonjs/components/Carousel/Carousel.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../Skeleton/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -54,7 +55,8 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     accessibilityLabel,
     testID,
     showThumbnails = false,
-    renderThumbnail
+    renderThumbnail,
+    loading = false
   } = props;
   const theme = (0, _index.useTheme)();
   const isControlled = typeof controlledIndex === 'number';
@@ -215,6 +217,21 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
     offset: slideStride * i,
     index: i
   }), [slideStride]);
+  if (loading) {
+    const slideWidth = itemWidth === 'screen' ? containerWidth || 320 : itemWidth;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.SkeletonContent, {
+      loading: true,
+      mode: "auto",
+      style: [styles.container, containerStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: slideWidth,
+          height: 160,
+          borderRadius: 12
+        }
+      })
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, containerStyle],
     onLayout: e => setContainerWidth(e.nativeEvent.layout.width),