@widergy/mobile-ui 1.49.7 → 1.50.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.50.1](https://github.com/widergy/mobile-ui/compare/v1.50.0...v1.50.1) (2025-09-18)
+
+
+### Bug Fixes
+
+* [CX-1130] UTCuit Field Refactor ([#456](https://github.com/widergy/mobile-ui/issues/456)) ([19cce9d](https://github.com/widergy/mobile-ui/commit/19cce9dc619a04044b662cb3e359dd755c5c4715))
+
+# [1.50.0](https://github.com/widergy/mobile-ui/compare/v1.49.7...v1.50.0) (2025-08-12)
+
+
+### Features
+
+* [CX-987] UTSkeletonLoader ([#451](https://github.com/widergy/mobile-ui/issues/451)) ([20c5853](https://github.com/widergy/mobile-ui/commit/20c58534fa83913eae1e9deb0ab0316369bc0bb3))
+
 ## [1.49.7](https://github.com/widergy/mobile-ui/compare/v1.49.6...v1.49.7) (2025-07-30)
 
 

package/lib/components/UTActionCard/constants.js

@@ -18,3 +18,34 @@ export const PLACE_SELF_TYPES = {
   END: 'end',
   START: 'start'
 };
+
+export const ROOT_LOADER_STRATEGY = 'root';
+export const INTERNAL_LOADER_STRATEGY = 'internal';
+export const DEFAULT_LOADER_STRATEGY = ROOT_LOADER_STRATEGY;
+
+export const DEFAULT_LOADER_PROPS = {
+  alignment: 'center',
+  items: [
+    [
+      [
+        { height: 14, width: '100%' },
+        { height: 8, width: '100%' }
+      ],
+      [{ height: 28, width: 28 }]
+    ],
+    [
+      [
+        { height: 19, width: '100%' },
+        { height: 12, width: '100%' }
+      ],
+      [
+        { height: 19, width: '100%' },
+        { height: 12, width: '100%' }
+      ]
+    ]
+  ],
+  strategy: ROOT_LOADER_STRATEGY,
+  styles: {
+    skeletonContainer: { paddingTop: 16, paddingBottom: 12, paddingHorizontal: 16 }
+  }
+};

package/lib/components/UTActionCard/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { Fragment, memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import {
   arrayOf,
@@ -16,8 +16,18 @@ import {
 import { isEmpty } from 'lodash';
 
 import Surface from '../Surface';
+import UTSkeletonLoader from '../UTSkeletonLoader';
 
-import { ACTION_TYPES, HEADER_ACTIONS_VARIANTS, PLACE_SELF_TYPES, SIZES } from './constants';
+import {
+  ACTION_TYPES,
+  DEFAULT_LOADER_PROPS,
+  DEFAULT_LOADER_STRATEGY,
+  HEADER_ACTIONS_VARIANTS,
+  INTERNAL_LOADER_STRATEGY,
+  PLACE_SELF_TYPES,
+  ROOT_LOADER_STRATEGY,
+  SIZES
+} from './constants';
 import Header from './components/Header';
 import AdditionalMessage from './components/AdditionalMessage';
 import BottomActions from './components/BottomActions';
@@ -37,6 +47,8 @@ const UTActionCard = ({
   descriptionProps = {},
   headerActions,
   headerActionsProps = { variant: HEADER_ACTIONS_VARIANTS.DEFAULT },
+  loading = false,
+  loadingProps = DEFAULT_LOADER_PROPS,
   mainAction,
   size = SIZES.SMALL,
   status,
@@ -48,58 +60,72 @@ const UTActionCard = ({
   titleProps = {},
   withBodyPadding = true
 }) => {
+  const { strategy: loaderStrategy = DEFAULT_LOADER_STRATEGY } = loadingProps;
+  const rootLoader = loaderStrategy === ROOT_LOADER_STRATEGY;
+  const internalLoader = loaderStrategy === INTERNAL_LOADER_STRATEGY;
+  const LoaderWrapper = rootLoader ? UTSkeletonLoader : Fragment;
+  const InternalLoaderWrapper = internalLoader ? UTSkeletonLoader : Fragment;
+
   return (
     <Surface elevation={surfaceElevation} style={[styles.cardContainer, classNames.container]}>
-      <TouchableOpacity
-        activeOpacity={0.6}
-        disabled={!mainAction}
-        onPress={mainAction && (() => mainAction?.())}
-        style={[styles.innerContainer, classNames.innerContainer, mainAction && styles.withMainAction]}
-      >
-        <View>
-          {BackgroundImage && (
-            <BackgroundImage
-              height={backgroundHeight}
-              style={[styles.backgroundImage, classNames.backgroundImage]}
-              width={backgroundWidth}
-            />
-          )}
-          <View style={[styles.headerAndChildrenContainer, classNames.headerAndChildrenContainer]}>
-            <Header
-              {...{
-                adornment,
-                classNames,
-                description,
-                descriptionProps,
-                headerActions,
-                headerActionsProps,
-                mainAction,
-                size,
-                status,
-                statusAlignment,
-                statusLabel,
-                statusProps,
-                title,
-                titleProps
-              }}
-            />
-            {children && (
-              <View
-                style={[
-                  withBodyPadding ? styles[`bodyPadding_${size}`] : styles[`withoutBodyPadding_${size}`],
-                  classNames?.childrenContainer ?? {}
-                ]}
-              >
-                {children}
-              </View>
+      <LoaderWrapper loading={loading} {...loadingProps}>
+        <TouchableOpacity
+          activeOpacity={0.6}
+          disabled={!mainAction || loading}
+          onPress={mainAction && (() => mainAction?.())}
+          style={[styles.innerContainer, classNames.innerContainer, mainAction && styles.withMainAction]}
+        >
+          <View>
+            {BackgroundImage && (
+              <BackgroundImage
+                height={backgroundHeight}
+                style={[styles.backgroundImage, classNames.backgroundImage]}
+                width={backgroundWidth}
+              />
             )}
+            <InternalLoaderWrapper loading={loading} {...loadingProps}>
+              <View style={[styles.headerAndChildrenContainer, classNames.headerAndChildrenContainer]}>
+                <Header
+                  {...{
+                    adornment,
+                    classNames,
+                    description,
+                    descriptionProps,
+                    headerActions,
+                    headerActionsProps,
+                    mainAction,
+                    size,
+                    status,
+                    statusAlignment,
+                    statusLabel,
+                    statusProps,
+                    title,
+                    titleProps
+                  }}
+                />
+                {children && (
+                  <View
+                    style={[
+                      withBodyPadding ? styles[`bodyPadding_${size}`] : styles[`withoutBodyPadding_${size}`],
+                      classNames?.childrenContainer ?? {}
+                    ]}
+                  >
+                    {children}
+                  </View>
+                )}
+              </View>
+            </InternalLoaderWrapper>
           </View>
-        </View>
-      </TouchableOpacity>
-      {!isEmpty(additionalMessage) && <AdditionalMessage {...additionalMessage} size={size} />}
-      {!isEmpty(bottomActions) && (
-        <BottomActions actions={bottomActions} bottomActionsVariant={bottomActionsVariant} />
-      )}
+        </TouchableOpacity>
+        {internalLoader && loading
+          ? null
+          : !isEmpty(additionalMessage) && <AdditionalMessage {...additionalMessage} size={size} />}
+        {internalLoader && loading
+          ? null
+          : !isEmpty(bottomActions) && (
+              <BottomActions actions={bottomActions} bottomActionsVariant={bottomActionsVariant} />
+            )}
+      </LoaderWrapper>
     </Surface>
   );
 };
@@ -150,6 +176,8 @@ UTActionCard.propTypes = {
     buttonGroupProps: shape({ colorTheme: string, shape: string }),
     variant: oneOf([HEADER_ACTIONS_VARIANTS.DEFAULT, HEADER_ACTIONS_VARIANTS.BUTTON_GROUP])
   }),
+  loading: bool,
+  loadingProps: object,
   mainAction: func,
   size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
   status: string,

package/lib/components/UTCuit/constants.js

@@ -0,0 +1,8 @@
+export const ID_CODE_REGEX = /(\d+)/gi;
+
+export const PREFIX_LENGTH = 2;
+export const DOCUMENT_LENGTH = 8;
+
+export const PREFIX_REGEX = /^[23]\d$/;
+
+export const TITLE = 'CUIT';

package/lib/components/UTCuit/index.js

@@ -0,0 +1,191 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { bool, func, oneOf, oneOfType, string } from 'prop-types';
+import { View } from 'react-native';
+
+import UTLabel from '../UTLabel';
+import UTTextInput from '../UTTextInput';
+
+import styles from './styles';
+import { ID_CODE_REGEX, PREFIX_LENGTH, DOCUMENT_LENGTH, TITLE } from './constants';
+
+const UTCuit = ({
+  blurOnSubmit,
+  defaultValue,
+  editable = true,
+  editableDocument = true,
+  formError,
+  onBlur,
+  onChange,
+  onFocus,
+  onSubmitEditing,
+  returnKeyType = 'done',
+  title,
+  value
+}) => {
+  const prefixRef = useRef();
+  const documentNumberRef = useRef();
+  const suffixRef = useRef();
+
+  const [documentNumber, setDocumentNumber] = useState('');
+  const [prefix, setPrefix] = useState('');
+  const [suffix, setSuffix] = useState('');
+
+  const valuesRef = useRef({ prefix: '', documentNumber: '', suffix: '' });
+  const isInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!isInitialized.current) {
+      const initialValue = value || defaultValue || '';
+      const code = initialValue.match(ID_CODE_REGEX);
+
+      let initialPrefix = '';
+      let initialDocNumber = '';
+      let initialSuffix = '';
+
+      if (code) {
+        if (code.length === 3) [initialPrefix, initialDocNumber, initialSuffix] = code;
+        else [initialDocNumber] = code;
+      }
+
+      const formattedDocumentNumber = !editableDocument
+        ? `${'0'.repeat(DOCUMENT_LENGTH - initialDocNumber.length)}${initialDocNumber}`
+        : initialDocNumber;
+
+      setDocumentNumber(formattedDocumentNumber);
+      setPrefix(initialPrefix);
+      setSuffix(initialSuffix);
+
+      valuesRef.current = {
+        prefix: initialPrefix,
+        documentNumber: formattedDocumentNumber,
+        suffix: initialSuffix
+      };
+
+      isInitialized.current = true;
+    }
+  }, [value, defaultValue, editableDocument]);
+
+  const changeDocumentNumber = newDocumentNumber => {
+    if (editableDocument) {
+      setDocumentNumber(newDocumentNumber);
+      valuesRef.current.documentNumber = newDocumentNumber;
+      if (onChange) {
+        onChange(`${valuesRef.current.prefix}-${newDocumentNumber}-${valuesRef.current.suffix}`);
+      }
+    }
+  };
+
+  const changePrefix = newPrefix => {
+    if (newPrefix.length === 1 && !['2', '3'].includes(newPrefix)) {
+      return;
+    }
+    if (newPrefix.length === 2 && !/^[23][0-9]$/.test(newPrefix)) {
+      return;
+    }
+
+    setPrefix(newPrefix);
+    valuesRef.current.prefix = newPrefix;
+    if (onChange) {
+      onChange(`${newPrefix}-${valuesRef.current.documentNumber}-${valuesRef.current.suffix}`);
+    }
+  };
+
+  const changeSuffix = newSuffix => {
+    setSuffix(newSuffix);
+    valuesRef.current.suffix = newSuffix;
+    if (onChange) {
+      onChange(`${valuesRef.current.prefix}-${valuesRef.current.documentNumber}-${newSuffix}`);
+    }
+  };
+
+  const handleBlur = () => {
+    if (onBlur) {
+      onBlur();
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <UTLabel variant="medium" style={styles.title}>
+        {title || TITLE}
+      </UTLabel>
+      <View style={styles.fieldContainer}>
+        <View style={styles.input}>
+          <UTTextInput
+            alwaysShowPlaceholder
+            blurOnSubmit={blurOnSubmit}
+            disabled={!editable}
+            error={!!formError && ' '}
+            inputRef={prefixRef}
+            maxLength={PREFIX_LENGTH}
+            onBlur={handleBlur}
+            onChange={changePrefix}
+            onFocus={onFocus}
+            placeholder="XX"
+            returnKeyType={returnKeyType}
+            type="numeric"
+            value={prefix}
+            version="V1"
+          />
+        </View>
+        <View style={styles.documentContainer}>
+          <UTTextInput
+            alwaysShowPlaceholder
+            blurOnSubmit={blurOnSubmit}
+            disabled={!editable || !editableDocument}
+            error={!!formError && ' '}
+            inputRef={documentNumberRef}
+            maxLength={DOCUMENT_LENGTH}
+            onBlur={handleBlur}
+            onChange={changeDocumentNumber}
+            onFocus={onFocus}
+            placeholder="XXXXXXXX"
+            returnKeyType={returnKeyType}
+            type="numeric"
+            value={documentNumber}
+            version="V1"
+          />
+        </View>
+        <View style={styles.input}>
+          <UTTextInput
+            alwaysShowPlaceholder
+            blurOnSubmit={blurOnSubmit}
+            disabled={!editable}
+            error={!!formError && ' '}
+            inputRef={suffixRef}
+            maxLength={1}
+            onBlur={handleBlur}
+            onChange={changeSuffix}
+            onFocus={onFocus}
+            onSubmitEditing={onSubmitEditing}
+            placeholder="X"
+            returnKeyType={returnKeyType}
+            type="numeric"
+            value={suffix}
+            version="V1"
+          />
+        </View>
+      </View>
+      <UTLabel colorTheme="error" variant="xsmall" style={styles.error}>
+        {formError || ''}
+      </UTLabel>
+    </View>
+  );
+};
+
+UTCuit.propTypes = {
+  blurOnSubmit: bool,
+  defaultValue: string,
+  editable: bool,
+  editableDocument: bool,
+  formError: oneOfType([string, bool]),
+  onBlur: func,
+  onChange: func.isRequired,
+  onFocus: func,
+  onSubmitEditing: func,
+  returnKeyType: oneOf(['done', 'go', 'next', 'search']),
+  title: string,
+  value: string
+};
+
+export default UTCuit;

package/lib/components/UTCuit/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'column'
+  },
+  title: {
+    marginBottom: 8
+  },
+  fieldContainer: {
+    alignItems: 'flex-end',
+    flexDirection: 'row',
+    marginTop: 6
+  },
+  documentContainer: {
+    flex: 2,
+    paddingHorizontal: 4
+  },
+  input: {
+    flex: 1
+  },
+  inputContainer: {
+    flex: 1
+  },
+  message: {
+    paddingTop: 15,
+    marginBottom: -25
+  },
+  error: {
+    marginBottom: 12,
+    marginTop: 12
+  }
+});

package/lib/components/UTSkeletonLoader/README.md

@@ -0,0 +1,285 @@
+# UTSkeletonLoader
+
+## Description
+
+`UTSkeletonLoader` is a flexible skeleton loading component that displays placeholder content while data is being loaded. It supports complex layouts with multiple rows, columns, and customizable skeleton items to match your content structure.
+
+## Props
+
+| Name      | Type     | Default | Description                                                                                                           |
+| --------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| alignment | string   |         | Alignment of skeleton items. One of: `left`, `right`, `center`, `spaceBetween`, `spaceAround`, `spaceEvenly`.        |
+| children  | node     |         | Content to display when `loading` is false.                                                                          |
+| count     | number   | 1       | Number of times to repeat the skeleton structure.                                                                     |
+| height    | number\|string |         | Global height for all skeleton items. Can be overridden by individual item height.                                   |
+| items     | array    | []      | Array defining the skeleton structure. See Items Structure section for details.                                       |
+| loading   | bool     | true    | Controls whether to show skeleton or children content.                                                                |
+| spacing   | number   | 8       | Spacing between skeleton items in pixels.                                                                             |
+| styles    | object   |         | Custom styles to apply to the component. Can contain styles for different parts of the skeleton.                     |
+| width     | number\|string |         | Global width for all skeleton items. Can be overridden by individual item width.                                     |
+
+## Items Structure
+
+The `items` prop defines the skeleton layout structure as a three-dimensional array:
+
+```
+items: Array<Array<Array<SkeletonItem>>>
+```
+
+- **First level**: Rows - each element represents a horizontal row
+- **Second level**: Columns - each element represents a vertical column within a row
+- **Third level**: Items - each element represents an individual skeleton item
+
+### SkeletonItem Object
+
+Each skeleton item is an object with the following properties:
+
+| Name      | Type     | Description                                                                     |
+| --------- | -------- | ------------------------------------------------------------------------------- |
+| height    | number\|string | Height of the skeleton item. Overrides global height.                          |
+| width     | number\|string | Width of the skeleton item. Overrides global width.                            |
+| alignment | string   | Alignment for this specific item. Overrides global alignment.                   |
+| style     | object   | Custom styles for this specific skeleton item.                                  |
+
+## Alignment Options
+
+The alignment can be one of the following values:
+
+- `left`: Aligns items to the left (flex-start)
+- `right`: Aligns items to the right (flex-end)
+- `center`: Centers items
+- `spaceBetween`: Distributes items with space between them
+- `spaceAround`: Distributes items with space around them
+- `spaceEvenly`: Distributes items with even space
+
+## Usage
+
+### Basic Example
+
+```jsx
+import React, { useState, useEffect } from 'react';
+import { UTSkeletonLoader, UTLabel } from '@widergy/mobile-ui';
+
+const BasicExample = () => {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    // Simulate API call
+    setTimeout(() => {
+      setData('Loaded content');
+      setLoading(false);
+    }, 2000);
+  }, []);
+
+  return (
+    <UTSkeletonLoader loading={loading}>
+      <UTLabel>{data}</UTLabel>
+    </UTSkeletonLoader>
+  );
+};
+
+export default BasicExample;
+```
+
+### Simple Skeleton with Custom Dimensions
+
+```jsx
+import React from 'react';
+import { UTSkeletonLoader } from '@widergy/mobile-ui';
+
+const SimpleExample = () => {
+  return (
+    <UTSkeletonLoader
+      loading={true}
+      width="50%"
+      height={24}
+      alignment="center"
+      count={3}
+      spacing={12}
+    >
+      <UTLabel>Content will appear here</UTLabel>
+    </UTSkeletonLoader>
+  );
+};
+
+export default SimpleExample;
+```
+
+### Complex Layout Example - Account Selector
+
+```jsx
+import React from 'react';
+import { UTSkeletonLoader } from '@widergy/mobile-ui';
+
+const AccountSelectorSkeleton = () => {
+  const accountSelectorItems = [
+    [
+      [{ height: 16, width: '100%' }], // Full width text line
+      [{ height: 18, width: 18 }]      // Small square (avatar/icon)
+    ],
+    [
+      [{ height: 12, width: '100%' }]  // Another full width text line
+    ]
+  ];
+
+  return (
+    <UTSkeletonLoader
+      loading={true}
+      items={accountSelectorItems}
+      spacing={0}
+    >
+      <UTLabel>Account Selector Content</UTLabel>
+    </UTSkeletonLoader>
+  );
+};
+
+export default AccountSelectorSkeleton;
+```
+
+### Grid Layout Example - Shortcuts
+
+```jsx
+import React from 'react';
+import { UTSkeletonLoader } from '@widergy/mobile-ui';
+
+const ShortcutsSkeleton = () => {
+  const shortcutsItems = [
+    [
+      [
+        { height: 38, width: 38 },  // Icon
+        { height: 8, width: 60 }    // Text below icon
+      ],
+      [
+        { height: 38, width: 38 },  // Icon
+        { height: 8, width: 60 }    // Text below icon
+      ],
+      [
+        { height: 38, width: 38 },  // Icon
+        { height: 8, width: 60 }    // Text below icon
+      ],
+      [
+        { height: 38, width: 38 },  // Icon
+        { height: 8, width: 60 }    // Text below icon
+      ]
+    ]
+  ];
+
+  return (
+    <UTSkeletonLoader
+      loading={true}
+      alignment="center"
+      items={shortcutsItems}
+    >
+      <UTLabel>Shortcuts Content</UTLabel>
+    </UTSkeletonLoader>
+  );
+};
+
+export default ShortcutsSkeleton;
+```
+
+### Card Layout Example
+
+```jsx
+import React from 'react';
+import { UTSkeletonLoader } from '@widergy/mobile-ui';
+
+const CardSkeleton = () => {
+  const cardItems = [
+    [
+      [{ height: 14, width: '100%' }], // Title
+      [{ height: 32, width: 32 }]      // Icon/Image
+    ],
+    [
+      [
+        { height: 19, width: '100%' },  // Main text
+        { height: 12, width: '100%' }   // Secondary text
+      ],
+      [{ height: 20, width: '100%' }]   // Action area
+    ]
+  ];
+
+  return (
+    <UTSkeletonLoader
+      loading={true}
+      alignment="center"
+      items={cardItems}
+    >
+      <UTLabel>Card Content</UTLabel>
+    </UTSkeletonLoader>
+  );
+};
+
+export default CardSkeleton;
+```
+
+### Multiple Skeletons
+
+```jsx
+import React from 'react';
+import { UTSkeletonLoader } from '@widergy/mobile-ui';
+
+const MultipleSkeleton = () => {
+  const listItemStructure = [
+    [
+      [{ height: 16, width: '80%' }],  // Title
+      [{ height: 40, width: 40 }]      // Avatar
+    ],
+    [
+      [{ height: 12, width: '60%' }]   // Subtitle
+    ]
+  ];
+
+  return (
+    <UTSkeletonLoader
+      loading={true}
+      items={listItemStructure}
+      count={5}  // Repeat the structure 5 times
+      spacing={16}
+    >
+      <UTLabel>List Content</UTLabel>
+    </UTSkeletonLoader>
+  );
+};
+
+export default MultipleSkeleton;
+```
+
+## Custom Styles
+
+The `styles` prop allows you to customize the appearance of different parts of the skeleton:
+
+```jsx
+const customStyles = {
+  container: {
+    backgroundColor: '#f5f5f5',
+    padding: 10
+  },
+  column: {
+    marginHorizontal: 5
+  },
+  item: {
+    borderRadius: 8
+  }
+};
+
+<UTSkeletonLoader
+  loading={true}
+  styles={customStyles}
+>
+  <UTLabel>Content</UTLabel>
+</UTSkeletonLoader>
+```
+
+## Best Practices
+
+1. **Match your content structure**: Design your skeleton items array to closely match the layout of your actual content.
+
+2. **Use appropriate dimensions**: Make skeleton item dimensions similar to your real content for a smoother transition.
+
+3. **Consider loading states**: Always provide meaningful content in the children prop for when loading is false.
+
+4. **Optimize for performance**: For repeated patterns, use the `count` prop instead of duplicating items in the array.
+
+5. **Test different screen sizes**: Ensure your skeleton layout works well across different device sizes by using percentage widths when appropriate.

package/lib/components/UTSkeletonLoader/components/SkeletonItem/constants.js

@@ -0,0 +1,18 @@
+export const DEFAULT_BACKGROUND_COLOR = '#E4E6EA';
+export const SKELETON_OPACITY = {
+  FULL: '',
+  LIGHT: '59'
+};
+
+export const START_ANIMATION_CONFIG = {
+  toValue: 1,
+  duration: 1000,
+  useNativeDriver: true
+};
+export const END_ANIMATION_CONFIG = {
+  toValue: 0,
+  duration: 1000,
+  useNativeDriver: true
+};
+
+export const INPUT_RANGE = [0, 1];

package/lib/components/UTSkeletonLoader/components/SkeletonItem/index.js

@@ -0,0 +1,58 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated } from 'react-native';
+import { number, object, oneOfType, string } from 'prop-types';
+
+import { mergeMultipleStyles } from '../../../../utils/styleUtils';
+
+import { END_ANIMATION_CONFIG, INPUT_RANGE, START_ANIMATION_CONFIG } from './constants';
+import { getOutputRange } from './utils';
+import ownStyles from './styles';
+
+const SkeletonItem = ({ alignment, height, style = {}, theme, width }) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(animatedValue, START_ANIMATION_CONFIG),
+        Animated.timing(animatedValue, END_ANIMATION_CONFIG)
+      ])
+    );
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [animatedValue]);
+
+  const backgroundColor = animatedValue.interpolate({
+    inputRange: INPUT_RANGE,
+    outputRange: getOutputRange(theme)
+  });
+
+  const styles = mergeMultipleStyles(ownStyles, style);
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton(alignment),
+        {
+          width,
+          height,
+          backgroundColor
+        }
+      ]}
+    />
+  );
+};
+
+SkeletonItem.propTypes = {
+  alignment: string,
+  height: oneOfType([number, string]),
+  style: object,
+  theme: object,
+  width: oneOfType([number, string])
+};
+
+export default SkeletonItem;

package/lib/components/UTSkeletonLoader/components/SkeletonItem/styles.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+import { getAlignSelf } from '../../utils';
+
+export default StyleSheet.create({
+  skeleton: alignment => ({
+    borderRadius: 4,
+    alignSelf: getAlignSelf(alignment)
+  })
+});

package/lib/components/UTSkeletonLoader/components/SkeletonItem/utils.js

@@ -0,0 +1,6 @@
+import { DEFAULT_BACKGROUND_COLOR, SKELETON_OPACITY } from './constants';
+
+export const getOutputRange = theme => [
+  `${theme?.Palette?.light?.['04'] || DEFAULT_BACKGROUND_COLOR}${SKELETON_OPACITY.FULL}`,
+  `${theme?.Palette?.light?.['04'] || DEFAULT_BACKGROUND_COLOR}${SKELETON_OPACITY.LIGHT}`
+];

package/lib/components/UTSkeletonLoader/constants.js

@@ -0,0 +1,8 @@
+export const DEFAULT_ITEM_PROPS = {
+  height: 16,
+  width: '100%'
+};
+
+export const DEFAULT_CONTENT = [[{ height: DEFAULT_ITEM_PROPS.height, width: DEFAULT_ITEM_PROPS.width }]];
+export const DEFAULT_SPACING = 8;
+export const DEFAULT_COUNT = 1;

