@webority-technologies/mobile 0.0.6 → 0.0.7

package/README.md

@@ -1,471 +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`, `Banner`, `Chip`,
-`Rating`, `Stepper`, `ImageGallery`) 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>;
-```
-
-### Two flavours of `loading`
-
-Same prop name, different semantic by category:
-
-- **Display primitives** (`Card`, `ListItem`, `Avatar`, `Badge`, `Banner`, `Chip`, `Rating`,
-  `Stepper`, `ImageGallery`) — `loading={true}` renders the component as a skeleton placeholder
-  via `SkeletonContent`'s auto walker. Use when the data driving the component is still being
-  fetched.
-- **Interactive triggers** (`Button`) — `loading={true}` swaps the label for an inline `Spinner`,
-  hides leading/trailing icons, and disables press handling. The button keeps its footprint and
-  visual style. Use when an action is in flight (submit, save, delete) — pending action, not
-  data fetch.
-
-Before / after with `Button`:
-
-```tsx
-// Before — caller swaps a separate spinner in
-{
-  submitting ? <Spinner size="small" /> : <Button title="Save" onPress={save} />;
-}
-
-// After — Button itself signals the in-flight action
-<Button title="Save" loading={submitting} onPress={save} />;
-```
-
----
-
-## 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/Skeleton/Skeleton.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 _SkeletonProvider = require("./SkeletonProvider.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 SPEED_DURATION = {
@@ -33,23 +34,30 @@ const resolveWidth = width => {
 const Skeleton = ({
   width = '100%',
   height = 16,
-  radius = 'sm',
-  variant = 'shimmer',
-  speed = 'normal',
+  radius,
+  variant,
+  speed,
+  colors,
   style,
   testID
 }) => {
   const theme = (0, _index.useTheme)();
+  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const resolvedVariant = variant ?? defaults.variant ?? 'shimmer';
+  const resolvedSpeed = speed ?? defaults.speed ?? 'normal';
+  const resolvedRadiusToken = radius ?? defaults.radius ?? 'sm';
+  const backgroundColor = colors?.background ?? defaults.colors?.background ?? theme.colors.skeleton.background;
+  const highlightColor = colors?.highlight ?? defaults.colors?.highlight ?? theme.colors.skeleton.highlight;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const borderRadius = resolveRadius(theme, radius);
+  const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = _index2.Responsive.size(height);
   const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     progress.setValue(0);
-    const duration = variant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[speed];
-    const animation = variant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
+    const duration = resolvedVariant === 'pulse' ? PULSE_DURATION : SPEED_DURATION[resolvedSpeed];
+    const animation = resolvedVariant === 'pulse' ? _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(progress, {
       toValue: 1,
       duration: duration / 2,
       easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
@@ -69,17 +77,17 @@ const Skeleton = ({
     return () => {
       animation.stop();
     };
-  }, [progress, speed, variant]);
+  }, [progress, resolvedSpeed, resolvedVariant]);
   const handleLayout = event => {
     const next = event.nativeEvent.layout.width;
     if (next !== containerWidth) setContainerWidth(next);
   };
   const overlay = (0, _react.useMemo)(() => {
-    if (variant === 'pulse') {
+    if (resolvedVariant === 'pulse') {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         pointerEvents: "none",
         style: [_reactNative.StyleSheet.absoluteFillObject, {
-          backgroundColor: theme.colors.skeleton.highlight,
+          backgroundColor: highlightColor,
           opacity: progress.interpolate({
             inputRange: [0, 1],
             outputRange: [0, 0.6]
@@ -97,13 +105,13 @@ const Skeleton = ({
       pointerEvents: "none",
       style: [styles.shimmer, {
         width: highlightWidth,
-        backgroundColor: theme.colors.skeleton.highlight,
+        backgroundColor: highlightColor,
         transform: [{
           translateX
         }]
       }]
     });
-  }, [containerWidth, progress, styles.shimmer, theme.colors.skeleton.highlight, variant]);
+  }, [containerWidth, progress, styles.shimmer, highlightColor, resolvedVariant]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     onLayout: handleLayout,
     accessible: true,
@@ -115,7 +123,7 @@ const Skeleton = ({
       width: resolvedWidth,
       height: resolvedHeight,
       borderRadius,
-      backgroundColor: theme.colors.skeleton.background
+      backgroundColor
     }, style],
     children: overlay
   });

package/lib/commonjs/components/Skeleton/SkeletonContent.js

@@ -7,6 +7,7 @@ exports.default = exports.SkeletonContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _Skeleton = require("./Skeleton.js");
+var _SkeletonSkip = require("./SkeletonSkip.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 flattenStyle = style => {
@@ -27,7 +28,7 @@ const resolveRadius = (raw, fallback) => {
   if (typeof raw === 'number') return raw;
   return fallback;
 };
-const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
+const skeletonizeNode = (node, variant, speed, colors, keyHint = 'r') => {
   if (node == null || typeof node === 'boolean') return null;
   if (typeof node === 'string' || typeof node === 'number') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.Skeleton, {
@@ -35,11 +36,12 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: 14,
       radius: "sm",
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-text`);
   }
   if (Array.isArray(node)) {
-    return _react.Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, `${keyHint}-${index}`));
+    return _react.Children.map(node, (child, index) => skeletonizeNode(child, variant, speed, colors, `${keyHint}-${index}`));
   }
   if (! /*#__PURE__*/(0, _react.isValidElement)(node)) return null;
   const element = node;
@@ -47,6 +49,13 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   const elementStyle = flattenStyle(props.style);
   const elementType = element.type;
 
+  // <SkeletonSkip /> → opt-out marker; render its children unchanged
+  if (elementType === _SkeletonSkip.SkeletonSkip) {
+    return /*#__PURE__*/(0, _react.cloneElement)(element, {
+      key: `${keyHint}-skip`
+    });
+  }
+
   // <Image /> → fixed-size skeleton block matching style.width/height/borderRadius
   if (elementType === _reactNative.Image) {
     const width = resolveWidth(elementStyle.width, '100%');
@@ -58,6 +67,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: radius,
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         margin: typeof elementStyle.margin === 'number' ? elementStyle.margin : undefined
       }
@@ -74,6 +84,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       radius: "sm",
       variant: variant,
       speed: speed,
+      colors: colors,
       style: {
         marginVertical: 2
       }
@@ -84,7 +95,7 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
   if (props.children != null) {
     return /*#__PURE__*/(0, _react.cloneElement)(element, {
       key: `${keyHint}-w`
-    }, skeletonizeNode(props.children, variant, speed, `${keyHint}-c`));
+    }, skeletonizeNode(props.children, variant, speed, colors, `${keyHint}-c`));
   }
 
   // Leaf <View /> with explicit dimensions → skeleton block
@@ -97,7 +108,8 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
       height: height,
       radius: radius,
       variant: variant,
-      speed: speed
+      speed: speed,
+      colors: colors
     }, `${keyHint}-vw`);
   }
 
@@ -110,10 +122,11 @@ const skeletonizeNode = (node, variant, speed, keyHint = 'r') => {
 const SkeletonContent = ({
   loading,
   children,
-  variant = 'shimmer',
-  speed = 'normal',
+  variant,
+  speed,
   mode = 'auto',
   count = 1,
+  colors,
   style,
   testID
 }) => {
@@ -133,6 +146,7 @@ const SkeletonContent = ({
       testID: testID,
       variant: variant,
       speed: speed,
+      colors: colors,
       children: repeated
     });
   }
@@ -143,7 +157,7 @@ const SkeletonContent = ({
     accessibilityLabel: "Loading",
     accessibilityRole: "progressbar",
     accessibilityLiveRegion: "polite",
-    children: skeletonizeNode(repeated, variant, speed)
+    children: skeletonizeNode(repeated, variant, speed, colors)
   });
 };
 exports.SkeletonContent = SkeletonContent;
@@ -152,6 +166,7 @@ const BlockSkeleton = ({
   children,
   variant,
   speed,
+  colors,
   style,
   testID
 }) => {
@@ -188,7 +203,8 @@ const BlockSkeleton = ({
         height: size.height,
         radius: "md",
         variant: variant,
-        speed: speed
+        speed: speed,
+        colors: colors
       })
     }) : null]
   });