--- title: "React Native" slug: "react-native" updated: 2026-06-12T10:30:57Z published: 2026-06-12T10:30:57Z canonical: "docs.xtremepush.com/react-native" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt > Use this file to discover all available pages before exploring further. # React Native  Use o SDK Xtremepush para integrar seus aplicativos React Native com a plataforma ## Pré-requisitos Antes de começar, certifique-se de ter o seguinte: ### Requisitos Gerais - **React Native** 0.71+ (fluxo de trabalho puro, não-Expo) - **Node.js** 16.0+ - Uma **conta Xtremepush** com sua Chave de Aplicação ### Requisitos para Android - Android Studio com Android SDK instalado - **Nota** 7.0+ - **SDK mínimo**: API 21 (Android 5.0) - **SDK do alvo**: 34 - Projeto Firebase com `google-services.json` ([guia de configuração do Console Firebase](https://console.firebase.google.com/)) ### Requisitos para iOS - **Xcode** 13.0+ - **Meta de Implantação no iOS**: 13.0+ - **CocoaPods** 1.11+ - Conta Apple Developer com capacidade de Notificações Push ativada ## Etapas de Integração ### Passo 1: Instalar o SDK Adicione a CLI Xtremepush ao seu projeto usando npm ou Yarn: **NPM** ```plaintext npm install xtremepush-react-native-cli ``` **fio** ```plaintext yarn add xtremepush-react-native-cli ``` ### Passo 2: Configurar o SDK #### 2.1 Gerar arquivo de configuração Execute o seguinte comando para criar um modelo de configuração: ```Terminal npx xtremepush-setup generate-config ``` Isso cria `xtremepush.config.js` a raiz do seu projeto. #### 2.2 Adicione suas credenciais Abra `xtremepush.config.js` e adicione suas credenciais Xtremepush: ```javascript // xtremepush.config.js module.exports = {  // REQUIRED: Your Xtremepush Application Key  applicationKey: 'YOUR_XTREMEPUSH_APP_KEY',  // REQUIRED for Android: Firebase Cloud Messaging Sender ID  googleSenderId: 'YOUR_FCM_SENDER_ID',  // Enable debug logging during development  enableDebugLogs: true,  // iOS: Your Apple Development Team ID (required for Rich Media)  devTeam: 'YOUR_APPLE_TEAM_ID', }; ``` #### 2.3 Execute a Integração Execute o comando de integração: ```Terminal npx xtremepush-setup init ``` O CLI irá automaticamente: - Detecte a estrutura do seu projeto (Android/iOS, Java/Kotlin, Swift/Objective-C) - Modificar arquivos nativos de build e manifestos - Injetar código de inicialização do SDK - Criar módulos nativos de ponte ### Passo 3: Configuração do Android Após rodar a integração, complete a configuração do Android: #### 3.1 Adicionar Configuração da Base de Fogo 1. Baixe `google-services.json` do [Console Firebase](https://console.firebase.google.com/) 2. Coloque no seu `android/app/` diretório: Verifique se o arquivo existe ```Terminal # Verify the file exists ls android/app/google-services.json ``` > [!WARNING] > Sem esse arquivo, seu aplicativo Android travará ao iniciar com um erro de inicialização do Firebase. #### 3.2 Construa o App Android ```Terminal # Clean the build cd android && ./gradlew clean && cd .. # Run the app npx react-native run-android ``` ### Erros comuns de build do Android #### A sincronização do Gradle falhou com erros de resolução de dependências **Solução**: 1. Verifique sua conexão com a Internet 2. Limpar e reconstruir: ```Terminal cd android && ./gradlew clean ``` #### Erro de inicialização do Firebase no lançamento do aplicativo Certifique-se `google-services.json` de que está corretamente colocado em `android/app/`. Baixe do console Firebase se estiver faltando. ### Passo 4: Configuração do iOS Depois de confirmar sua build para Android, continue com a configuração do iOS: #### 4.1 Instalar Dependências do CocoaPods ```Terminal cd ios && pod install && cd .. ``` #### 4.2 Abrir no Xcode ```Terminal open ios/YourApp.xcworkspace ``` #### 4.3 Habilitar Notificações Push 1. No Xcode, selecione seu **projeto** no navegador 2. Selecione **o alvo do seu app** 3. Vá para a **aba Assinatura & Capacidades** 4. Clique **+ Capacidade** 5. Adicionar **Notificações Push** #### 4.4 Ativar Modos em Segundo Plano (Opcional) Para o gerenciamento de notificações em segundo plano: 1. **Em Assinatura & Capacidades**, clique **+ Capacidade** 2. Adicionar **Modos de Fundo** 3. **Verifique notificações remotas** #### 4.5 Construa o App iOS ```Terminal npx react-native run-ios ``` ### Erros comuns de compilação do iOS #### Instalação do pod falhou **Solução**: ```Terminal cd ios  pod repo update  rm -rf Pods Podfile.lock  pod install ``` #### Capacidade de notificações push não encontrada **Solução**: Certifique-se de ter uma conta Apple Developer com uma associação ativa e que a funcionalidade de Notificações Push esteja ativada para seu ID de App no Apple Developer Portal. ### Passo 5: Inicialize no seu aplicativo Adicione a inicialização do Xtremepush ao seu código React Native: ```javascript // App.js or App.tsx import React, { useEffect } from 'react'; import { NativeModules, Platform } from 'react-native'; const Xtremepush = NativeModules.Xtremepush; const App = () => {  useEffect(() => {    // Request notification permissions (required for Android 13+)    Xtremepush.requestNotificationPermissions();    // Check if app was opened from a notification    Xtremepush.getInitialNotification().then(notification => {      if (notification) {        console.log('App opened from notification:', notification);        // Handle deep linking based on notification payload      }    });  }, []);  return (    // Your app content  ); }; export default App; ``` ### Passo 6: Teste sua Integração #### 6.1 Verificar a Integração do SDK Execute o comando de verificação: ```Terminal npx xtremepush-setup verify ``` Para resultados detalhados: ```Terminal npx xtremepush-setup verify --verbose ``` #### 6.2 Verifique os Logs de Depuração Se você ativou `enableDebugLogs: true` na sua configuração, verá logs do SDK: - **Android**: Android Studio Logcat (filtro por "Xtremepush") - **iOS**: Xcode Console ## Referência de Configuração ### Todas as opções de configuração | Opção | Tipo | Obrigatório | Padrão | Descrição | | --- | --- | --- | --- | --- | | `applicationKey` | String | **Sim** | — | Sua chave de aplicação Xtremepush | | `googleSenderId` | String | **Sim** | — | ID do remetente da Firebase Cloud Messaging (**apenas Android**) | | `iosAppKey` | String | Não | `applicationKey` | Chave específica do app para iOS se for diferente | | `androidAppKey` | String | Não | `applicationKey` | Chave específica do app Android se for diferente | | `enableDebugLogs` | Booleano | Não | `false` | Habilitar o registro de depuração do SDK | | `enableLocationServices` | Booleano | Não | `true` | Permitir permissões de localização | | `enableGeo` | Booleano | Não | `false` | Habilitar geofencing | | `enableBeacons` | Booleano | Não | `false` | Habilitar suporte ao iBeacon | | `enableRichMedia` | Booleano | Não | `false` | Habilitar notificações ricas (Extensão do Serviço iOS) | | `serverUrl` | String | Não | — | URL personalizada do servidor Xtremepush | | `useUsServer` | Booleano | Não | `false` | Use servidor regional dos EUA | | `enablePinning` | Booleano | Não | `false` | Habilitar o fixing de certificados SSL | | `certificatePath` | String | Não | — | Caminho para o certificado SSL (`.cer`) | | `devTeam` | String | Não | — | ID de equipe Apple (necessário para extensão de serviço) | | `apsEnvironment` | String | Não | `development` | APNs ambiente: `development` ou `production` | ### Exemplo: Configuração Completa ```javascript // xtremepush.config.js module.exports = {  // Required  applicationKey: 'YOUR_XTREMEPUSH_APP_KEY',  googleSenderId: 'YOUR_FCM_SENDER_ID',  // Platform-specific keys (optional)  iosAppKey: 'YOUR_IOS_APP_KEY',  androidAppKey: 'YOUR_ANDROID_APP_KEY',  // Features  enableDebugLogs: false,          // Disable in production  enableLocationServices: true,  enableGeo: true,                 // Geofencing  enableBeacons: false,            // iBeacon support  enableRichMedia: true,           // Rich push (iOS)  // Server  useUsServer: false,  serverUrl: '',  // Security  enablePinning: false,  certificatePath: './certs/xtremepush.cer',  // iOS  devTeam: 'ABCD1234EF',  apsEnvironment: 'production', }; ``` ### Alternativa: Configuração em package.json ```json {  "name": "your-app",  "xtremepush": {    "applicationKey": "YOUR_XTREMEPUSH_APP_KEY",    "googleSenderId": "YOUR_FCM_SENDER_ID",    "enableDebugLogs": true  } } ``` ## Referência da API JavaScript ### Importação do Módulo ```javascript import { NativeModules } from 'react-native'; const Xtremepush = NativeModules.Xtremepush; ``` ### Identificação do Usuário Identifique usuários entre sessões e dispositivos: ```javascript // Set user by email or custom ID Xtremepush.setUser('[email protected]'); // Set external ID for cross-platform identification Xtremepush.setExternalId('your_user_id_123'); ``` > [!TIP] > **Melhores Práticas:** Ligue `setUser()` após o login do usuário e limpe o acesso ao sair do logout. ### Rastreamento de Eventos Acompanhe as ações e comportamentos dos usuários: ```javascript // Track a custom event Xtremepush.hitEvent('purchase_completed'); // Add a tag to user profile Xtremepush.hitTag('premium_user'); // Add a tag with a value Xtremepush.hitTagWithValue('plan_type', 'enterprise'); Xtremepush.hitTagWithValue('signup_date', '2025-01-15'); ``` ### Notificações Push ```javascript // Request notification permissions (required for Android 13+) Xtremepush.requestNotificationPermissions(); // Get notification that opened the app Xtremepush.getInitialNotification().then(notification => {  if (notification) {    console.log('Notification payload:', notification);    // Navigate based on notification data  } }); ``` ### Centro de Mensagens (Caixa de Entrada) ```javascript // Open the Xtremepush message inbox Xtremepush.openInbox(); ``` ### Exemplo completo ```javascript import React, { useEffect, useState } from 'react'; import { View, Button, Text, NativeModules } from 'react-native'; const Xtremepush = NativeModules.Xtremepush; export default function App() {  const [userId, setUserId] = useState(null);  useEffect(() => {    // Request permissions on app start    Xtremepush.requestNotificationPermissions();    // Handle notification that opened the app    Xtremepush.getInitialNotification().then(notification => {      if (notification) {        console.log('Opened via notification:', notification);      }    });  }, []);  const handleLogin = (email) => {    // After successful login    Xtremepush.setUser(email);    Xtremepush.hitEvent('user_login');    setUserId(email);  };  const handlePurchase = (productId, amount) => {    Xtremepush.hitEvent('purchase');    Xtremepush.hitTagWithValue('last_purchase_amount', amount.toString());    Xtremepush.hitTag('has_purchased');  };  const handleSubscribe = (planType) => {    Xtremepush.hitTag('subscriber');    Xtremepush.hitTagWithValue('subscription_plan', planType);  };  return (