@solucx/react-native-solucx-widget 0.1.14 → 0.1.16

package/README.intern.md

@@ -17,6 +17,7 @@ O SoluCX Widget oferece quatro modos de renderização flexíveis para integraç
 
 - [`SoluCXWidget.tsx`](src/SoluCXWidget.tsx) - Componente principal
 - [`useWidgetState.ts`](src/hooks/useWidgetState.ts) - Hook para gerenciamento de estado
+- [`useWidgetHeight.ts`](src/hooks/useWidgetHeight.ts) - Hook para gerenciamento de altura (dinâmica/fixa)
 - [`WidgetEventService`](src/services/widgetEventService.ts) - Serviço de eventos
 - [`StorageService`](src/services/storage.ts) - Persistência local
 
@@ -30,7 +31,9 @@ src/
 │   ├── InlineWidget.tsx       # Widget inline
 │   └── OverlayWidget.tsx      # Widget overlay (top/bottom)
 ├── hooks/                     # Hooks personalizados
-│   └── useWidgetState.ts      # Estado do widget
+│   ├── useWidgetState.ts      # Estado do widget
+│   ├── useWidgetHeight.ts     # Gerenciamento de altura (dinâmica/fixa)
+│   └── useHeightAnimation.ts  # Animação de altura
 ├── services/                  # Serviços
 │   ├── widgetEventService.ts  # Gerenciamento de eventos
 │   └── storage.ts             # Persistência de dados
