@upeex/ads-sdk 1.1.18 → 1.1.21

package/README.md

@@ -1,16 +1,88 @@
 # SDK-apps-React-native
-SDK para aplicaçõe React Native rodarem anúncios:    
+SDK oficial da Upeex para exibir anúncios em aplicativos React Native e Expo.
 
-# Comando para inciar
-npm i @upeex/ads-sdk
+## Instalação
 
-### Como importar
+Instale o pacote e suas dependências via npm:
 
-```js
+```bash
+npm install @upeex/ads-sdk
+```
+
+## Como Usar
+
+### Importação
+
+```javascript
 import AdBanner from '@upeex/ads-sdk';
+```
+
+### 1. Banner Simples (Padrão)
+
+Ideal para exibir em listas ou rodapés. O anúncio carrega no tamanho especificado ou padrão.
+
+```javascript
+<AdBanner
+  client="SEU_ID_CLIENTE"
+  slot="SEU_ID_SLOT"
+/>
+```
+
+### 2. Anúncio Popup (Modal)
+
+Exibe um anúncio em tela cheia (modal) sobrepondo o conteúdo. 
+**Comportamento:**
+- Abre automaticamente se houver anúncio disponível.
+- **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
+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.
+
+### Props Disponíveis
+
+| Prop | Tipo | Descrição |
+|Data | --- | --- |
+| `client` | `string` | **Obrigatório**. ID do cliente fornecido pela Upeex. |
+| `slot` | `string` | **Obrigatório**. ID do slot (espaço) do anúncio. |
+| `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 (avisa se o componente foi desmontado erradamente). |
+
+## Solução de Problemas
 
-// Carregar anúncio
- <AdBanner
-  client="SEU_CLIENTE"
-  slot="SEU_SLOT"
- /
+- **Erro "Cannot find module 'react-native'"**: Certifique-se de que `react` e `react-native` estão instalados no seu projeto.
+- **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,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { Platform, Dimensions, StyleSheet, View, Text, Modal, TouchableOpacity, Image, Linking } from 'react-native';
+import { Platform, Dimensions, StyleSheet, View, Text, Modal, TouchableWithoutFeedback, TouchableOpacity, ActivityIndicator, Image, Linking } from 'react-native';
 
 async function getSignals() {
     var _a, _b, _c, _d, _e, _f;
@@ -114,7 +114,8 @@ style = {}, debug = false, }) {
                 if (isPopup) {
                     setModalVisible(true);
                 }
-                if (data.refresh && data.refresh > 0) {
+                // Only setup refresh if NOT a popup
+                if (!isPopup && data.refresh && data.refresh > 0) {
                     log(`Refresh ativo: ${data.refresh}s`);
                     refreshTimer = setTimeout(() => {
                         log('Refazendo request do anúncio');
@@ -134,11 +135,27 @@ style = {}, debug = false, }) {
         return () => {
             if (refreshTimer)
                 clearTimeout(refreshTimer);
+            if (isPopup && modalVisible && 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, modalVisible]);
+    // Popup close delay logic
+    const [canClose, setCanClose] = useState(false);
+    useEffect(() => {
+        if (isPopup && modalVisible) {
+            setCanClose(false);
+            const timer = setTimeout(() => {
+                setCanClose(true);
+            }, 5000);
+            return () => clearTimeout(timer);
+        }
+    }, [isPopup, modalVisible]);
     const handlePress = () => {
         log('Clique no anúncio', ad.clickUrl);
         if (isPopup) {
+            // Allow close on click even if timer not finished?
+            // Usually ads allow clicking through immediately.
             setModalVisible(false);
         }
         if (!ad.clickUrl)
@@ -151,7 +168,9 @@ style = {}, debug = false, }) {
         }
     };
     const handleClose = () => {
-        setModalVisible(false);
+        if (canClose) {
+            setModalVisible(false);
+        }
     };
     if (error) {
         return debug ? (jsx(View, { style: [styles.upeexContainer, styles.upeexDebug], children: jsx(Text, { style: styles.upeexDebugText, children: error }) })) : null;
@@ -160,11 +179,14 @@ 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(View, { style: styles.upeexOverlay, children: jsxs(View, { style: [styles.upeexPopupContainer, theme === 'dark' && styles.upeexDark], children: [jsx(TouchableOpacity, { onPress: handleClose, style: styles.upeexCloseButton, children: jsx(Text, { style: styles.upeexCloseText, children: "\u2715" }) }), jsx(TouchableOpacity, { activeOpacity: 0.9, onPress: handlePress, children: jsx(Image, { source: { uri: ad.image }, style: {
-                                    width: ad.width || 300,
-                                    height: ad.height || 300,
-                                    resizeMode: 'contain',
-                                } }) })] }) }) }));
+        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: Dimensions.get('window').width * 0.9,
+                                            height: Dimensions.get('window').height * 0.8,
+                                            resizeMode: 'contain',
+                                        } }) })] }) }) }) }) }));
     }
     return (jsx(TouchableOpacity, { activeOpacity: 0.9, style: [
             styles.upeexContainer,
@@ -205,6 +227,8 @@ const styles = StyleSheet.create({
         backgroundColor: 'rgba(0, 0, 0, 0.5)',
         justifyContent: 'center',
         alignItems: 'center',
+        zIndex: 9999,
+        elevation: 10,
     },
     upeexPopupContainer: {
         backgroundColor: '#fff',
@@ -212,11 +236,12 @@ const styles = StyleSheet.create({
         borderRadius: 10,
         alignItems: 'center',
         position: 'relative',
-        elevation: 5,
+        elevation: 11,
         shadowColor: '#000',
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.25,
         shadowRadius: 3.84,
+        zIndex: 10000,
     },
     upeexCloseButton: {
         position: 'absolute',

package/package.json

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