# Einrichten von Badges für React Native

Da das React Native-Plugin den Header `PWNotificationExtensionManager` nicht enthält, müssen Sie mehrere zusätzliche Schritte durchführen, um Badges für Ihr React Native-Projekt zu implementieren.


<Aside type="note">
Um Badges für eine native iOS-App zu implementieren, lesen Sie bitte die Anleitung [Einrichten von Badges](/de/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/).
</Aside>

#### 1. Fügen Sie eine Notification Service Extension hinzu (File -> New -> Target...)

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

#### 2. Wählen Sie die „Notification Service Extension“ aus

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

#### 3. Aktualisieren Sie den Code der Notification Service Extension wie folgt:

```
#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">
Ersetzen Sie den Namen der Extension, der in der Zeile `#import "NotificationService.h"` verwendet wird, durch den Namen Ihrer Extension.
</Aside>

#### 4. Verknüpfen Sie Abhängigkeiten mit einem Target

React Native verknüpft nicht automatisch alle erforderlichen Abhängigkeiten mit einem manuell erstellten Target. Daher sollten Sie die **Build Phases** des Targets aktualisieren und die notwendigen Informationen bereitstellen:

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

Klicken Sie einfach auf das **+**-Zeichen unter **Compile Sources** und **Link Binary With Libraries** und suchen Sie nach den erforderlichen Bibliotheken/Frameworks.

#### 5. Fügen Sie die **App Groups**-Fähigkeit zu beiden Targets in Xcode hinzu und legen Sie dieselbe Gruppe **sowohl für die App als auch für die Extension** fest:

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

#### 6. Fügen Sie den Schlüssel **PW\_APP\_GROUPS\_NAME** zu den info.plists **beider** Targets hinzu. Der Wert ist der Name Ihrer App Group:

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