# Setting up badges for React Native

Since the React Native plugin does not contain the PWNotificationExtensionManager header, you have to perform several additional steps to implement Badges for your React Native project. 


<Aside type="note">
To implement badges for iOS Native app, please refer to the [Setting up Badges](/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/) guide.
</Aside>

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

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

#### 2. Select the "Notification Service Extension"

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

#### 3. Update the Notification Service Extension code as follows:

```
#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">
Replace the name of extension used in the line `#import "NotificationService.h"` with the name of your extension.
</Aside>

#### 4. Link dependencies to a target

React Native does not automatically link all required dependencies to a target that was created manually, so you should update the target's **Build Phases** and provide the necessary info:

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

Just click on the **+** sign under the **Compile Sources** and **Link Binary With Libraries** and search for the required libs/frameworks. 

#### 5. Add **App Groups** capability to both targets in Xcode and set the same group **for both app and extension**:

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

#### 6. Add the **PW\_APP\_GROUPS\_NAME** key to info.plists of **both** targets. The value is the name of your app group:

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