# Configuración de badges para React Native

Dado que el plugin de React Native no contiene el encabezado PWNotificationExtensionManager, debes realizar varios pasos adicionales para implementar Badges en tu proyecto de React Native.


<Aside type="note">
Para implementar badges en una aplicación nativa de iOS, consulta la guía [Configuración de Badges](/es/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/).
</Aside>

#### 1. Agrega la Extensión de Servicio de Notificación (File -> New -> Target...)

<img src="/shared-7.webp" alt=""/>

#### 2. Selecciona la "Extensión de Servicio de Notificación"

<img src="/react-native-setting-up-badges-for-react-native-1.webp" alt=""/>

#### 3. Actualiza el código de la Extensión de Servicio de Notificación de la siguiente manera:

```
#import "NotificationService.h"
#import <Pushwoosh/PWNotificationExtensionManager.h>

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
  self.contentHandler = contentHandler;
  self.bestAttemptContent = [request.content mutableCopy];

  [[PWNotificationExtensionManager sharedManager] handleNotificationRequest:request contentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
  // Called just before the extension will be terminated by the system.
  // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
  self.contentHandler(self.bestAttemptContent);
}

@end
```

<Aside type="note">
Reemplaza el nombre de la extensión utilizado en la línea `#import "NotificationService.h"` con el nombre de tu extensión.
</Aside>

#### 4. Vincula las dependencias a un target

React Native no vincula automáticamente todas las dependencias requeridas a un target que fue creado manualmente, por lo que debes actualizar las **Build Phases** del target y proporcionar la información necesaria:

<img src="/react-native-setting-up-badges-for-react-native-2.webp" alt=""/>

Simplemente haz clic en el signo **+** en **Compile Sources** y **Link Binary With Libraries** y busca las bibliotecas/frameworks requeridos.

#### 5. Agrega la capacidad de **App Groups** a ambos targets en Xcode y establece el mismo grupo **tanto para la aplicación como para la extensión**:

<img src="/react-native-setting-up-badges-for-react-native-3.webp" alt=""/>

#### 6. Agrega la clave **PW\_APP\_GROUPS\_NAME** a los info.plists de **ambos** targets. El valor es el nombre de tu grupo de aplicación:

<img src="/react-native-setting-up-badges-for-react-native-4.webp" alt=""/>