Pré-requisitos

Conclua estas etapas de pré-requisito antes de instalar o Singular SDK do React Native para garantir um processo de integração tranquilo.

Instalação do SDK

Instalando o pacote SDK

Adicione o Singular SDK do React Native ao seu projeto usando npm. O SDK fornece ligações JavaScript para os SDKs nativos do Singular para iOS e Android.

Instalar via NPM

1. Abra o terminal: Navegue até o diretório raiz do seu projeto.
2. Instalar o pacote: Execute o seguinte comando para adicionar o SDK ao seu projeto:
   bash

   npm install singular-react-native --save

Vinculando os módulos nativos

Como você vincula o SDK depende da sua versão do React Native e se você está usando Expo.

• React Native 0.60+: O SDK é vinculado automaticamente, sem necessidade de etapas adicionais.
• React Native 0.59 ou anterior: Vincular manualmente o código de ponte nativo:
  bash

  react-native link singular-react-native

• Projetos da Expo: Depois de instalar o SDK, adicione-o à sua configuração de plug-ins:
  app.json

  {
    "expo": {
      "plugins": ["singular-react-native"]
    }
  }

  Em seguida, reconstrua a sua aplicação utilizando o guia de personalização do código nativo da Expo.

Configuração da plataforma

Configuração do iOS

Conclua a configuração específica do iOS para ativar as dependências do CocoaPods e garantir a funcionalidade adequada do SDK.

Instalar as dependências do CocoaPods

Execute o seguinte comando a partir do diretório raiz do seu projeto para instalar as dependências necessárias do iOS:

cd ios && pod install

Configuração do Android

Configure seus arquivos de compilação do Android para adicionar o repositório Singular Maven, as permissões necessárias e as dependências.

Adicionar repositório Maven

Adicione o repositório Singular Maven ao arquivo build.gradle do seu projeto para habilitar a resolução de dependência do SDK.

allprojects {
  repositories {
    maven { url 'https://maven.singular.net/' }
  }
}

Adicionar permissões necessárias

Adicione essas permissões ao seu arquivo AndroidManifest.xml sob a tag <manifest> para habilitar a funcionalidade principal do SDK.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="BIND_GET_INSTALL_REFERRER_SERVICE" />
<uses-permission android:name="com.android.vending.CHECK_LICENSE" />
<uses-permission android:name="com.google.android.gms.permission.AD_ID" />

Suporte da Samsung Galaxy Store

Para ativar o rastreio de referenciadores de instalação da Samsung Galaxy Store, adicione o seguinte ao seu AndroidManifest.xml:

<queries>
   <package android:name="com.sec.android.app.samsungapps" />
</queries>

Dependências transitivas

Se tiver desativado as dependências transitivas para o Singular SDK na sua configuração Gradle, adicione manualmente estas dependências necessárias:

dependencies {
    // Required for install referrer tracking
    implementation("com.android.installreferrer:installreferrer:2.2")

    // Required for App Set ID
    implementation("com.google.android.gms:play-services-appset:16.0.0")
}

Configuração do ProGuard

Ao construir APKs de lançamento, o ProGuard (ou R8) pode remover ou ofuscar classes SDK. Adicione estas regras de manutenção para preservar a funcionalidade Singular.

1. Localizar o arquivo ProGuard: Navegue até android/app/proguard-rules.pro em seu projeto.
2. Adicionar regras de manutenção: Anexe as seguintes regras ao arquivo:
   proguard-rules.pro

   # Preserve Singular SDK classes
   -keep class com.singular.sdk.** { *; }
   
   # Preserve Android Install Referrer library
   -keep public class com.android.installreferrer.** { *; }
   
   # Uncomment if using Singular revenue tracking with Google Play Billing Library
   #-keep public class com.android.billingclient.** { *; }

Integração do SDK

Importar classes do SDK

Importe as classes do Singular SDK na parte superior do arquivo do seu aplicativo principal (normalmente App.tsx ou App.js).

// Direct TurboModule API initialization (React Native 0.76+)