package/lib/components/UTSkeletonLoader/index.js

@@ -0,0 +1,84 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { View } from 'react-native';
+import { string, node, number, bool, object, oneOfType, shape, oneOf, arrayOf } from 'prop-types';
+
+import { useTheme } from '../../theming';
+import { mergeMultipleStyles } from '../../utils/styleUtils';
+import { TEST_IDS } from '../../constants/testIds';
+
+import SkeletonItem from './components/SkeletonItem';
+import { getItemsToRender } from './utils';
+import { DEFAULT_COUNT, DEFAULT_ITEM_PROPS, DEFAULT_SPACING } from './constants';
+import ownStyles from './styles';
+
+const { skeletonLoader } = TEST_IDS;
+
+const UTSkeletonLoader = ({
+  alignment,
+  children,
+  count = DEFAULT_COUNT,
+  dataTestId = skeletonLoader,
+  height,
+  items = [],
+  loading = true,
+  spacing = DEFAULT_SPACING,
+  styles: customStyles = {},
+  width
+}) => {
+  const theme = useTheme();
+  const styles = mergeMultipleStyles(ownStyles, customStyles, theme?.UTSkeletonLoader);
+  const itemsToRender = getItemsToRender(items, count);
+
+  return loading ? (
+    <View style={styles.skeletonContainer} testID={dataTestId}>
+      {itemsToRender.map((row, rowIndex) => (
+        <View key={rowIndex} style={styles.container(alignment)}>
+          {row.map((column, colIndex) => (
+            <View key={colIndex} style={styles.column(colIndex, row, spacing)}>
+              {column.map((item, itemIndex) => (
+                <View key={itemIndex} style={styles.item(item, spacing)}>
+                  <SkeletonItem
+                    alignment={item?.alignment || alignment}
+                    height={height || item.height || DEFAULT_ITEM_PROPS.height}
+                    style={item.style}
+                    theme={theme}
+                    width={width || item.width || DEFAULT_ITEM_PROPS.width}
+                  />
+                </View>
+              ))}
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  ) : (
+    children
+  );
+};
+
+UTSkeletonLoader.propTypes = {
+  alignment: oneOf(['left', 'right', 'center', 'spaceBetween', 'spaceAround', 'spaceEvenly']),
+  children: node,
+  count: number,
+  dataTestId: string,
+  height: oneOfType([string, number]),
+  items: arrayOf(
+    arrayOf(
+      arrayOf(
+        shape({
+          height: oneOfType([string, number]),
+          width: oneOfType([string, number]),
+          alignment: oneOf(['left', 'right', 'center', 'spaceBetween', 'spaceAround', 'spaceEvenly']),
+          style: object
+        })
+      )
+    )
+  ),
+  loading: bool,
+  spacing: number,
+  styles: object,
+  width: oneOfType([string, number])
+};
+
+export default UTSkeletonLoader;

package/lib/components/UTSkeletonLoader/styles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+
+import { DEFAULT_ITEM_PROPS } from './constants';
+import { getAlignSelf } from './utils';
+
+export default StyleSheet.create({
+  container: alignment => ({
+    alignItems: getAlignSelf(alignment),
+    flexDirection: 'row',
+    justifyContent: getAlignSelf(alignment)
+  }),
+  column: (colIndex, row, spacing) => {
+    const hasPercentageWidth = row[colIndex].some(item =>
+      (item?.width || DEFAULT_ITEM_PROPS.width)?.includes?.('%')
+    );
+
+    return {
+      flex: hasPercentageWidth ? 1 : 0,
+      flexShrink: hasPercentageWidth ? 1 : 0,
+      marginRight: colIndex !== row.length - 1 ? spacing : 0
+    };
+  },
+  item: (item, spacing) => ({
+    marginBottom: spacing,
+    padding: item.margin || 4,
+    paddingBottom: item.marginBottom,
+    paddingLeft: item.marginLeft,
+    paddingRight: item.marginRight,
+    paddingTop: item.marginTop
+  })
+});

package/lib/components/UTSkeletonLoader/utils.js

@@ -0,0 +1,27 @@
+import isEmpty from 'lodash/isEmpty';
+
+import { DEFAULT_CONTENT } from './constants';
+
+export const getAlignSelf = alignment => {
+  switch (alignment) {
+    case 'left':
+      return 'flex-start';
+    case 'right':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+    case 'spaceBetween':
+      return 'space-between';
+    case 'spaceAround':
+      return 'space-around';
+    case 'spaceEvenly':
+      return 'space-evenly';
+    default:
+      return 'flex-start';
+  }
+};
+
+export const getItemsToRender = (items, count) => {
+  if (!isEmpty(items)) return Array.from({ length: count }, () => items).flat();
+  return Array.from({ length: count }, () => DEFAULT_CONTENT);
+};

package/lib/constants/testIds.js

@@ -1,6 +1,7 @@
 export const TEST_IDS = {
   modal: 'modal',
-  roundView: 'roundView'
+  roundView: 'roundView',
+  skeletonLoader: 'skeletonLoader'
 };
 
 export const TEST_ID_CONSTANTS = {

package/lib/index.js

@@ -44,6 +44,7 @@ export { default as UTButton } from './components/UTButton';
 export { default as UTButtonGroup } from './components/UTButtonGroup';
 export { default as UTCBUInput } from './components/UTCBUInput';
 export { default as UTCheckBox } from './components/UTCheckBox';
+export { default as UTCuit } from './components/UTCuit';
 export { default as UTCheckList } from './components/UTCheckList';
 export { default as UTDataCategory } from './components/UTDataCategory';
 export { default as UTDataElement } from './components/UTDataElement';
@@ -64,6 +65,7 @@ export { default as UTRoundView } from './components/UTRoundView';
 export { default as UTSearchField } from './components/UTSearchField';
 export { default as UTSelect } from './components/UTSelect';
 export { default as UTSelectableCard } from './components/UTSelectableCard';
+export { default as UTSkeletonLoader } from './components/UTSkeletonLoader';
 export { default as UTStatus } from './components/UTStatus';
 export { default as UTStatusMessage } from './components/UTStatusMessage';
 export { default as UTStepFeedback } from './components/UTStepFeedback';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.49.7",
+  "version": "1.50.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [