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)

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 install xtremepush-react-native-cli

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:

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:

// 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:

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

2. Coloque no seu android/app/ diretório:

Verifique se o arquivo existe

# Verify the file exists
ls android/app/google-services.json

3.2 Construa o App Android

# 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:

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

cd ios && pod install && cd ..

4.2 Abrir no Xcode

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

npx react-native run-ios

Erros comuns de compilação do iOS

Instalação do pod falhou

Solução:

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:

// 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:

npx xtremepush-setup verify

Para resultados detalhados:

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

Exemplo: Configuração Completa

// 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

{
  "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

import { NativeModules } from 'react-native';
const Xtremepush = NativeModules.Xtremepush;

Identificação do Usuário

Identifique usuários entre sessões e dispositivos:

// Set user by email or custom ID
Xtremepush.setUser('[email protected]');

// Set external ID for cross-platform identification
Xtremepush.setExternalId('your_user_id_123');

Rastreamento de Eventos

Acompanhe as ações e comportamentos dos usuários:

// 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

// 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)

// Open the Xtremepush message inbox
Xtremepush.openInbox();

Exemplo completo

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 (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <Button
        title="Login"
        onPress={() => handleLogin('[email protected]')}
      />
      <Button
        title="Track Purchase"
        onPress={() => handlePurchase('prod_123', 99.99)}
      />
      <Button
        title="Subscribe to Pro"
        onPress={() => handleSubscribe('pro')}
      />
      <Button
        title="Open Inbox"
        onPress={() => Xtremepush.openInbox()}
      />
    </View>
  );
}

Recursos Avançados

Notificações de Mídia Enriquecida (iOS)

Exiba imagens, vídeos e botões interativos nas notificações:

1. Ativar na configuração:

   module.exports = {
     enableRichMedia: true,
     devTeam: 'YOUR_APPLE_TEAM_ID',
   };

2. Integração de reprodução:

   npx xtremepush-setup ios

3. No Xcode, verifique se o alvo XtremePushNotificationServiceExtension existe

4. Adicionar a capacidade de Notificações Push ao alvo da extensão

   Mídia rica exige que o devTeam seja definido para que a Extensão de Serviço seja criada.

Serviços de Localização e Geofencing

Permitir a segmentação baseada em localização:

module.exports = {
  enableLocationServices: true,  // Basic location
  enableGeo: true,               // Geofencing
  enableBeacons: true,           // iBeacon proximity
};

Permissões adicionadas automaticamente:

• Android: ACCESS_FINE_LOCATION, ACCESS_COARSE_LOCATION, ACCESS_BACKGROUND_LOCATION

• iOS: Descrições de uso de localização no Info.plist

Fixação de Certificado SSL

Para maior segurança em ambientes corporativos:

module.exports = {
  enablePinning: true,
  certificatePath: './certs/xtremepush.cer',
};

Referência de Comando CLI

Opções de Comando

Exemplos

# Preview what will change
npx xtremepush-setup init --dry-run

# Use custom config file
npx xtremepush-setup init --config ./config/prod.config.js

# Android only, no prompts
npx xtremepush-setup android --yes

# iOS only with verbose verification
npx xtremepush-setup ios && npx xtremepush-setup verify --verbose

Solução de problemas

Notificações Não Recebidas

1. Verifique o registro do dispositivo: Ative enableDebugLogs: true e procure o registro de token de dispositivo

2. Verificar credenciais push: Garantir que os certificados/chaves estejam configurados no painel Xtremepush

3. Teste a partir do painel: Envie uma notificação de teste das Campanhas → do Xtremepush

4. Verifique as configurações do dispositivo: Certifique-se de que as notificações estejam ativadas para o seu app

Verificação de Integração Falhada

Realize uma verificação detalhada:

npx xtremepush-setup verify --verbose

Verificações manuais:

# Android - Check SDK initialization
grep -r "XtremePush" android/app/src/main/java/

# iOS - Check SDK initialization
grep -r "XtremePush" ios/*/AppDelegate.*

Modo Depuração

Ative a saída de CLI prolixa:

DEBUG=1 npx xtremepush-setup init

Obtendo Apoio

Se os problemas persistirem:

1. Corrida: npx xtremepush-setup verify --verbose

2. Facilitar: enableDebugLogs: true

3. Entre em contato com o suporte da Xtremepush com:

   • Saída de verificação

   • Logs de dispositivos/simuladores

   • Configuração (chaves sensíveis a redigir)

O que é Modificado

Arquivos Android

Arquivos iOS

Versões do SDK

Suporte ao Idioma

A CLI detecta e gera automaticamente código para: