# Configurando badges para React Native

Como o plugin React Native não contém o cabeçalho PWNotificationExtensionManager, você precisa executar várias etapas adicionais para implementar Badges para o seu projeto React Native.


<Aside type="note">
Para implementar badges para um aplicativo iOS Nativo, consulte o guia [Configurando Badges](/pt/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/).
</Aside>

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

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

#### 2. Selecione a "Notification Service Extension"

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

#### 3. Atualize o código da Notification Service Extension da seguinte forma:

```
#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">
Substitua o nome da extensão usado na linha `#import "NotificationService.h"` pelo nome da sua extensão.
</Aside>

#### 4. Vincule as dependências a um target

O React Native não vincula automaticamente todas as dependências necessárias a um target que foi criado manualmente, então você deve atualizar as **Build Phases** do target e fornecer as informações necessárias:

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

Basta clicar no sinal **+** em **Compile Sources** e **Link Binary With Libraries** e procurar pelas bibliotecas/frameworks necessários.

#### 5. Adicione a capacidade (capability) **App Groups** a ambos os targets no Xcode e defina o mesmo grupo **tanto para o aplicativo quanto para a extensão**:

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

#### 6. Adicione a chave **PW\_APP\_GROUPS\_NAME** aos info.plists de **ambos** os targets. O valor é o nome do seu grupo de aplicativos (app group):

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