# Guía de integración básica del SDK de React Native
Esta sección contiene información sobre cómo integrar el SDK de Pushwoosh para React Native en su aplicación.
## Prerrequisitos
Para integrar el SDK de Pushwoosh para React Native en su aplicación, necesitará lo siguiente:
## Pasos de integración
### 1. Añadir la dependencia del SDK de Pushwoosh para React Native
Añada la dependencia del SDK de Pushwoosh para React Native a su proyecto:
```bash
npm install pushwoosh-react-native-plugin --save
```
### 2. Inicialización del SDK de React Native
En el componente raíz de su archivo `index.js`:
- Importe el `pushwoosh-react-native-plugin`.
- Inicialice el SDK de Pushwoosh.
- Llame a `register()` en su lógica de inicialización para registrarse para recibir notificaciones push.
```javascript title="index.js"
import Pushwoosh from 'pushwoosh-react-native-plugin';
AppRegistry.registerComponent(appName, () => App);
Pushwoosh.init({
"pw_appid" : "__YOUR_APP_ID__"
});
Pushwoosh.register();
```
Donde:
- `__YOUR_APP_ID__` es el código de la aplicación del Panel de Control de Pushwoosh.
### 3. Configuración nativa de iOS
#### 3.1 Capacidades
Para habilitar las Notificaciones Push en su proyecto, necesita añadir ciertas capacidades.
En la sección Signing & Capabilities, añada las siguientes capacidades:
- `Push Notifications`
- `Background Modes`. Después de añadir esta capacidad, marque la casilla de `Remote notifications`.
Si tiene la intención de usar Notificaciones Sensibles al Tiempo (iOS 15+), añada también la capacidad de `Time Sensitive Notifications`.
#### 3.2 Info.plist
En su `Runner/Info.plist` establezca la clave `__PUSHWOOSH_DEVICE_API_TOKEN__` con el [Token de API de Dispositivo de Pushwoosh](/es/developer/api-reference/api-access-token/#device-api-token):
```swift title="info.plist"
Pushwoosh_API_TOKEN__PUSHWOOSH_DEVICE_API_TOKEN__
```
#### 3.3 Seguimiento de la entrega de mensajes
Debe añadir un objetivo de Extensión de Servicio de Notificaciones (Notification Service Extension) a su proyecto. Esto es esencial para un seguimiento preciso de la entrega y para funciones como Rich Media en iOS.
Siga los [pasos de la guía nativa](/es/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) para añadir el objetivo de la extensión y el código de Pushwoosh necesario dentro de ella.
#### 3.4 Instalación de dependencias para el proyecto de React Native en iOS
Para instalar las dependencias del proyecto de React Native en iOS, navegue a la carpeta ```ios``` en la terminal y ejecute:
```bash
pod install --repo-update
```
### 4. Configuración nativa de Android
#### 4.1 Instalar dependencias
Asegúrese de que las dependencias y los plugins necesarios se añaden a sus scripts de Gradle:
Añada el plugin de Gradle de Google Services a las dependencias de su `build.gradle` a nivel de proyecto:
```groovy title="android/build.gradle"
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}
```
Aplique el plugin en su archivo `build.gradle` a nivel de aplicación:
```groovy title="app/build.gradle"
apply plugin: 'com.google.gms.google-services'
```
#### 4.2 Añadir archivo de configuración de Firebase
Coloque el archivo `google-services.json` en la carpeta `android/app` de su directorio de proyecto.
#### 4.3 Añadir metadatos de Pushwoosh
En su `main/AndroidManifest.xml`, añada el [Token de API de Dispositivo de Pushwoosh](/es/developer/api-reference/api-access-token/#device-api-token) dentro de la etiqueta ``:
```xml title="AndroidManifest.xml"
```
> **Importante:** Asegúrese de dar al token acceso a la aplicación correcta en su Panel de Control de Pushwoosh. [Aprenda más](/es/developer/api-reference/api-access-token/#edit-token)
### 5. Ejecutar el proyecto
1. Compile y ejecute el proyecto.
2. Vaya al Panel de Control de Pushwoosh y [envíe una notificación push](/es/product/messaging-channels/push-notifications/send-push-notifications/one-time-push).
3. Debería ver la notificación en la aplicación.
## Integración extendida
En este punto, ya ha integrado el SDK y puede enviar y recibir notificaciones push. Ahora, exploremos la funcionalidad principal.
### Escuchadores de eventos de notificaciones push
En el SDK de Pushwoosh hay dos escuchadores de eventos, diseñados para manejar las notificaciones push:
- El evento `pushReceived` se dispara cuando se recibe una notificación push.
- El evento `pushOpened` se dispara cuando un usuario abre una notificación.
Debe configurar estos escuchadores de eventos justo después de la inicialización del SDK al inicio de la aplicación:
```javascript
import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';
class PushwooshNotificationHandler {
setupPushListeners() {
DeviceEventEmitter.addListener('pushReceived', (e) => {
console.warn("Push received: " + JSON.stringify(e));
});
DeviceEventEmitter.addListener('pushOpened', (e) => {
console.warn("Push accepted: " + JSON.stringify(e));
});
}
}
```
### Configuración de usuario
Al centrarse en el comportamiento y las preferencias individuales de los usuarios, puede ofrecer contenido personalizado, lo que conduce a una mayor satisfacción y lealtad del usuario.
```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class Registration {
afterUserLogin(user: User) {
// Establecer ID de usuario
Pushwoosh.setUserId(user.getId());
// Establecer correos electrónicos del usuario
Pushwoosh.setEmails(user.getEmailList());
// Establecer número de SMS del usuario
Pushwoosh.registerSMSNumber(user.getPhoneNumber());
// Establecer número de WhatsApp del usuario
Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());
// Establecer información adicional del usuario como etiquetas para Pushwoosh
Pushwoosh.setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}
```
### Etiquetas
Las etiquetas son pares clave-valor asignados a usuarios o dispositivos, que permiten la segmentación basada en atributos como preferencias o comportamiento, lo que posibilita la mensajería dirigida.
```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class UpdateUser {
afterUserUpdateProfile(user: User) {
// Establecer lista de categorías favoritas
Pushwoosh.setTags({
"favorite_categories": user.getFavoriteCategoriesList()
});
// Establecer información de pago
Pushwoosh.setTags({
"is_subscribed": user.isSubscribed(),
"payment_status": user.getPaymentStatus(),
"billing_address": user.getBillingAddress()
});
}
}
```
### Eventos
Los eventos son acciones específicas del usuario u ocurrencias dentro de la aplicación que se pueden rastrear para analizar el comportamiento y activar los mensajes o acciones correspondientes.
```javascript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class Registration {
// Rastrear evento de inicio de sesión
afterUserLogin(user: User) {
Pushwoosh.postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
// Rastrear evento de compra
afterUserPurchase(product: Product) {
Pushwoosh.postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}
```
## Solución de problemas
Si encuentra algún problema durante el proceso de integración, consulte la sección de [soporte y comunidad](/es/developer/pushwoosh-sdk/support-and-community).