# React Native SDK Setup
## 1. Requirements
{% hint style="info" %}
#### Can be used with other push solutions!
To use FlareLane with other push solutions, you must follow some additional steps. Refer to [iOS: Disable Swizzling](/guide-for-developers/mobile-sdk-setup/additional-setup/ios-disable-swizzling.md) for details.
{% endhint %}
* [Sign up](https://console.flarelane.com) to FlareLane and create a project
***
## 2. Setup a Certificate
Follow this guide below:
* [Android: FCM Setup (v1)](/guide-for-developers/mobile-sdk-setup/additional-setup/android-fcm-setup-v1.md)
* [iOS: APNS Setup](/guide-for-developers/mobile-sdk-setup/additional-setup/ios-apns-setup.md)
***
## 3. Install SDK
```
$ yarn add @flarelane/react-native-sdk@1.8.2
```
***
## 4. Android Setup
To ensure a smooth process for obtaining permission for push notifications from users, please set compileSdkVersion to at least 33
{% tabs %}
{% tab title="app/build.gradle" %}
{% endtab %}
{% endtabs %}
***
## 5. iOS Setup
Go to `Signing & Capabilities` and click `+ Capability` and add `Push Notifications`
{% hint style="info" %}
To support iOS Rich Notifications, you need to add `Notification Service Extension`
{% endhint %}
In Xcode, select `Notification Service Extension` from File > New > Target
Enter the Product Name. In this guide, we will define it as `FlareLaneNotificationServiceExtension`.
Set `Minimum Deployments` of the Notification Service Extension Target you just created to be the same as the main app target you are currently using.
Add the following code to your `Podfile`
{% tabs %}
{% tab title="Podfile" %}
// Enable the Dynamic Framework
use_frameworks!
// Add the name of the extension created previously.
// In this guide, FlareLaneNotificationServiceExtension.
target 'FlareLaneNotificationServiceExtension' do
pod 'FlareLane', '1.7.3'
end
{% endtab %}
{% endtabs %}
Run `pod install` in the terminal
Run Xcode again and edit the extension's file. Delete the pre-filled codes and only inherit `FlareLaneNotificationServiceExtension`.
{% tabs %}
{% tab title="Swift(NorificationService.swift)" %}
```swift
import FlareLane
class NotificationService: FlareLaneNotificationServiceExtension {
}
```
{% endtab %}
{% tab title="Objective-C(NotificationService.h/.m)" %}
```objectivec
// NotificationService.h
@import FlareLane;
@interface NotificationService : FLNNotificationServiceExtension
@end
// NotificationService.m
#import "NotificationService.h"
@implementation NotificationService
@end
```
{% endtab %}
{% endtabs %}
***
## 6. Initialization
Add the following code to Main App(e.g. App.tsx). You can check your project ID at FlareLane console's **Project**.
{% tabs %}
{% tab title="App.tsx" %}
```javascript
import FlareLane from '@flarelane/react-native-sdk';
// To subscribe later, set the 2nd parameter to false and then run the .subscribe() later.
FlareLane.initialize('INPUT_YOUR_PROJECT_ID', true);
```
{% endtab %}
{% endtabs %}
***
## 7. Test
After completing all the steps, build and run your app. Devices that subscribe to push notifications will be automatically added to FlareLane console's **All Devices**.
Before actual deployment, be sure to verify that the push notifications are being received properly on the device and that the statistics are accurately recorded when the push notifications are clicked.
***
## 8. Identify your user
FlareLane's device is 'anonymous' and you can match the device with your user based on the unique user ID that identifies your user.
{% hint style="info" %}
Setting up [User ID](/data-integration/user-id.md) has many benefits. You can distinguish whether a user has signed-up, and push notifications can be sent based on the User ID.
{% endhint %}
Usually, when a user sign-up or log-in, you should execute `setUserId`.
{% tabs %}
{% tab title="JS(RN)" %}
```javascript
FlareLane.setUserId("USER_ID");
```
{% endtab %}
{% endtabs %}
***
## 9. Additional Setup
### Android
To set a accent color or channel name, add the following lines:
{% tabs %}
{% tab title="values/strings.xml" %}
<resources>
<!-- accent color -->
<string name="flarelane_notification_accent_color">#BC0000</string>
<!-- channel name -->
<string name="flarelane_default_channel_name">All Notifications</string>
</resources>
{% endtab %}
{% endtabs %}
To customize notification icons, see below:
* [Android: Notification Icons](/guide-for-developers/mobile-sdk-setup/additional-setup/android-notification-icons.md)
To use [Journeys](broken://pages/c8d09eecz6Pn5E2pheMD) or [Message Personalization](broken://pages/Z8YOEAwK3zXqYXBmgIAm), integrate custom data via SDK or API:
* [Data Integration](/data-integration.md)
***
## Resources
[Mobile SDK Reference](/guide-for-developers/mobile-sdk-reference.md)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://guide.flarelane.com/guide-for-developers/mobile-sdk-setup/react-native-sdk-setup.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.