@upeex/ads-sdk 1.1.19 → 1.1.22

package/README.md

@@ -36,15 +36,46 @@ Exibe um anúncio em tela cheia (modal) sobrepondo o conteúdo.
 - **Bloqueio de 5 segundos:** O usuário deve aguardar 5 segundos antes de fechar.
 - **Spinner:** Um indicador de carregamento aparece durante o bloqueio.
 - **Sem Auto-Refresh:** O popup carrega apenas uma vez.
+- **Visual:** Ocupa toda a tela (transparente na StatusBar) e a imagem é redimensionada para 90% da largura.
+
+#### ⚠️ Onde Colocar o Popup (Importante!)
+
+Para garantir que o popup abra corretamente e não sobreponha outros Modals de forma errada, **coloque o componente no final do seu container principal**, logo antes de fechar a view da tela.
+
+**Exemplo Correto:**
 
 ```javascript
-<AdBanner
-  client="SEU_ID_CLIENTE"
-  slot="SEU_ID_SLOT"
-  typeads="popup" 
-/>
+return (
+  <View style={{ flex: 1 }}> {/* Seu Container Principal (View, SafeAreaView, etc) */}
+     <Header />
+     <Conteudo />
+     
+     {/* Outros Modals do seu App */}
+     <Modal visible={isLoading}>...</Modal>
+
+     {/* ✅ COLOCAR AQUI, NO FINAL: */}
+     <AdBanner
+       client="SEU_ID_CLIENTE"
+       slot="SEU_ID_SLOT"
+       typeads="popup"
+     />
+  </View>
+);
 ```
 
+```
+
+**Evite colocar dentro de:**
+- Componentes que são desmontados condicionalmente (`{show && <AdBanner />}`).
+- Headers ou Footers com `position: absolute` ou `zIndex` restritivo.
+
+#### ⚠️ Conflito com Outros Modals (Loading, Alertas)
+
+O React Native pode ter problemas ao tentar exibir **dois Modals ao mesmo tempo** (ex: um Loading Spinner e o Anúncio Popup).
+- Se o seu app abre um Modal de "Carregando..." ao entrar na tela, aguarde ele fechar antes de renderizar o anúncio, ou use o anúncio como o próprio loading inicial.
+- O SDK possui `zIndex` alto (9999), mas o sistema operacional (especialmente Android) pode priorizar o último Modal aberto na árvore de componentes.
+
+
 ### Props Disponíveis
 
 | Prop | Tipo | Descrição |
@@ -54,10 +85,13 @@ Exibe um anúncio em tela cheia (modal) sobrepondo o conteúdo.
 | `typeads` | `'banner' \| 'popup'` | Define o formato. Padrão é `'banner'`. |
 | `theme` | `'light' \| 'dark'` | Define o tema (cores de fundo). Padrão `'light'`. |
 | `baseUrl` | `string` | URL base da API (opcional). |
-| `debug` | `boolean` | Ativa logs no console para depuração. Padrão `false`. |
+| `debug` | `boolean` | Ativa logs no console (avisa se o componente foi desmontado erradamente). |
 
 ## Solução de Problemas
 
 - **Erro "Cannot find module 'react-native'"**: Certifique-se de que `react` e `react-native` estão instalados no seu projeto.
-- **Popup não abre**: Verifique se `typeads="popup"` foi passado e se o console mostra logs de "Nenhum anúncio disponível" (use `debug={true}`).
-- **Sobreposição**: O popup possui `zIndex: 9999` e `elevation: 11`. Se ainda estiver atrás de algum elemento, verifique se o componente pai não tem um `zIndex` maior ou se está dentro de um Modal nativo do OS.
+- **Popup não abre**:
+    1. Verifique se `typeads="popup"`.
+    2. Ative `debug={true}` e olhe o console. Se aparecer "Nenhum anúncio disponível", é normal.
+    3. Se aparecer o aviso "O componente foi desmontado...", mova o `<AdBanner />` para a raiz da tela.
+- **Sobreposição**: O popup possui `zIndex: 9999` e `elevation: 11`. Se ainda estiver atrás de algum elemento, verifique se o pai não tem um `zIndex` maior.

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Platform, Dimensions, StyleSheet, View, Text, Modal, TouchableWithoutFeedback, TouchableOpacity, ActivityIndicator, Image, Linking } from 'react-native';
 
 async function getSignals() {
@@ -91,6 +91,11 @@ style = {}, debug = false, }) {
     };
     const effectiveTypeAds = (_a = (typeAds || typeads)) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const isPopup = effectiveTypeAds === 'popup';
+    // Track visibility with ref to avoid dependency loops in useEffect
+    const isVisibleRef = React.useRef(false);
+    useEffect(() => {
+        isVisibleRef.current = modalVisible;
+    }, [modalVisible]);
     useEffect(() => {
         let refreshTimer;
         const load = async () => {
@@ -135,8 +140,11 @@ style = {}, debug = false, }) {
         return () => {
             if (refreshTimer)
                 clearTimeout(refreshTimer);
+            if (isPopup && isVisibleRef.current && debug) {
+                console.warn('[UPEEX ADS] Aviso: O componente AdBanner (Popup) foi desmontado enquanto estava visível. Verifique se ele não está dentro de uma View que foi ocultada ou removida da tela.');
+            }
         };
-    }, [client, slot, baseUrl, effectiveTypeAds]);
+    }, [client, slot, baseUrl, effectiveTypeAds]); // Removed modalVisible to prevent loops
     // Popup close delay logic
     const [canClose, setCanClose] = useState(false);
     useEffect(() => {
@@ -176,12 +184,12 @@ style = {}, debug = false, }) {
         return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexLoading], children: jsx(Text, { style: styles.upeexLoadingText, children: "Carregando an\u00FAncio\u2026" }) })) : null;
     }
     if (isPopup) {
-        return (jsx(Modal, { transparent: true, visible: modalVisible, onRequestClose: handleClose, animationType: "fade", children: jsx(TouchableWithoutFeedback, { onPress: handleClose, children: jsx(View, { style: styles.upeexOverlay, children: jsx(TouchableWithoutFeedback, { onPress: () => { }, children: jsxs(View, { style: [
+        return (jsx(Modal, { transparent: true, visible: modalVisible, onRequestClose: handleClose, animationType: "fade", statusBarTranslucent: true, hardwareAccelerated: true, children: jsx(TouchableWithoutFeedback, { onPress: handleClose, children: jsx(View, { style: styles.upeexOverlay, children: jsx(TouchableWithoutFeedback, { onPress: () => { }, children: jsxs(View, { style: [
                                 styles.upeexPopupContainer,
                                 theme === 'dark' && styles.upeexDark,
                             ], children: [canClose ? (jsx(TouchableOpacity, { onPress: handleClose, style: styles.upeexCloseButton, children: jsx(Text, { style: styles.upeexCloseText, children: "\u2715" }) })) : (jsx(View, { style: styles.upeexCloseButton, children: jsx(ActivityIndicator, { size: "small", color: "#999" }) })), jsx(TouchableOpacity, { activeOpacity: 0.9, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
-                                            width: ad.width || 300,
-                                            height: ad.height || 300,
+                                            width: Dimensions.get('window').width * 0.9,
+                                            height: Dimensions.get('window').height * 0.8,
                                             resizeMode: 'contain',
                                         } }) })] }) }) }) }) }));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upeex/ads-sdk",
-  "version": "1.1.19",
+  "version": "1.1.22",
   "description": "Upeex Ads SDK for React Native and universal apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",