@@ -72,20 +75,20 @@ import { SoluCXWidget } from 'solucx_widget';
 export default function MyComponent() {
   return (
     <SoluCXWidget
-      soluCXKey="sua-chave-solucx"
-      type="bottom" // 'top' | 'bottom' | 'modal' | 'inline'
+      soluCXKey='sua-chave-solucx'
+      type='bottom' // 'top' | 'bottom' | 'modal' | 'inline'
       data={{
-        journey: "nome_da_jornada",
-        name: "Nome do Cliente",
-        email: "cliente@email.com",
-        phone: "11999999999",
-        store_id: "1",
-        employee_id: "1",
+        journey: 'nome_da_jornada',
+        name: 'Nome do Cliente',
+        email: 'cliente@email.com',
+        phone: '11999999999',
+        store_id: '1',
+        employee_id: '1',
         amount: 100,
-        param_REGIAO: "SUDESTE"
+        param_REGIAO: 'SUDESTE'
       }}
-      options={{ 
-        height: 400 
+      options={{
+        height: 400
       }}
     />
   );
@@ -98,17 +101,17 @@ export default function MyComponent() {
 
 ```typescript
 interface SoluCXWidgetProps {
-  soluCXKey: string;           // Chave de autenticação SoluCX
-  type: WidgetType;            // Modo de renderização
-  data: WidgetData;            // Dados do cliente/transação
-  options: WidgetOptions;      // Configurações do widget
+  soluCXKey: string; // Chave de autenticação SoluCX
+  type: WidgetType; // Modo de renderização
+  data: WidgetData; // Dados do cliente/transação
+  options: WidgetOptions; // Configurações do widget
 }
 ```
 
 ### Tipos de Widget
 
 ```typescript
-type WidgetType = "bottom" | "top" | "inline" | "modal";
+type WidgetType = 'bottom' | 'top' | 'inline' | 'modal';
 ```
 
 ### Dados do Widget
@@ -118,14 +121,14 @@ interface WidgetData {
   // Identificadores
   transaction_id?: string;
   customer_id?: string;
-  
+
   // Dados do cliente
   name?: string;
   email?: string;
   phone?: string;
   birth_date?: string;
   document?: string;
-  
+
   // Dados da transação
   store_id?: string;
   store_name?: string;
@@ -133,7 +136,7 @@ interface WidgetData {
   employee_name?: string;
   amount?: number;
   score?: number;
-  
+
   // Parâmetros customizados
   journey?: string;
   [key: string]: string | number | undefined;
@@ -144,15 +147,44 @@ interface WidgetData {
 
 ```typescript
 interface WidgetOptions {
-  height?: number;             // Altura
-  retry?: {                    // Configuração de retry
-    attempts?: number;         // Número de tentativas
-    interval?: number;         // Intervalo entre tentativas
+  height?: number; // Altura fixa em pontos (não pixels)
+  // Se não fornecido: altura dinâmica baseada em eventos de resize
+  // Se fornecido: altura fixa para todos os tipos de widget
+  retry?: {
+    // Configuração de retry
+    attempts?: number; // Número de tentativas
+    interval?: number; // Intervalo entre tentativas (ms)
   };
-  waitDelayAfterRating?: number; // Delay após avaliação
+  waitDelayAfterRating?: number; // Delay após avaliação (ms)
 }
 ```
 
+**⚙️ Gerenciamento de Altura:**
+
+O widget possui dois modos de altura:
+
+1. **Altura Dinâmica (padrão)**: Quando `height` não é fornecido, o widget se ajusta automaticamente através de eventos `FORM_RESIZE` do conteúdo. Funciona para todos os tipos (`bottom`, `top`, `inline`, `modal`).
+
+2. **Altura Fixa**: Quando `height` é especificado, o valor é fixo e eventos de resize são ignorados. Funciona para todos os tipos de widget.
+
+```tsx
+// Altura dinâmica - se adapta ao conteúdo
+<SoluCXWidget
+  type="bottom"
+  options={{}}  // height não especificado
+  {...props}
+/>
+
+// Altura fixa de 400 pontos
+<SoluCXWidget
+  type="modal"
+  options={{ height: 400 }}  // altura fixa
+  {...props}
+/>
+```
+
+**⚠️ Importante**: O valor de `height` é sempre em **pontos** (points), não pixels, seguindo o padrão do React e React Native. O sistema operacional converte automaticamente para pixels considerando a densidade da tela do dispositivo.
+
 ## 🔄 Sistema de Eventos
 
 O widget comunica através de mensagens WebView bidirecionais:
@@ -160,15 +192,15 @@ O widget comunica através de mensagens WebView bidirecionais:
 ### Eventos Suportados
 
 ```typescript
-type EventKey = 
-  | "FORM_OPENED"           // Widget foi aberto
-  | "FORM_CLOSE"            // Usuário fechou o widget  
-  | "FORM_ERROR"            // Erro no carregamento
-  | "FORM_RESIZE"           // Widget redimensionado
-  | "FORM_PAGECHANGED"      // Mudança de página
-  | "QUESTION_ANSWERED"     // Pergunta respondida
-  | "FORM_COMPLETED"        // Formulário concluído
-  | "FORM_PARTIALCOMPLETED" // Completado parcialmente
+type EventKey =
+  | 'FORM_OPENED' // Widget foi aberto
+  | 'FORM_CLOSE' // Usuário fechou o widget
+  | 'FORM_ERROR' // Erro no carregamento
+  | 'FORM_RESIZE' // Widget redimensionado
+  | 'FORM_PAGECHANGED' // Mudança de página
+  | 'QUESTION_ANSWERED' // Pergunta respondida
+  | 'FORM_COMPLETED' // Formulário concluído
+  | 'FORM_PARTIALCOMPLETED'; // Completado parcialmente
 ```
 
 ### Tratamento de Eventos
@@ -177,9 +209,9 @@ Os eventos são processados automaticamente pelo [`WidgetEventService`](src/serv
 
 ```typescript
 const eventService = new WidgetEventService(
-  setIsWidgetVisible,  // Função para controlar visibilidade
-  resize,              // Função para redimensionar
-  open                 // Função para abrir widget
+  setIsWidgetVisible, // Função para controlar visibilidade
+  resize, // Função para redimensionar
+  open // Função para abrir widget
 );
 ```
 
@@ -195,10 +227,10 @@ O widget utiliza [`AsyncStorage`](@react-native-async-storage/async-storage) par
 
 ```typescript
 interface WidgetSamplerLog {
-  attempts: number;      // Número de tentativas
-  lastAttempt: number;   // Timestamp da última tentativa
-  lastRating: number;    // Timestamp da última avaliação
-  lastParcial: number;   // Timestamp do último parcial
+  attempts: number; // Número de tentativas
+  lastAttempt: number; // Timestamp da última tentativa
+  lastRating: number; // Timestamp da última avaliação
+  lastParcial: number; // Timestamp do último parcial
 }
 ```
 
@@ -211,10 +243,10 @@ Cada tipo de widget possui estilos específicos definidos em [`widgetStyles.ts`]
 ```typescript
 export const getWidgetStyles = (type: WidgetType) => {
   const styleMap = {
-    'bottom': { container: styles.wrapper, content: styles.bottom },
-    'top': { container: styles.wrapper, content: styles.top },
-    'inline': { container: styles.inlineWrapper, content: styles.inline },
-    'modal': { container: styles.wrapper, content: styles.inline }
+    bottom: { container: styles.wrapper, content: styles.bottom },
+    top: { container: styles.wrapper, content: styles.top },
+    inline: { container: styles.inlineWrapper, content: styles.inline },
+    modal: { container: styles.wrapper, content: styles.inline }
   };
 
   return styleMap[type] || styleMap.bottom;
@@ -237,11 +269,11 @@ O [`urlUtils.ts`](src/utils/urlUtils.ts) gerencia a construção de URLs da pesq
 export function buildWidgetURL(key: string, data: WidgetData): string {
   const params = new URLSearchParams(data as Record<string, string>);
   const baseURL = `${BASE_URL}/${key}/?mode=widget`;
-  
+
   if (data.transaction_id) {
     return `${baseURL}&${params.toString()}`;
   }
-  
+
   return `${baseURL}&transaction_id=&${params.toString()}`;
 }
 ```
@@ -336,21 +368,24 @@ export const WEB_VIEW_MESSAGE_LISTENER = `
 ### Adicionando Novos Tipos
 
 1. **Estenda o tipo WidgetType**:
+
 ```typescript
 // modules/solucx_widget/src/interfaces/index.ts
-export type WidgetType = "bottom" | "top" | "inline" | "modal" | "novo_tipo";
+export type WidgetType = 'bottom' | 'top' | 'inline' | 'modal' | 'novo_tipo';
 ```
 
 2. **Adicione estilos correspondentes**:
+
 ```typescript
 // modules/solucx_widget/src/styles/widgetStyles.ts
 const styleMap = {
   // ... estilos existentes
-  'novo_tipo': { container: styles.novoWrapper, content: styles.novoContent }
+  novo_tipo: { container: styles.novoWrapper, content: styles.novoContent }
 };
 ```
 
 3. **Implemente lógica no componente principal**:
+
 ```typescript
 // modules/solucx_widget/src/SoluCXWidget.tsx
 if (type === 'novo_tipo') {
@@ -361,14 +396,14 @@ if (type === 'novo_tipo') {
 ### Adicionando Novos Eventos
 
 1. **Estenda EventKey**:
+
 ```typescript
 // modules/solucx_widget/src/interfaces/index.ts
-export type EventKey = 
-  | "FORM_OPENED"
-  | "NOVO_EVENTO"  // Novo evento
+export type EventKey = 'FORM_OPENED' | 'NOVO_EVENTO'; // Novo evento
 ```
 
 2. **Implemente handler**:
+
 ```typescript
 // modules/solucx_widget/src/services/widgetEventService.ts
 private executeEvent(eventKey: EventKey, value: string): WidgetResponse {
@@ -380,6 +415,7 @@ private executeEvent(eventKey: EventKey, value: string): WidgetResponse {
 ```
 
 3. **Adicione testes**:
+
 ```typescript
 // modules/solucx_widget/src/__tests__/widgetEventService.test.ts
 it('should handle NOVO_EVENTO correctly', () => {
@@ -393,6 +429,7 @@ it('should handle NOVO_EVENTO correctly', () => {
 ### Problemas Comuns
 
 #### 1. **Widget não aparece**
+
 ```bash
 # Verificações:
 ✅ Chave SoluCX válida?
@@ -402,6 +439,7 @@ it('should handle NOVO_EVENTO correctly', () => {
 ```
 
 #### 2. **Eventos não funcionam**
+
 ```bash
 # Verificações:
 ✅ JavaScript listener injetado?
@@ -411,6 +449,7 @@ it('should handle NOVO_EVENTO correctly', () => {
 ```
 
 #### 3. **Layout quebrado**
+
 ```bash
 # Verificações:
 ✅ Dimensões adequadas para o dispositivo?
@@ -420,6 +459,7 @@ it('should handle NOVO_EVENTO correctly', () => {
 ```
 
 #### 4. **Storage não persiste**
+
 ```bash
 # Verificações:
 ✅ AsyncStorage instalado?
@@ -432,15 +472,15 @@ it('should handle NOVO_EVENTO correctly', () => {
 
 ```typescript
 // Habilitar logs detalhados
-console.log("Widget event received:", processedKey, value);
+console.log('Widget event received:', processedKey, value);
 
 // Verificar dados persistidos
 const data = await storageService.read();
-console.log("Stored data:", data);
+console.log('Stored data:', data);
 
 // Verificar URL construída
 const url = buildWidgetURL(soluCXKey, data);
-console.log("Widget URL:", url);
+console.log('Widget URL:', url);
 ```
 
 ## 📚 Dependências

package/README.md

@@ -45,17 +45,17 @@ import { SoluCXWidget } from '@solucx/react-native-solucx-widget';
 export default function MyScreen() {
   return (
     <SoluCXWidget
-      soluCXKey="sua-chave-solucx"
-      type="bottom"
+      soluCXKey='sua-chave-solucx'
+      type='bottom'
       data={{
-        journey: "checkout_flow",
-        name: "João Silva",
-        email: "joao@email.com",
-        store_id: "loja_01",
-        amount: 150.00
+        journey: 'checkout_flow',
+        name: 'João Silva',
+        email: 'joao@email.com',
+        store_id: 'loja_01',
+        amount: 150.0
       }}
       options={{
-        height: 400 
+        height: 400
       }}
     />
   );
@@ -65,43 +65,47 @@ export default function MyScreen() {
 ## 📱 Modos de Renderização
 
 ### Bottom (Padrão)
+
 Widget fixo na parte inferior da tela, ideal para feedback não intrusivo.
 
 ```tsx
-<SoluCXWidget type="bottom" {...props} />
+<SoluCXWidget type='bottom' {...props} />
 ```
 
 ### Top
+
 Widget fixo no topo da tela, perfeito para notificações importantes.
 
 ```tsx
-<SoluCXWidget type="top" {...props} />
+<SoluCXWidget type='top' {...props} />
 ```
 
 ### Modal
+
 Sobreposição centralizada que bloqueia interação com o fundo.
 
 ```tsx
-<SoluCXWidget type="modal" {...props} />
+<SoluCXWidget type='modal' {...props} />
 ```
 
 ### Inline
+
 Integrado ao fluxo normal do layout, respeitando a posição no código.
 
 ```tsx
-<SoluCXWidget type="inline" {...props} />
+<SoluCXWidget type='inline' {...props} />
 ```
 
 ## 🔧 API Completa
 
 ### Props
 
-| Propriedade | Tipo | Obrigatório | Descrição |
-|------------|------|-------------|-----------|
-| `soluCXKey` | `string` | ✅ | Chave de autenticação SoluCX |
-| `type` | `WidgetType` | ✅ | Modo de renderização |
-| `data` | `WidgetData` | ✅ | Dados do cliente/transação |
-| `options` | `WidgetOptions` | ✅ | Configurações do widget |
+| Propriedade | Tipo            | Obrigatório | Descrição                    |
+| ----------- | --------------- | ----------- | ---------------------------- |
+| `soluCXKey` | `string`        | ✅          | Chave de autenticação SoluCX |
+| `type`      | `WidgetType`    | ✅          | Modo de renderização         |
+| `data`      | `WidgetData`    | ✅          | Dados do cliente/transação   |
+| `options`   | `WidgetOptions` | ✅          | Configurações do widget      |
 
 ### WidgetData
 
@@ -110,14 +114,14 @@ interface WidgetData {
   // Identificadores
   transaction_id?: string;
   customer_id?: string;
-  
+
   // Dados do cliente
   name?: string;
   email?: string;
   phone?: string;
-  birth_date?: string;     // Formato: YYYY-MM-DD
+  birth_date?: string; // Formato: YYYY-MM-DD
   document?: string;
-  
+
   // Contexto da transação
   store_id?: string;
   store_name?: string;
@@ -125,8 +129,8 @@ interface WidgetData {
   employee_name?: string;
   amount?: number;
   score?: number;
-  journey?: string;        // Nome da jornada/fluxo
-  
+  journey?: string; // Nome da jornada/fluxo
+
   // Parâmetros customizados (prefixo param_)
   param_REGIAO?: string;
   [key: string]: string | number | undefined;
@@ -137,19 +141,43 @@ interface WidgetData {
 
 ```typescript
 interface WidgetOptions {
-  height?: number;         // Altura
+  height?: number; // Altura fixa em pontos (points, não pixels)
+  // Se não fornecido, será dinâmica baseada em eventos de resize
+  // Se fornecido, será fixa independente do tipo de widget
   retry?: {
-    attempts?: number;     // Tentativas (padrão: 3)
-    interval?: number;     // Intervalo em ms (padrão: 1000)
+    attempts?: number; // Tentativas (padrão: 3)
+    interval?: number; // Intervalo em ms (padrão: 1000)
   };
   waitDelayAfterRating?: number; // Delay após avaliação
 }
 ```
 
+**Comportamento da Altura (height):**
+
+- **Altura Dinâmica (padrão)**: Quando `height` não é fornecido, o widget se ajusta automaticamente baseado em eventos de resize do conteúdo. Isso funciona para todos os tipos: `bottom`, `top`, `inline` e `modal`.
+
+  ```tsx
+  // Altura dinâmica - se adapta ao conteúdo
+  <SoluCXWidget
+    type='bottom'
+    options={{}} // ou options={{ retry: { attempts: 3 } }}
+    {...props}
+  />
+  ```
+
+- **Altura Fixa**: Quando `height` é especificado, o valor é fixo e eventos de resize são ignorados. Funciona para todos os tipos de widget.
+
+  ```tsx
+  // Altura fixa de 400 pontos
+  <SoluCXWidget type='modal' options={{ height: 400 }} {...props} />
+  ```
+
+**⚠️ Importante**: O valor de `height` é sempre em **pontos** (points), não pixels, seguindo o padrão do React e React Native. O sistema operacional converte automaticamente para pixels considerando a densidade da tela.
+
 ### WidgetType
 
 ```typescript
-type WidgetType = "bottom" | "top" | "inline" | "modal";
+type WidgetType = 'bottom' | 'top' | 'inline' | 'modal';
 ```
 
 ## 🔄 Sistema de Eventos
@@ -247,8 +275,8 @@ const options = {
 ## 📚 Compatibilidade
 
 | Versão | React Native | Expo | iOS | Android |
-|--------|--------------|------|-----|---------|
-| 1.0.x | 0.70+ | 50+ | 11+ | API 21+ |
+| ------ | ------------ | ---- | --- | ------- |
+| 1.0.x  | 0.70+        | 50+  | 11+ | API 21+ |
 
 ## 📄 Licença
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
@@ -14,10 +14,10 @@
     "README.md"
   ],
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
-    "@react-native-async-storage/async-storage": "^2.2.0",
-    "react-native-reanimated": "^3.17.4",
-    "react-native-webview": "^13.16.0"
+    "react-native-webview": "^13.16.0",
+    "react-native-safe-area-context": "^5.6.1"
   }
 }

package/src/components/InlineWidget.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
-import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
 
 interface InlineWidgetProps {
     visible: boolean;
@@ -11,7 +12,12 @@ interface InlineWidgetProps {
     onClose?: () => void;
 }
 
-export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, children, onClose }) => {
+export const InlineWidget: React.FC<InlineWidgetProps> = ({
+    visible,
+    height,
+    children,
+    onClose,
+}) => {
     const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
 
     useEffect(() => {
@@ -20,12 +26,10 @@ export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, chi
 
     return (
         <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
-            <Animated.View style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
+            <Animated.View
+                style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
                 {children}
-                <CloseButton
-                    visible={visible}
-                    onPress={onClose || (() => { })}
-                />
+                <CloseButton visible={visible} onPress={onClose || (() => { })} />
             </Animated.View>
         </View>
     );

package/src/components/ModalWidget.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, SafeAreaView, View } from 'react-native';
-import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
+import { Modal, SafeAreaView, View, Animated } from 'react-native';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
 
 interface ModalWidgetProps {
     visible: boolean;
@@ -11,7 +11,12 @@ interface ModalWidgetProps {
     onClose?: () => void;
 }
 
-export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, children, onClose }) => {
+export const ModalWidget: React.FC<ModalWidgetProps> = ({
+    visible,
+    height,
+    children,
+    onClose,
+}) => {
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
     const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
@@ -22,9 +27,20 @@ export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, child
 
     return (
         <SafeAreaView>
-            <Modal transparent visible={isWidgetVisible} animationType="slide" hardwareAccelerated>
+            <Modal
+                transparent
+                visible={isWidgetVisible}
+                animationType="slide"
+                hardwareAccelerated
+            >
                 <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
-                    <Animated.View style={[styles.modalContent, getWidgetVisibility(visible), animatedHeightStyle]}>
+                    <Animated.View
+                        style={[
+                            styles.modalContent,
+                            getWidgetVisibility(visible),
+                            animatedHeightStyle,
+                        ]}
+                    >
                         {children}
                         <CloseButton
                             visible={visible}

package/src/components/OverlayWidget.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { View, ViewStyle } from 'react-native';
+import { View, ViewStyle, Animated } from 'react-native';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { getWidgetStyles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
+import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
 import { FIXED_Z_INDEX } from '../constants/webViewConstants';
 import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
 
 interface OverlayWidgetProps {
     visible: boolean;
@@ -23,7 +23,8 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
     children,
     onClose,
 }) => {
-    const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+    const insets =
+        initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
     const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
@@ -41,8 +42,8 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
         width: '100%',
         height: '100%',
         zIndex: FIXED_Z_INDEX,
-        pointerEvents: 'box-none'
-    }
+        pointerEvents: 'box-none',
+    };
 
     const contentStyle = [
         getWidgetStyles(position).content,
@@ -55,14 +56,20 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
             ...(position === 'bottom' && {
                 bottom: insets.bottom,
             }),
-        }
+        },
     ];
 
     return (
         <>
             {isWidgetVisible && (
                 <View style={[containerStyle, getWidgetVisibility(visible)]}>
-                    <Animated.View style={[contentStyle, animatedHeightStyle, getWidgetVisibility(visible)]}>
+                    <Animated.View
+                        style={[
+                            contentStyle,
+                            animatedHeightStyle,
+                            getWidgetVisibility(visible),
+                        ]}
+                    >
                         {children}
                         <CloseButton
                             visible={visible}

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export { useWidgetState } from './useWidgetState';
+export { useWidgetHeight } from './useWidgetHeight';

package/src/hooks/useHeightAnimation.ts

@@ -0,0 +1,22 @@
+// hooks/useHeightAnimation.ts
+import { useRef, useCallback } from 'react';
+import { Animated } from 'react-native';
+
+export function useHeightAnimation(initialHeight = 0, duration = 300) {
+    const height = useRef(new Animated.Value(initialHeight)).current;
+
+    const updateHeight = useCallback(
+        (toValue: number) => {
+            Animated.timing(height, {
+                toValue,
+                duration,
+                useNativeDriver: false,
+            }).start();
+        },
+        [height, duration],
+    );
+
+    const animatedHeightStyle = { height };
+
+    return { animatedHeightStyle, updateHeight, height };
+}

package/src/hooks/useWidgetHeight.ts

@@ -0,0 +1,38 @@
+import { useState, useCallback } from 'react';
+import type { WidgetOptions } from '../interfaces';
+
+interface UseWidgetHeightProps {
+  options?: WidgetOptions;
+  initialHeight?: number;
+}
+
+interface UseWidgetHeightReturn {
+  height: number;
+  isFixedHeight: boolean;
+  handleResize: (newHeight: number) => void;
+}
+
+export const useWidgetHeight = ({
+  options,
+  initialHeight = 300
+}: UseWidgetHeightProps): UseWidgetHeightReturn => {
+  const [dynamicHeight, setDynamicHeight] = useState<number>(initialHeight);
+  const hasFixedHeight = typeof options?.height === 'number';
+
+  const height = hasFixedHeight ? options!.height! : dynamicHeight;
+
+  const handleResize = useCallback(
+    (newHeight: number) => {
+      if (!hasFixedHeight && newHeight > 0) {
+        setDynamicHeight(newHeight);
+      }
+    },
+    [hasFixedHeight]
+  );
+
+  return {
+    height,
+    isFixedHeight: hasFixedHeight,
+    handleResize
+  };
+};

package/src/hooks/useWidgetState.ts

@@ -1,77 +1,101 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { Dimensions } from 'react-native';
-import { WidgetData, WidgetOptions, WidgetType, WidgetSamplerLog } from '../interfaces';
+import {
+  WidgetData,
+  WidgetOptions,
+  WidgetType,
+  WidgetSamplerLog
+} from '../interfaces';
 import { StorageService } from '../services/storage';
 
 function getUserId(widgetData: WidgetData): string {
-    return widgetData.customer_id ?? widgetData.document ?? widgetData.email ?? "default_user";
+  return (
+    widgetData.customer_id ??
+    widgetData.document ??
+    widgetData.email ??
+    'default_user'
+  );
 }
 
-export const useWidgetState = (data: WidgetData, options?: WidgetOptions, type?: WidgetType) => {
-    const [savedData, setSavedData] = useState<WidgetSamplerLog | null>(null);
-    const [widgetHeight, setWidgetHeight] = useState<number>(0);
-    const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(false);
+export const useWidgetState = (
+  data: WidgetData,
+  options?: WidgetOptions,
+  type?: WidgetType
+) => {
+  const [savedData, setSavedData] = useState<WidgetSamplerLog | null>(null);
+  const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(false);
 
-    const userId = getUserId(data);
-    const storageService = new StorageService(userId);
-    const screenHeight = Dimensions.get('screen').height;
-    const height = options?.height ? Number(options.height) : undefined;
+  const userId = getUserId(data);
 
-    const loadSavedData = useCallback(async () => {
-        try {
-            const jsonValue = await storageService.read();
-            setSavedData(jsonValue);
-        } catch (error) {
-            console.error('Error loading storage data:', error);
-        }
-    }, [storageService]);
+  const storageService = useMemo(() => new StorageService(userId), [userId]);
 
-    const saveData = useCallback(async (data: WidgetSamplerLog) => {
-        try {
-            await storageService.write(data);
-            setSavedData(data);
-        } catch (error) {
-            console.error('Error saving storage data:', error);
-        }
-    }, [storageService]);
+  const screenHeight = Dimensions.get('screen').height;
+  const height = options?.height ? Number(options.height) : undefined;
 
-    const open = useCallback(async () => {
-        const userLogs = await storageService.read();
-        userLogs.attempts++;
-        userLogs.lastAttempt = Date.now();
-        try {
-            await storageService.write(userLogs);
-            setSavedData(userLogs);
-        } catch (error) {
-            console.error('Error saving storage data:', error);
-        }
-        setIsWidgetVisible(true);
-    }, []);
+  const [widgetHeight, setWidgetHeight] = useState<number>(height ?? 300);
 
-    const close = useCallback(() => {
-        setIsWidgetVisible(false);
-    }, []);
+  const loadSavedData = useCallback(async () => {
+    try {
+      const jsonValue = await storageService.read();
+      setSavedData(jsonValue);
+    } catch (error) {
+      console.error('Error loading storage data:', error);
+    }
+  }, [storageService]);
 
-    const resize = useCallback((value: string) => {
-        const receivedHeight = Number(value);
-        if (height && receivedHeight > height) {
-            setWidgetHeight(height);
-            return;
-        }
+  const saveData = useCallback(
+    async (data: WidgetSamplerLog) => {
+      try {
+        await storageService.write(data);
+        setSavedData(data);
+      } catch (error) {
+        console.error('Error saving storage data:', error);
+      }
+    },
+    [storageService]
+  );
+
+  const open = useCallback(async () => {
+    const userLogs = await storageService.read();
+    userLogs.attempts = (userLogs.attempts || 0) + 1;
+    userLogs.lastAttempt = Date.now();
+    try {
+      await storageService.write(userLogs);
+      setSavedData(userLogs);
+    } catch (error) {
+      console.error('Error saving storage data:', error);
+    }
+    setIsWidgetVisible(true);
+  }, [storageService]);
+
+  const close = useCallback(() => {
+    setIsWidgetVisible(false);
+  }, []);
+
+  const resize = useCallback(
+    (value: string) => {
+      const receivedHeight = Number(value);
+
+      if (height !== undefined) {
+        setWidgetHeight(height);
+      } else if (receivedHeight > 0) {
         setWidgetHeight(receivedHeight);
-    }, [screenHeight]);
+      }
+    },
+    [height]
+  );
 
-    return {
-        savedData,
-        widgetHeight,
-        isWidgetVisible,
-        setIsWidgetVisible,
-        loadSavedData,
-        saveData,
-        open,
-        close,
-        resize,
-        userId,
-        screenHeight
-    };
+  return {
+    savedData,
+    widgetHeight,
+    isWidgetVisible,
+    setIsWidgetVisible,
+    loadSavedData,
+    saveData,
+    open,
+    close,
+    resize,
+    userId,
+    screenHeight
+  };
 };

package/src/services/widgetEventService.ts

@@ -1,111 +1,126 @@
-import { EventKey, SurveyEventKey, WidgetResponse, WidgetOptions } from '../interfaces';
-import { WidgetValidationService } from './widgetValidationService';
+import {
+  EventKey,
+  SurveyEventKey,
+  WidgetResponse,
+  WidgetOptions,
+} from "../interfaces";
+import { WidgetValidationService } from "./widgetValidationService";
 
 export class WidgetEventService {
-    private setIsWidgetVisible: (visible: boolean) => void;
-    private resize: (value: string) => void;
-    private open: () => void;
-    private validationService: WidgetValidationService;
-    private widgetOptions: WidgetOptions;
-
-    constructor(
-        setIsWidgetVisible: (visible: boolean) => void,
-        resize: (value: string) => void,
-        open: () => void,
-        userId: string,
-        widgetOptions: WidgetOptions
-    ) {
-        this.setIsWidgetVisible = setIsWidgetVisible;
-        this.resize = resize;
-        this.open = open;
-        this.validationService = new WidgetValidationService(userId);
-        this.widgetOptions = widgetOptions;
+  private setIsWidgetVisible: (visible: boolean) => void;
+  private resize: (value: string) => void;
+  private open: () => void;
+  private validationService: WidgetValidationService;
+  private widgetOptions: WidgetOptions;
+
+  constructor(
+    setIsWidgetVisible: (visible: boolean) => void,
+    resize: (value: string) => void,
+    open: () => void,
+    userId: string,
+    widgetOptions: WidgetOptions,
+  ) {
+    this.setIsWidgetVisible = setIsWidgetVisible;
+    this.resize = resize;
+    this.open = open;
+    this.validationService = new WidgetValidationService(userId);
+    this.widgetOptions = widgetOptions;
+  }
+
+  async handleMessage(
+    message: string,
+    isForm: boolean,
+  ): Promise<WidgetResponse> {
+    const [eventKey, value = ""] = message.split("-");
+    const processedKey = isForm
+      ? (eventKey as EventKey)
+      : this.adaptSurveyKeyToWidgetKey(eventKey as SurveyEventKey);
+
+    return await this.executeEvent(processedKey, value);
+  }
+
+  private async executeEvent(
+    eventKey: EventKey,
+    value: string,
+  ): Promise<WidgetResponse> {
+    const eventHandlers = {
+      FORM_OPENED: () => this.handleFormOpened(),
+      FORM_CLOSE: () => this.handleFormClose(),
+      FORM_ERROR: (value: string) => this.handleFormError(value),
+      FORM_PAGECHANGED: (value: string) => this.handlePageChanged(value),
+      QUESTION_ANSWERED: () => this.handleQuestionAnswered(),
+      FORM_COMPLETED: () => this.handleFormCompleted(),
+      FORM_PARTIALCOMPLETED: () => this.handlePartialCompleted(),
+      FORM_RESIZE: (value: string) => this.handleResize(value),
+    };
+
+    const handler = eventHandlers[eventKey];
+    return await (handler?.(value) || {
+      status: "error",
+      message: "Unknown event",
+    });
+  }
+
+  private async handleFormOpened(): Promise<WidgetResponse> {
+    const canDisplay = await this.validationService.shouldDisplayWidget(
+      this.widgetOptions,
+    );
+
+    if (!canDisplay) {
+      return { status: "error", message: "Widget not allowed" };
     }
 
-    async handleMessage(message: string, isForm: boolean): Promise<WidgetResponse> {
-        const [eventKey, value = ""] = message.split("-");
-        const processedKey = isForm
-            ? eventKey as EventKey
-            : this.adaptSurveyKeyToWidgetKey(eventKey as SurveyEventKey);
-
-        return await this.executeEvent(processedKey, value);
-    }
-
-    private async executeEvent(eventKey: EventKey, value: string): Promise<WidgetResponse> {
-        const eventHandlers = {
-            FORM_OPENED: () => this.handleFormOpened(),
-            FORM_CLOSE: () => this.handleFormClose(),
-            FORM_ERROR: (value: string) => this.handleFormError(value),
-            FORM_PAGECHANGED: (value: string) => this.handlePageChanged(value),
-            QUESTION_ANSWERED: () => this.handleQuestionAnswered(),
-            FORM_COMPLETED: () => this.handleFormCompleted(),
-            FORM_PARTIALCOMPLETED: () => this.handlePartialCompleted(),
-            FORM_RESIZE: (value: string) => this.handleResize(value),
-        };
-
-        const handler = eventHandlers[eventKey];
-        return await (handler?.(value) || { status: "error", message: "Unknown event" });
-    }
-
-    private async handleFormOpened(): Promise<WidgetResponse> {
-        const canDisplay = await this.validationService.shouldDisplayWidget(this.widgetOptions);
-
-        if (!canDisplay) {
-            return { status: "error", message: "Widget not allowed" };
-        }
-
-        this.open();
-        this.setIsWidgetVisible(true);
-        return { status: "success" };
-    }
-
-    private handleFormClose(): WidgetResponse {
-        this.setIsWidgetVisible(false);
-        return { status: "success" };
-    }
-
-    private handleFormError(value: string): WidgetResponse {
-        this.setIsWidgetVisible(false);
-        return { status: "error", message: value };
-    }
-
-    private handlePageChanged(value: string): WidgetResponse {
-        console.log("Page changed:", value);
-        return { status: "success" };
-    }
-
-    private handleQuestionAnswered(): WidgetResponse {
-        console.log("Question answered");
-        return { status: "success" };
-    }
-
-    private handleFormCompleted(): WidgetResponse {
-        // TODO: Implement completion logic
-        return { status: "success" };
-    }
-
-    private handlePartialCompleted(): WidgetResponse {
-        // TODO: Implement partial completion logic
-        return { status: "success" };
-    }
-
-    private handleResize(value: string): WidgetResponse {
-        this.setIsWidgetVisible(true);
-        this.resize(value);
-        return { status: "success" };
-    }
-
-    private adaptSurveyKeyToWidgetKey(key: SurveyEventKey): EventKey {
-        const keyMapping = {
-            closeSoluCXWidget: "FORM_CLOSE",
-            dismissSoluCXWidget: "FORM_CLOSE",
-            completeSoluCXWidget: "FORM_COMPLETED",
-            partialSoluCXWidget: "FORM_PARTIALCOMPLETED",
-            resizeSoluCXWidget: "FORM_RESIZE",
-            openSoluCXWidget: "FORM_OPENED",
-            errorSoluCXWidget: "FORM_ERROR",
-        } as const;
-
-        return keyMapping[key] as EventKey;
-    }
+    this.open();
+    this.setIsWidgetVisible(true);
+    return { status: "success" };
+  }
+
+  private handleFormClose(): WidgetResponse {
+    this.setIsWidgetVisible(false);
+    return { status: "success" };
+  }
+
+  private handleFormError(value: string): WidgetResponse {
+    this.setIsWidgetVisible(false);
+    return { status: "error", message: value };
+  }
+
+  private handlePageChanged(value: string): WidgetResponse {
+    console.log("Page changed:", value);
+    return { status: "success" };
+  }
+
+  private handleQuestionAnswered(): WidgetResponse {
+    console.log("Question answered");
+    return { status: "success" };
+  }
+
+  private handleFormCompleted(): WidgetResponse {
+    // TODO: Implement completion logic
+    return { status: "success" };
+  }
+
+  private handlePartialCompleted(): WidgetResponse {
+    // TODO: Implement partial completion logic
+    return { status: "success" };
+  }
+
+  private handleResize(value: string): WidgetResponse {
+    this.resize(value);
+    return { status: "success" };
+  }
+
+  private adaptSurveyKeyToWidgetKey(key: SurveyEventKey): EventKey {
+    const keyMapping = {
+      closeSoluCXWidget: "FORM_CLOSE",
+      dismissSoluCXWidget: "FORM_CLOSE",
+      completeSoluCXWidget: "FORM_COMPLETED",
+      partialSoluCXWidget: "FORM_PARTIALCOMPLETED",
+      resizeSoluCXWidget: "FORM_RESIZE",
+      openSoluCXWidget: "FORM_OPENED",
+      errorSoluCXWidget: "FORM_ERROR",
+    } as const;
+
+    return keyMapping[key] as EventKey;
+  }
 }

package/src/styles/widgetStyles.ts

@@ -1,30 +1,5 @@
 import { StyleSheet } from 'react-native';
 import { WidgetType } from '../interfaces';
-import {
-    useSharedValue,
-    withTiming,
-    useAnimatedStyle,
-    Easing,
-} from 'react-native-reanimated';
-
-export const useHeightAnimation = (height: number) => {
-    const animatedHeight = useSharedValue(height);
-
-    const animatedHeightStyle = useAnimatedStyle(() => {
-        return {
-            height: animatedHeight.value,
-        };
-    });
-
-    const updateHeight = (newHeight: number) => {
-        animatedHeight.value = withTiming(newHeight, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-        });
-    };
-
-    return { animatedHeightStyle, updateHeight };
-};
 
 export const styles = StyleSheet.create({
     wrapper: {