Requisitos previos

Complete estos pasos de requisitos previos antes de instalar Singular SDK de React Native para garantizar un proceso de integración sin problemas.

Instalación

Instalación del paquete SDK

Añada el SDK Singular React Native a su proyecto utilizando npm. El SDK proporciona enlaces JavaScript a los SDK nativos de Singular para iOS y Android.

Instalación a través de NPM

1. Abra el terminal: Navega al directorio raíz de tu proyecto.
2. Instale el paquete: Ejecute el siguiente comando para añadir el SDK a su proyecto:
   bash

   npm install singular-react-native --save

Vinculación de los módulos nativos

La forma de vincular el SDK depende de tu versión de React Native y de si estás utilizando Expo.

• React Native 0.60+: El SDK se enlaza automáticamente, no requiere pasos adicionales.
• React Native 0.59 o anterior: Vincula manualmente el código puente nativo:
  bash

  react-native link singular-react-native

• Proyectos Expo: Después de instalar el SDK, añádelo a tu configuración de plugins:
  app.json

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

  A continuación, reconstruya su aplicación utilizando la guía de personalización del código nativo de Expo.

Configuración de la plataforma

Configuración de iOS

Complete la configuración específica de iOS para habilitar las dependencias de CocoaPods y garantizar la correcta funcionalidad del SDK.

Instalación de las dependencias de CocoaPods

Ejecute el siguiente comando desde el directorio raíz del proyecto para instalar las dependencias de iOS necesarias:

cd ios && pod install

Configuración de Android

Configure los archivos de compilación de Android para añadir el repositorio de Singular Maven, los permisos necesarios y las dependencias.

Añadir repositorio Maven

Añade el repositorio de Singular Maven al archivo build.gradle de tu proyecto para habilitar la resolución de dependencias del SDK.

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

Añadir permisos requeridos

Añada estos permisos a su archivo AndroidManifest.xml bajo la etiqueta <manifest> para habilitar la funcionalidad central del 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" />

Compatibilidad con Samsung Galaxy Store

Para habilitar el seguimiento de referencias de instalación desde Samsung Galaxy Store, añada lo siguiente a su sitio AndroidManifest.xml:

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

Dependencias transitivas

Si ha desactivado las dependencias transitivas para Singular SDK en la configuración de Gradle, añada manualmente estas dependencias necesarias:

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")
}

Configuración de ProGuard

Al crear APK de lanzamiento, ProGuard (o R8) puede eliminar u ocultar clases del SDK. Añada estas reglas de conservación para preservar la funcionalidad de Singular.

1. Localice el archivo ProGuard: Vaya a android/app/proguard-rules.pro en su proyecto.
2. Añada reglas de conservación: Añada las siguientes reglas al archivo:
   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.** { *; }

Integración SDK

Importar clases SDK

Importe las clases del SDK de Singular en la parte superior de su archivo de aplicación principal (normalmente App.tsx o 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 el SDK

Inicialización básica

1. Obtenga las credenciales: Inicie sesión en su cuenta de Singulary vaya a Herramientas de desarrollador > Integración de SDK > Claves de SDKpara encontrar su clave y secreto de SDK.
2. Cree la configuración: Instancie un objeto SingularConfig, o un objeto plano para la API TurboModule, con sus credenciales.
3. Añadir configuración: Opcionalmente encadene métodos de configuración (legacy) o añada propiedades directamente en el objeto config (TurboModule).
4. Inicializar SDK: Llame a Singular.init()o NativeSingular.init() para iniciar el SDK.

Ejemplo de inicialización

Inicialice el SDK en el punto de entrada de su aplicación, normalmente dentro de un hook useEffect para asegurarse de que se ejecuta una vez al iniciar la aplicación.

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

Ejemplo de configuración avanzada

Configure múltiples características del SDK durante la inicialización encadenando métodos de configuración antes de llamar a 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
  );
}