@widergy/mobile-ui 1.51.0 → 2.0.1

package/lib/components/UTTopbar/index.js

@@ -1,7 +1,6 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { BackHandler, View } from 'react-native';
 import { number } from 'prop-types';
-import { useFocusEffect } from '@react-navigation/native';
 
 import { TEST_IDS } from '../../constants/testIds';
 import UTButton from '../UTButton';
@@ -25,8 +24,8 @@ const UTTopbar = ({
 }) => {
   const ownTheme = theme.UTWorkflowContainer?.topbar?.[colorTheme];
 
-  // If you are trying to render this in the example of mobile-ui, comment this useFocusEffect block or it will crash
-  useFocusEffect(
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(
     useCallback(() => {
       const onBackPress = () => {
         goBack();
@@ -38,7 +37,6 @@ const UTTopbar = ({
       return () => subscription.remove();
     }, [goBack])
   );
-  // up to here
 
   return (
     <View>

package/lib/components/UTTracker/components/Step/styles.js

@@ -10,13 +10,15 @@ export const getVariantStyles = theme => ({
       borderColor: theme.Palette.error['04']
     },
     activeInnerContainer: {
-      backgroundColor: theme.Palette.error['04']
+      backgroundColor: theme.Palette.error['04'],
+      borderRadius: OVAL_SIZE / 4
     },
     completedContainer: {
       borderColor: theme.Palette.error['04']
     },
     completedInnerContainer: {
-      backgroundColor: theme.Palette.error['04']
+      backgroundColor: theme.Palette.error['04'],
+      borderRadius: OVAL_SIZE / 4
     }
   },
   [STANDARD]: {
@@ -24,13 +26,15 @@ export const getVariantStyles = theme => ({
       borderColor: theme.Palette.accent['04']
     },
     activeInnerContainer: {
-      backgroundColor: theme.Palette.accent['04']
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: OVAL_SIZE / 4
     },
     completedContainer: {
       borderColor: theme.Palette.accent['04']
     },
     completedInnerContainer: {
-      backgroundColor: theme.Palette.accent['04']
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: OVAL_SIZE / 4
     }
   }
 });

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

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { ScrollView, View, KeyboardAvoidingView, Keyboard } from 'react-native';
 import { number, func, shape, bool, string, element, oneOfType, any, objectOf } from 'prop-types';
 import { merge } from 'lodash';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../../../theming';
 import UTHeader from '../../../UTHeader';
@@ -17,6 +16,15 @@ import BottomActions from './components/BottomActions';
 import ActionButtonPropTypes from './components/BottomActions/components/ActionButton/types';
 import { MessagePropTypes, SummaryPropTypes } from './types';
 
+let useSafeAreaInsets;
+try {
+  // eslint-disable-next-line no-eval, global-require
+  const safeArea = require('react-native-safe-area-context');
+  useSafeAreaInsets = safeArea?.useSafeAreaInsets;
+} catch (e) {
+  useSafeAreaInsets = undefined;
+}
+
 const UTWorkflowContainer = ({
   banner,
   children,
@@ -39,9 +47,10 @@ const UTWorkflowContainer = ({
   title,
   topbar,
   useMarkdown,
-  wizardConfig
+  wizardConfig,
+  topSafeAreaDisabled = false
 }) => {
-  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
+  const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets?.() || {};
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => () => onExit?.(), []);
 
@@ -65,7 +74,12 @@ const UTWorkflowContainer = ({
 
   return (
     <KeyboardAvoidingView behavior={IS_IOS ? 'padding' : ''} style={themedStyles.layoutContainer}>
-      <View style={[themedStyles.container, topbar && themedStyles.topSafeArea(topSafeArea)]}>
+      <View
+        style={[
+          themedStyles.container,
+          topbar && !topSafeAreaDisabled && themedStyles.topSafeArea(topSafeArea)
+        ]}
+      >
         {topbar && <UTTopbar {...{ currentStage, currentStep, stages, stepsCount, theme, topbar }} />}
         <ScrollView
           contentContainerStyle={themedStyles.content}
@@ -129,6 +143,7 @@ UTWorkflowContainer.propTypes = {
   tagline: string,
   title: oneOfType([string, element]),
   topbar: TopbarPropTypes,
+  topSafeAreaDisabled: bool,
   useMarkdown: bool,
   wizardConfig: shape({
     variant: string,

package/lib/reactotronConfig.js

@@ -1,7 +1,40 @@
-import Reactotron from 'reactotron-react-native';
+/* eslint-disable import/no-extraneous-dependencies */
+/*
+  Reactotron opcional: no importamos el paquete directamente para evitar fallos
+  cuando no está instalado en el consumidor. Si el consumidor quiere usarlo,
+  puede exponer una instancia en un global llamado REACTOTRON antes de cargar la lib.
+*/
 
-const configureReactotron = () => {
-  Reactotron.configure().useReactNative().connect();
+const configureReactotron = host => {
+  let g;
+  if (typeof global !== 'undefined') g = global;
+  else if (typeof window !== 'undefined') g = window;
+  const Reactotron = g && g.REACTOTRON ? g.REACTOTRON : null;
+
+  if (!Reactotron) {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      // eslint-disable-next-line no-console
+      console.log('[Reactotron] no disponible; se omite configuración');
+    }
+    return;
+  }
+  const config = host ? { host } : undefined;
+  Reactotron.configure(config).useReactNative().connect();
+  if (typeof __DEV__ !== 'undefined' && __DEV__) {
+    // Limpia la timeline y deja un rastro en consola/Reactotron
+    try {
+      Reactotron.clear?.();
+    } catch (err) {
+      // noop
+    }
+    // eslint-disable-next-line no-console
+    console.log(`[Reactotron] connect -> host=${host ?? 'default'}`);
+    try {
+      Reactotron.log?.(`Reactotron connected -> host=${host ?? 'default'}`);
+    } catch (err) {
+      // noop
+    }
+  }
 };
 
 export default configureReactotron;

package/lib/utils/fileUtils.js/index.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-unresolved
-import ImageResizer from '@bam.tech/react-native-image-resizer';
+import * as ExpoImageManipulator from 'expo-image-manipulator';
 
 import { IS_IOS } from '../platformUtils/constants';
 
@@ -36,14 +35,20 @@ export const retrieveFile = async (uri, type) => {
   let blob;
 
   if (type ? type.includes('image') : isImageByUri(uri)) {
-    const resizedImage = await ImageResizer.createResizedImage(
-      uriToUse,
-      IMG_SIZE,
-      IMG_SIZE,
-      'JPEG',
-      IMG_QUALITY
-    );
-    blob = await uriToBlob(resizedImage.uri);
+    if (ExpoImageManipulator?.manipulateAsync) {
+      try {
+        const actions = [{ resize: { width: IMG_SIZE, height: IMG_SIZE } }];
+        const options = {
+          compress: IMG_QUALITY / 100,
+          format: ExpoImageManipulator?.SaveFormat?.JPEG ?? 'jpeg',
+          base64: false
+        };
+        const result = await ExpoImageManipulator.manipulateAsync(uri, actions, options);
+        blob = await uriToBlob(result.uri);
+      } catch (err) {
+        blob = await uriToBlob(uriToUse);
+      }
+    }
   } else {
     blob = await uriToBlob(uriToUse);
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.51.0",
+  "version": "2.0.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -23,11 +23,9 @@
     "prepare": "husky install"
   },
   "peerDependencies": {
-    "@bam.tech/react-native-image-resizer": "^3.0.7",
     "prop-types": "*",
     "react": "*",
     "react-native": "*",
-    "react-native-document-picker": "^9.0.1",
     "react-native-image-picker": "^5.0.0",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pager-view": "^6.2.0",
@@ -35,22 +33,26 @@
     "react-native-vector-icons": "^10.0.0"
   },
   "dependencies": {
-    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
     "@react-navigation/native": "^6.1.9",
-    "@tabler/icons-react-native": "^3.3.0",
+    "@tabler/icons-react-native": "^3.34.1",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
-    "deprecated-react-native-prop-types": "^4.2.1",
+    "deprecated-react-native-prop-types": "^5.0.0",
+    "expo-document-picker": "^13.1.6",
+    "expo-image-manipulator": "^13.1.7",
+    "expo-image-picker": "^16.1.4",
+    "invariant": "^2.2.4",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "pdf-lib": "^1.17.1",
     "react-native-collapsible": "^1.6.1",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-markdown-display": "^7.0.0-alpha.2",
-    "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.0",
-    "react-native-safe-area-context": "^4.5.0",
-    "react-native-svg": "^13.0.0",
+    "react-native-modal": "^13.0.2",
+    "react-native-pager-view": "^6.8.0",
+    "react-native-safe-area-context": "^5.2.0",
+    "react-native-svg": "^15.11.2",
     "react-native-uuid": "^2.0.3"
   },
   "devDependencies": {