// Import Native API and EventEmitter
import NativeSingular from 'singular-react-native/jsNativeSingular';
import { NativeEventEmitter } from 'react-native';

import Singular, { SingularConfig } from 'singular-react-native';
      

Inicializar o SDK

Inicialização básica

1. Obter credenciais: Faça login na sua conta do Singulare navegue até Ferramentas do desenvolvedor > Integração do SDK > Chaves do SDKpara encontrar sua chave e segredo do SDK.
2. Criar configuração: Instanciar um objeto SingularConfig, ou um objeto simples para a API TurboModule, com as suas credenciais.
3. Adicionar configuração: Opcionalmente, encadeie métodos de configuração (legado) ou adicione propriedades diretamente no objeto de configuração (TurboModule).
4. Inicializar o SDK: Chame Singular.init()ou NativeSingular.init() para iniciar o SDK.

Exemplo de inicialização

Inicialize o SDK no ponto de entrada do seu aplicativo, normalmente dentro de um gancho useEffect para garantir que ele seja executado uma vez no início do aplicativo.

// TurboModule direct API (React Native 0.76+ New Architecture)
import React, { useEffect } from 'react';
import NativeSingular from 'singular-react-native/jsNativeSingular';

export default function App() {
  useEffect(() => {
    const config: SingularConfig = {
      apikey: 'YOUR_SDK_KEY',
      secret: 'YOUR_SDK_SECRET',
      enableLogging: true,
      logLevel: 3,
    };

    NativeSingular.init(config);

  }, []);
  
  return (
    // Your app components
  );
}

import React, { useEffect } from 'react';
import Singular, { SingularConfig } from 'singular-react-native';

export default function App() {
  useEffect(() => {
    const config = new SingularConfig('YOUR_SDK_KEY', 'YOUR_SDK_SECRET')
      .withLoggingEnabled()
      .withLogLevel(3);
    
    Singular.init(config);
  }, []);
  
  return (
    // Your app components
  );
}
      

Exemplo de configuração avançada

Configure vários recursos do SDK durante a inicialização encadeando métodos de configuração antes de chamar init().

// TurboModule direct API (React Native 0.76+ New Architecture)
import React, { useEffect } from 'react';
import NativeSingular from 'singular-react-native/jsNativeSingular';
import { NativeEventEmitter } from 'react-native';

export default function App() {
  useEffect(() => {
    const config: SingularConfig = {
      apikey: 'YOUR_SDK_KEY',
      secret: 'YOUR_SDK_SECRET',
      customUserId: 'user_123456',
      limitDataSharing: false,
      waitForTrackingAuthorizationWithTimeoutInterval: 300
    };

    NativeSingular.init(config);

    // Register event listener
    const emitter = new NativeEventEmitter(NativeSingular);
    emitter.addListener('SingularLinkHandler', (params) => {
      console.log('Singular: Deep link:', params.deeplink);
      console.log('Singular: Passthrough:', params.passthrough);
      console.log('Singular: Is deferred:', params.isDeferred);
      console.log('Singular: urlParameters:', params.urlParameters);
    });

  }, []);
  
  return (
    // Your app components
  );
}

import React, { useEffect } from 'react';
import { Singular, SingularConfig } from 'singular-react-native';

export default function App() {
  useEffect(() => {
    const config = new SingularConfig(
      'YOUR_SDK_KEY',
      'YOUR_SDK_SECRET'
    )
      // User identification
      .withCustomUserId('user_123456')

      // Privacy settings
      .withLimitDataSharing(false)

      // Deep linking
      .withSingularLink((params: SingularLinkParams) => {
        console.log('Singular: Deep link:', params.deeplink);
        console.log('Singular: Passthrough:', params.passthrough);
        console.log('Singular: Is deferred:', params.isDeferred);
        console.log('Singular: urlParameters:', params.urlParameters);
      })

      // iOS-specific
      .withWaitForTrackingAuthorizationWithTimeoutInterval(300)

      // Debugging
      .withLoggingEnabled()
      .withLogLevel(3);

    Singular.init(config);
  }, []);

  return (
    // Your app components
  );
}