# Configuration des badges pour React Native

Étant donné que le plugin React Native ne contient pas l'en-tête PWNotificationExtensionManager, vous devez effectuer plusieurs étapes supplémentaires pour implémenter les badges pour votre projet React Native.


<Aside type="note">
Pour implémenter les badges pour une application native iOS, veuillez vous référer au guide [Configuration des badges](/fr/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/).
</Aside>

#### 1. Ajoutez une Notification Service Extension (File -> New -> Target...)

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

#### 2. Sélectionnez la « Notification Service Extension »

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

#### 3. Mettez à jour le code de la Notification Service Extension comme suit :

```
#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">
Remplacez le nom de l'extension utilisé dans la ligne `#import "NotificationService.h"` par le nom de votre extension.
</Aside>

#### 4. Liez les dépendances à une cible

React Native ne lie pas automatiquement toutes les dépendances requises à une cible qui a été créée manuellement, vous devez donc mettre à jour les **Build Phases** de la cible et fournir les informations nécessaires :

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

Cliquez simplement sur le signe **+** sous **Compile Sources** et **Link Binary With Libraries** et recherchez les bibliothèques/frameworks requis.

#### 5. Ajoutez la capacité **App Groups** aux deux cibles dans Xcode et définissez le même groupe **pour l'application et l'extension** :

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

#### 6. Ajoutez la clé **PW\_APP\_GROUPS\_NAME** aux fichiers info.plist des **deux** cibles. La valeur est le nom de votre groupe d'applications :

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