@widergy/mobile-ui 2.17.1 → 2.18.0

package/CHANGELOG.md

@@ -1,9 +1,25 @@
-## [2.17.1](https://github.com/widergy/mobile-ui/compare/v2.17.0...v2.17.1) (2026-06-05)
+# [2.18.0](https://github.com/widergy/mobile-ui/compare/v2.17.1...v2.18.0) (2026-06-07)
 
 
 ### Bug Fixes
 
-* [DIS-1103] ut date picker ([#507](https://github.com/widergy/mobile-ui/issues/507)) ([ffd6db3](https://github.com/widergy/mobile-ui/commit/ffd6db3c847dca170a5df955c1149a880c7f42cb))
+* fix ([81b84c4](https://github.com/widergy/mobile-ui/commit/81b84c4f673b19883b8030102a31d3ef3da3968b))
+* fix ([d86eab3](https://github.com/widergy/mobile-ui/commit/d86eab32c35d07cdafa14a24467d61311511c8a6))
+* fix ([1bafddb](https://github.com/widergy/mobile-ui/commit/1bafddbd5d45c300cfcba13f9b16a3edcc877332))
+* fixes ([424a166](https://github.com/widergy/mobile-ui/commit/424a1667af7df6a84524452b6e83d264b03013d4))
+* fixes ([edc2cda](https://github.com/widergy/mobile-ui/commit/edc2cdaa5a543e529c1549d6e0a4d03cf5efc0dc))
+
+
+### Features
+
+* [CX-2399] add V1 to UTLoading with new Spinner and LoaderWithLogo ([20c95f7](https://github.com/widergy/mobile-ui/commit/20c95f791209175e6c3bb4218af8689e1a9979ee))
+
+## [2.17.1](https://github.com/widergy/mobile-ui/compare/v2.17.0...v2.17.1) (2026-06-05)
+
+### Novedades y Mejoras
+
+* Se incorporó un nuevo selector de fechas para mobile con calendario visual y posibilidad de ingresar la fecha manualmente. Permite configurar rangos de fechas permitidas, diferentes tamaños y modos de visualización, además de soportar estados como deshabilitado, solo lectura y campos obligatorios con mensajes de ayuda o error. [#507](https://github.com/widergy/Energy-UI-Mobile/pull/507) [DIS-1103](https://widergy.atlassian.net/browse/DIS-1103)
+* Mejoras internas de la plataforma. [`7e0a800`](https://github.com/widergy/Energy-UI-Mobile/commit/7e0a800)
 
 # [2.17.0](https://github.com/widergy/mobile-ui/compare/v2.16.0...v2.17.0) (2026-06-03)
 

package/lib/components/UTLoading/README.md

@@ -1,39 +1,117 @@
 # UTLoading
 
-Wraps a component within a screen and displays a loading indicator until it's done loading. For example, if you have a screen with a component that requires data from an external source to render properly, you can wrap it with this component, and by providing the proper `loading` prop, it'll show a spinner until the process finishes.
+Envuelve un componente y muestra un indicador de carga mientras la prop `loading` es `true`. Soporta dos versiones: V0 (comportamiento original) y V1 (nuevo diseño con spinner SVG y loader con logo).
 
-## Props
+## Props comunes
 
-| NAME              | TYPE                | REQUIRED |          USED BY          | DESCRIPTION                                                                                                                                               |
-| ----------------- | ------------------- | -------- | :-----------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| children          | PropTypes.element   | Yes      | AnimatedCircles - Spinner | The component that you want to wrap until it's done loading                                                                                               |
-| loading           | PropTypes.bool      | Yes      | AnimatedCircles - Spinner | The boolean`loading` that you want the spinner to depend on                                                                                               |
-| color             | PropTypes.string    | No       | AnimatedCircles - Spinner | Color of spinner. Uses the theme's primary color by default                                                                                               |
-| size              | PropTypes.number    | No       |          Spinner          | The size of the spinner, defaults to`70`                                                                                                                  |
-| thickness         | PropTypes.number    | No       |          Spinner          | The thickness of the spinner, defaults to`3`                                                                                                              |
-| style             | ViewPropTypes.style | No       |          Spinner          | custom style applied to the spinner's container                                                                                                           |
-| message           | PropTypes.string    | No       |          Spinner          | A message to display below the spinner                                                                                                                    |
-| messageStyle      | ViewPropTypes.style | No       |          Spinner          | Custom style applied to the message                                                                                                                       |
-| Logo              | PropTypes.number    | No       |      AnimatedCircles      | Utility logo (png) shown above the animated circles.                                                                                                      |
-| useUtilityLoading | PropTypes.bool      | No       | AnimatedCircles - Spinner | Flag that determines whether to show the classic loader (spinner) or the new one (animated circles with utility logo).<br /> (_Default: classic loader_). |
+| Nombre            | Tipo                | Requerido | Descripción                                                                 |
+| ----------------- | ------------------- | --------- | --------------------------------------------------------------------------- |
+| loading           | bool                | Sí        | Controla si se muestra el indicador de carga                                |
+| version           | string              | No        | Versión del componente: `'V0'` (default) o `'V1'`                          |
+| useUtilityLoading | bool                | No        | En V0: muestra AnimatedCircles en lugar del Spinner. En V1: muestra LoaderWithLogo en lugar de NewSpinner |
 
-## Example
+## V0 — Comportamiento original (default)
+
+Cuando `useUtilityLoading` es `false` (default): spinner Material Design.
+Cuando `useUtilityLoading` es `true`: logo del cliente + tres círculos animados.
+
+### Props adicionales de V0
+
+| Nombre        | Tipo                | Usado por                   | Descripción                                      |
+| ------------- | ------------------- | --------------------------- | ------------------------------------------------ |
+| children      | node                | AnimatedCircles - Spinner   | Componente a mostrar cuando `loading` es `false` |
+| color         | string              | AnimatedCircles - Spinner   | Color del spinner                                |
+| Logo          | number              | AnimatedCircles             | Asset del logo de la utility (`require()`)       |
+| message       | string              | Spinner                     | Texto debajo del spinner                         |
+| messageStyle  | style               | Spinner                     | Estilo del texto                                 |
+| preventUnmount| bool                | Spinner                     | Mantiene el children montado durante la carga    |
+| size          | number              | Spinner                     | Tamaño del spinner (default: 70)                 |
+| style         | style               | Spinner                     | Estilo del contenedor                            |
+| thickness     | number              | Spinner                     | Grosor del spinner (default: 3)                  |
+
+## V1 — Nuevo diseño
+
+Cuando `useUtilityLoading` es `false` (default): **NewSpinner** — spinner SVG animado con Track + Arc redondeado.
+Cuando `useUtilityLoading` es `true`: **LoaderWithLogo** — logo SVG del cliente con animación de pulso y track con gradiente.
+
+### Props adicionales de V1 — NewSpinner
+
+| Nombre     | Tipo   | Descripción                                         |
+| ---------- | ------ | --------------------------------------------------- |
+| dataTestId | string | Test ID del contenedor (default: `UTLoading.spinner`) |
+| label      | string | Texto opcional debajo del spinner (ej: "Cargando...") |
+| size       | number | Tamaño del spinner en px (default: 72)              |
+| thickness  | number | Grosor del Track y Arc (default: 5)                 |
+
+### Props adicionales de V1 — LoaderWithLogo
+
+| Nombre     | Tipo        | Descripción                                                    |
+| ---------- | ----------- | -------------------------------------------------------------- |
+| dataTestId | string      | Test ID del contenedor (default: `UTLoading.loader`)           |
+| fullScreen | bool        | Si `true`, ocupa toda la pantalla con position absolute y z-index alto |
+| Logo       | elementType | Componente SVG del logo de la utility (importado vía react-native-svg-transformer) |
+| logoSize   | number      | Tamaño del logo en px (default: 56)                            |
+| size       | number      | Tamaño del track circular en px (default: 120)                 |
+| thickness  | number      | Grosor del track (default: 5)                                  |
+
+### Colores (override vía ThemeProvider)
+
+Los colores del V1 se configuran vía `theme.UTLoading`:
+
+| Token              | Default    | Descripción                          |
+| ------------------ | ---------- | ------------------------------------ |
+| `arcColor`         | `#0136E7`  | Color del arco del NewSpinner        |
+| `trackColor`       | `#E9EFFF`  | Color del track del NewSpinner       |
+| `gradientStart`    | `#285AFF`  | Color inicial del gradiente del Loader |
+| `gradientEnd`      | `#7AA0FF`  | Color final del gradiente del Loader |
+| `trackBackground`  | `#E9EFFF`  | Color del track de fondo del Loader  |
+
+## Activación desde la app (UtilityGO Office Mobile)
+
+```js
+// src/config/base/config.json
+"dashboard": {
+  "parameters": {
+    "newDashboardExperience": {
+      "parameters": {
+        "loading": { "enabled": false }
+      }
+    }
+  }
+}
+```
+
+```js
+// En cada pantalla
+const { enabled: useNewLoading } =
+  appConfig.dashboard?.parameters?.newDashboardExperience?.parameters?.loading || {};
+
+<UTLoading
+  version={useNewLoading ? 'V1' : 'V0'}
+  loading={isLoading}
+  Logo={UtilityLogo}
+  useUtilityLoading={useUtilityLoading}
+/>
+```
+
+## Ejemplo
 
 ```js
-import { Loading } from "@widergy/mobile-ui";
-
-  return (
-    <UTLabel>This component does not depend on the loader</UTLabel>
-    <UTLoading
-      loading={this.props.loading}
-      color="blue"
-      size={200}
-      thickness={20}
-      style={{backgroundColor: 'green'}}
-      message="This one does!"
-      messageStyle={{fontWeight: 'italic'}}
-    />
-      {your wrapped component goes here}
-    </UTLoading>
-  )
+import { UTLoading } from '@widergy/mobile-ui';
+import DemoLogo from 'config/utility/usersConfig/default/logo.svg';
+
+// V1 — Spinner nuevo
+<UTLoading version="V1" loading={isLoading} label="Cargando..." />
+
+// V1 — Loader con logo fullScreen
+<UTLoading
+  version="V1"
+  useUtilityLoading
+  fullScreen
+  loading={isLoading}
+  Logo={DemoLogo}
+/>
+
+// V0 — Spinner clásico (sin cambios)
+<UTLoading version="V0" loading={isLoading} message="Cargando..." />
 ```

package/lib/components/UTLoading/index.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import { bool } from 'prop-types';
+import { string } from 'prop-types';
 
-import AnimatedCircles from './components/AnimatedCircles';
-import Spinner from './components/Spinner';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
 
-const UTLoading = props => {
-  const { useUtilityLoading } = props || {};
-  return useUtilityLoading ? <AnimatedCircles {...props} /> : <Spinner {...props} />;
-};
+const VERSIONS = { V0, V1 };
 
-UTLoading.displayName = 'UTLoading';
+const UTLoading = ({ version = 'V0', ...props }) => {
+  const Component = VERSIONS[version] || V0;
+  return <Component {...props} />;
+};
 
 UTLoading.propTypes = {
-  useUtilityLoading: bool
+  version: string
 };
 
 export default UTLoading;

package/lib/components/UTLoading/{components → versions/V0/components}/AnimatedCircles/index.js

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, Image, View } from 'react-native';
 import { string, bool, node, number } from 'prop-types';
 
-import { useTheme } from '../../../../theming';
+import { useTheme } from '../../../../../../theming';
 
 import {
   OPACITY_DURATION,

package/lib/components/UTLoading/{components → versions/V0/components}/AnimatedCircles/styles.js

@@ -1,27 +1,30 @@
 import { StyleSheet } from 'react-native';
 
-import { verticalScale } from '../../../../utils/scaleUtils';
+import { verticalScale } from '../../../../../../utils/scaleUtils';
+
+const WHITE = '#ffffff';
+const BLACK = '#000000';
 
 export default StyleSheet.create({
+  circle: {
+    backgroundColor: BLACK,
+    borderRadius: 10,
+    height: 16,
+    margin: 4,
+    width: 16
+  },
+  circlesContainer: {
+    flexDirection: 'row',
+    marginTop: 50
+  },
   container: {
     alignItems: 'center',
-    backgroundColor: '#ffffff',
+    backgroundColor: WHITE,
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
     width: '100%'
   },
-  circlesContainer: {
-    marginTop: 50,
-    flexDirection: 'row'
-  },
-  circle: {
-    backgroundColor: '#000000',
-    borderRadius: 10,
-    height: 16,
-    margin: 4,
-    width: 16
-  },
   imageStyle: {
     height: verticalScale(40)
   }

package/lib/components/UTLoading/{components → versions/V0/components}/Spinner/index.js

@@ -1,9 +1,9 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { number, string, bool } from 'prop-types';
 import { View } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
-import Loading from '../../../Loading';
+import Loading from '../../../../../Loading';
 
 import styles from './styles';
 
@@ -19,7 +19,7 @@ const Spinner = ({
   thickness
 }) => {
   return (
-    <Fragment>
+    <>
       {!!loading && (
         <Loading
           style={[styles.spinner, style]}
@@ -36,7 +36,7 @@ const Spinner = ({
       ) : (
         !loading && children
       )}
-    </Fragment>
+    </>
   );
 };
 

package/lib/components/UTLoading/{components → versions/V0/components}/Spinner/styles.js

@@ -4,8 +4,5 @@ export default StyleSheet.create({
   spinner: {
     alignSelf: 'center',
     justifyContent: 'center'
-  },
-  displayNone: {
-    display: 'none'
   }
 });

package/lib/components/UTLoading/versions/V0/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { bool } from 'prop-types';
+
+import AnimatedCircles from './components/AnimatedCircles';
+import Spinner from './components/Spinner';
+
+const UTLoading = props => {
+  const { useUtilityLoading } = props || {};
+  return useUtilityLoading ? <AnimatedCircles {...props} /> : <Spinner {...props} />;
+};
+
+UTLoading.displayName = 'UTLoading';
+
+UTLoading.propTypes = {
+  useUtilityLoading: bool
+};
+
+export default UTLoading;

package/lib/components/UTLoading/versions/V1/components/LoaderWithLogo/index.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { bool, elementType, node, number, string } from 'prop-types';
+
+import UTLabel from '../../../../../UTLabel';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+
+import { ownStyles } from './theme';
+
+const { UTLoading: loadingIds } = TEST_IDS;
+
+const LoaderWithLogo = ({
+  children,
+  dataTestId = loadingIds.loader,
+  fullScreen = false,
+  loading,
+  LoaderRing,
+  Logo,
+  logoSize,
+  message,
+  rotationDuration,
+  size
+}) => {
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotation, {
+        duration: rotationDuration,
+        easing: Easing.linear,
+        toValue: 1,
+        useNativeDriver: false
+      })
+    ).start();
+  }, [rotation, rotationDuration]);
+
+  if (!loading) return children ?? null;
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+
+  const containerStyle = fullScreen ? ownStyles.fullScreen : ownStyles.container;
+
+  return (
+    <View style={containerStyle} testID={dataTestId}>
+      <View style={[ownStyles.ringWrapper, { height: size, width: size }]}>
+        {!!LoaderRing && (
+          <Animated.View style={[ownStyles.ringAbsolute, { transform: [{ rotate: spin }] }]}>
+            <LoaderRing height={size} width={size} />
+          </Animated.View>
+        )}
+        {!!Logo && (
+          <View style={ownStyles.logoWrapper}>
+            <Logo height={logoSize} width={logoSize} />
+          </View>
+        )}
+      </View>
+      {!!message && (
+        <UTLabel style={ownStyles.message} variant="small">
+          {message}
+        </UTLabel>
+      )}
+    </View>
+  );
+};
+
+LoaderWithLogo.displayName = 'UTLoading';
+
+LoaderWithLogo.propTypes = {
+  children: node,
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  LoaderRing: elementType,
+  Logo: elementType,
+  logoSize: number,
+  message: string,
+  rotationDuration: number,
+  size: number
+};
+
+export default LoaderWithLogo;

package/lib/components/UTLoading/versions/V1/components/LoaderWithLogo/theme.js

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+
+const WHITE = '#ffffff';
+
+export const ownStyles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: WHITE,
+    flex: 1,
+    justifyContent: 'center',
+    width: '100%'
+  },
+  fullScreen: {
+    alignItems: 'center',
+    backgroundColor: WHITE,
+    bottom: 0,
+    elevation: 9999,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    zIndex: 9999
+  },
+  logoWrapper: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+  },
+  message: {
+    marginTop: 12,
+    textAlign: 'center'
+  },
+  ringAbsolute: {
+    position: 'absolute'
+  },
+  ringWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/lib/components/UTLoading/versions/V1/components/Spinner/constants.js

@@ -0,0 +1,5 @@
+export const SPINNER_SIZE = 72;
+export const SPINNER_THICKNESS = 5;
+export const SPINNER_ROTATION_DURATION = 1000;
+export const ARC_SWEEP_DEGREES = 270;
+export const GRADIENT_ID = 'spinnerGrad';

package/lib/components/UTLoading/versions/V1/components/Spinner/index.js

@@ -0,0 +1,143 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import { arrayOf, bool, node, number, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+import { Circle, Defs, LinearGradient, Stop, Svg } from 'react-native-svg';
+
+import { useTheme } from '../../../../../../theming';
+import UTLabel from '../../../../../UTLabel';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+
+import {
+  ARC_SWEEP_DEGREES,
+  GRADIENT_ID,
+  SPINNER_ROTATION_DURATION,
+  SPINNER_SIZE,
+  SPINNER_THICKNESS
+} from './constants';
+import {
+  getArcColor,
+  getRadius,
+  getSpinnerSize,
+  getSpinnerThickness,
+  getTrackColor,
+  ownStyles
+} from './theme';
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+
+const { UTLoading: loadingIds } = TEST_IDS;
+
+const renderArc = (spinnerSize, radius, arcColor, spinnerThickness, arcLength, circumference, colors) => {
+  const isGradient = colors?.length === 2;
+  return (
+    <>
+      {isGradient && (
+        <Defs>
+          <LinearGradient id={GRADIENT_ID} x1="0" y1="0" x2="1" y2="0">
+            <Stop offset="0" stopColor={colors[0]} />
+            <Stop offset="1" stopColor={colors[1]} />
+          </LinearGradient>
+        </Defs>
+      )}
+      <Circle
+        cx={spinnerSize / 2}
+        cy={spinnerSize / 2}
+        r={radius}
+        stroke={isGradient ? `url(#${GRADIENT_ID})` : arcColor}
+        strokeWidth={spinnerThickness}
+        strokeLinecap="round"
+        strokeDasharray={`${arcLength} ${circumference - arcLength}`}
+        strokeDashoffset={0}
+        fill="none"
+      />
+    </>
+  );
+};
+
+const Spinner = ({
+  children,
+  colors,
+  dataTestId = loadingIds.spinner,
+  loading,
+  message,
+  preventUnmount,
+  size = SPINNER_SIZE,
+  style,
+  thickness = SPINNER_THICKNESS
+}) => {
+  const theme = useTheme();
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotation, {
+        duration: SPINNER_ROTATION_DURATION,
+        easing: Easing.linear,
+        toValue: 1,
+        useNativeDriver: true
+      })
+    ).start();
+  }, [rotation]);
+
+  if (!loading && !preventUnmount) return children ?? null;
+
+  const spinnerSize = getSpinnerSize(size);
+  const spinnerThickness = getSpinnerThickness(thickness);
+  const radius = getRadius(size, thickness);
+  const circumference = 2 * Math.PI * radius;
+  const arcLength = (ARC_SWEEP_DEGREES / 360) * circumference;
+  const trackColor = getTrackColor(theme);
+  const arcColor = colors?.length >= 1 ? colors[0] : getArcColor(theme);
+
+  const spin = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  const spinnerContent = (
+    <View style={[ownStyles.container, style]} testID={dataTestId}>
+      <AnimatedSvg width={spinnerSize} height={spinnerSize} style={{ transform: [{ rotate: spin }] }}>
+        <Circle
+          cx={spinnerSize / 2}
+          cy={spinnerSize / 2}
+          r={radius}
+          stroke={trackColor}
+          strokeWidth={spinnerThickness}
+          fill="none"
+        />
+        {renderArc(spinnerSize, radius, arcColor, spinnerThickness, arcLength, circumference, colors)}
+      </AnimatedSvg>
+      {!!message && (
+        <UTLabel style={ownStyles.message} variant="small">
+          {message}
+        </UTLabel>
+      )}
+    </View>
+  );
+
+  if (preventUnmount) {
+    return (
+      <>
+        {!!loading && spinnerContent}
+        {/* eslint-disable-next-line react-native/no-inline-styles */}
+        <View style={{ display: loading ? 'none' : 'flex' }}>{children}</View>
+      </>
+    );
+  }
+
+  return spinnerContent;
+};
+
+Spinner.displayName = 'UTLoading';
+
+Spinner.propTypes = {
+  children: node,
+  colors: arrayOf(string),
+  dataTestId: string,
+  loading: bool,
+  message: string,
+  preventUnmount: bool,
+  style: ViewPropTypes.style,
+  size: number,
+  thickness: number
+};
+
+export default Spinner;

package/lib/components/UTLoading/versions/V1/components/Spinner/theme.js

@@ -0,0 +1,23 @@
+import { SPINNER_SIZE, SPINNER_THICKNESS } from './constants';
+
+export const ownStyles = {
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  message: {
+    marginTop: 12,
+    textAlign: 'center'
+  }
+};
+
+export const getSpinnerSize = size => size || SPINNER_SIZE;
+
+export const getSpinnerThickness = thickness => thickness || SPINNER_THICKNESS;
+
+export const getRadius = (size, thickness) => (getSpinnerSize(size) - getSpinnerThickness(thickness)) / 2;
+
+export const getArcColor = theme => theme?.UTLoading?.arcColor || theme?.colors?.primary;
+
+export const getTrackColor = theme => theme?.UTLoading?.trackColor || theme?.Palette?.light?.['04'];

package/lib/components/UTLoading/versions/V1/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { arrayOf, bool, elementType, node, number, string } from 'prop-types';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
+
+import LoaderWithLogo from './components/LoaderWithLogo';
+import Spinner from './components/Spinner';
+
+const UTLoading = props => {
+  const { useUtilityLoading } = props || {};
+  return useUtilityLoading ? <LoaderWithLogo {...props} /> : <Spinner {...props} />;
+};
+
+UTLoading.displayName = 'UTLoading';
+
+UTLoading.propTypes = {
+  children: node,
+  colors: arrayOf(string),
+  dataTestId: string,
+  fullScreen: bool,
+  loading: bool,
+  LoaderRing: elementType,
+  Logo: elementType,
+  logoSize: number,
+  message: string,
+  preventUnmount: bool,
+  rotationDuration: number,
+  size: number,
+  style: ViewPropTypes.style,
+  thickness: number,
+  useUtilityLoading: bool
+};
+
+export default UTLoading;

package/lib/constants/testIds.js

@@ -19,6 +19,7 @@ export const TEST_ID_CONSTANTS = {
   label: 'label',
   left: 'left',
   list: 'list',
+  loader: 'loader',
   logo: 'logo',
   modal: 'modal',
   option: 'option',
@@ -30,6 +31,7 @@ export const TEST_ID_CONSTANTS = {
   searchInput: 'searchInput',
   secondaryAction: 'secondaryAction',
   selectAll: 'selectAll',
+  spinner: 'spinner',
   subLabel: 'subLabel',
   subtitle: 'subtitle',
   tagline: 'tagline',
@@ -59,6 +61,10 @@ export const TEST_IDS = {
   },
   roundView: 'roundView',
   skeletonLoader: 'skeletonLoader',
+  UTLoading: {
+    loader: `UTLoading.${TEST_ID_CONSTANTS.loader}`,
+    spinner: `UTLoading.${TEST_ID_CONSTANTS.spinner}`
+  },
   topbar: {
     goBack: 'topbar.goBack',
     title: 'topbar.title'

package/package.json

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