# إعداد الشارات لـ React Native

نظرًا لأن إضافة React Native لا تحتوي على رأس PWNotificationExtensionManager، يجب عليك تنفيذ عدة خطوات إضافية لتطبيق الشارات لمشروع React Native الخاص بك.


<Aside type="note">
لتطبيق الشارات لتطبيق iOS Native، يرجى الرجوع إلى دليل [إعداد الشارات](/ar/developer/pushwoosh-sdk/ios-sdk/setting-up-badges/).
</Aside>

#### 1. أضف Notification Service Extension (File -> New -> Target...)

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

#### 2. حدد "Notification Service Extension"

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

#### 3. قم بتحديث كود Notification Service Extension كما يلي:

```
#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">
استبدل اسم الامتداد المستخدم في السطر `#import "NotificationService.h"` باسم الامتداد الخاص بك.
</Aside>

#### 4. ربط التبعيات بالهدف (target)

لا يقوم React Native بربط جميع التبعيات المطلوبة تلقائيًا بالهدف (target) الذي تم إنشاؤه يدويًا، لذا يجب عليك تحديث **Build Phases** للهدف وتقديم المعلومات اللازمة:

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

فقط انقر على علامة **+** تحت **Compile Sources** و **Link Binary With Libraries** وابحث عن المكتبات/الأطر المطلوبة.

#### 5. أضف إمكانية **App Groups** إلى كلا الهدفين في Xcode وقم بتعيين نفس المجموعة **لكل من التطبيق والامتداد**:

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

#### 6. أضف مفتاح **PW\_APP\_GROUPS\_NAME** إلى ملفات info.plists لكلا الهدفين. القيمة هي اسم مجموعة التطبيق الخاصة بك:

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