> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/react-native-sdk/integration-guide-v2/getting-started.md).
# Getting Started (React Native)
Latest version [release notes](https://github.com/loopsocial/react-native-firework-sdk/blob/main/CHANGELOG.md)
## Prerequisites
* Firework App Id
* React Native 0.60 or greater.
* iOS project
* iOS 13 or greater.
* Xcode 14 or greater.
* Swift 5.7 or greater.
* Android Project
* JAVA\_HOME 1.8 or greater
* minSdkVersion 21 or greater
* compileSdkVersion 31 or greater
* targetSdkVersion = 31 or greater
* kotlinVersion 1.8.0 or greater
## Installation
Installing Firework React Native SDK requires the following step:
1. Install NPM package
2. Setup Native project
### Install NPM Package
```shell
npm install react-native-firework-sdk
# Or
yarn add react-native-firework-sdk
```
### Setup Native Project
#### iOS
Run `pod install` in the root directory of the iOS project. And if you encounter the following issue, you could run `pod update FireworkVideo`.
* CocoaPods could not find compatible versions for pod "FireworkVideo"
#### Android
* `build.gradle`
```gradle
buildscript {
repositories {
...
// This should be added
mavenCentral()
}
dependencies {
// We don’t require Gradle plugin version. Just an example.
classpath("com.android.tools.build:gradle:4.2.2")
...
}
}
allprojects {
repositories {
...
mavenCentral()
}
}
```
If you have integrated our SDK version **v2.17.0 or later**, please use Gradle plugin version 8.0.2 or higher.
```gradle
dependencies {
classpath("com.android.tools.build:gradle:8.0.2")
...
}
```
If your current React Native version is **below 0.71**, please add the following configuration in Gradle to use the Android dependencies of older React Native versions.
// Fix React Native version conflicts by preferring older versions
project.configurations.all {
resolutionStrategy {
// 0.66.0 is an example version.
// The version number you can change to the version you are using now.
force 'com.facebook.react:react-native:0.66.0'
// Exclude newer react-android from firework SDK
eachDependency { details ->
if (details.requested.group == 'com.facebook.react' && details.requested.name == 'react-android') {
// 0.66.0 is an example version.
// The version number you can change to the version you are using now.
details.useTarget group: 'com.facebook.react', name: 'react-native', version: '0.66.0'
}
}
}
}
* `gradle-wrapper.properties`
```properties
...
# We don’t require Gradle version. Just an example.
distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip
...
```
If you have integrated our SDK version **v2.17.0 or later**, please use Gradle version 8.0 or higher.
distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-all.zip
* `app/build.gradle`
```gradle
...
apply from: 'firework.gradle'
```
* add `android:windowSoftInputMode="adjustPan"` to the file `app/src/Androidmanifest.xml` if there is a story block in your app and use the live stream
```xml
```
* New file: `app/firework.gradle`
```gradle
android {
packagingOptions {
exclude 'META-INF/*.kotlin_module'
}
}
dependencies {
implementation "com.firework:sdk:+"
// Uncomment the next line if you want to integrate the single-host live stream
// implementation "com.firework.external.livestream:singleHostPlayer:+"
}
configurations.all {
resolutionStrategy.eachDependency { details ->
if (details.requested.group == 'com.firework' && details.requested.name == 'sdk') {
details.useVersion rootProject.ext.get("fwNativeVersion")
}
if (details.requested.group == 'com.firework.external.livestream' && details.requested.name == 'singleHostPlayer') {
details.useVersion rootProject.ext.get("fwNativeVersion")
}
}
}
```
## App Id Configuration
### iOS
Include the app ID in your app `Info.plist` file using the key `FireworkVideoAppID` .
See the image below:
### Android
Include the `appid` in your app `AndroidManifest.xml` file, like below:
```xml
...
// Include the app ID
```
## SDK Initialization
### iOS
In your iOS project, you need to call `FWReactNativeSDK.initializeSDK(nil)` in `application(:, didFinishLaunchingWithOptions:) -> Bool` method.
```swift
import react_native_firework_sdk
func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
FWReactNativeSDK.initializeSDK(nil)
return true
}
```
If your `AppDelegate` class is written by Objective-C, you should create a Swift file to call the API. For example, you could create `FireworkSupportLibraryBridge.swift` and add the following codes.
```swift
import react_native_firework_sdk
@objc
public class FireworkSupportLibraryBridge: NSObject {
@objc public static func initFireworkSDK() {
FWReactNativeSDK.initializeSDK(nil)
}
}
```
Then add `[FireworkSupportLibraryBridge initFireworkSDK];` on `application:didFinishLaunchingWithOptions:` method.
```objectivec
// You should change the file to Objective-C Generated Interface Header name.
// Generally, it's "{TargetName}-Swift.h"
#import "FireworkSdkExample-Swift.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[FireworkSupportLibraryBridge initFireworkSDK];
return YES;
}
```
#### iOS initialization options
We support passing an option to the SDK initialization method. The sample codes are:
```swift
FWReactNativeSDK.initializeSDK(
SDKInitOptions(
videoLaunchBehavior: .muteOnFirstLaunch
)
)
```
The SDK init option structure is:
```swift
public struct SDKInitOptions: Codable {
public var userId: String?
public var videoLaunchBehavior: FWRVideoLaunchBehavior?
public init(userId: String? = nil, videoLaunchBehavior: FWRVideoLaunchBehavior? = nil) {
self.userId = userId
self.videoLaunchBehavior = videoLaunchBehavior
}
}
```
### Android
Step 1: Add the `FWReactNative.init` method to your MainApplication class.
```java
class MainApplication: xxxx {
override fun onCreate() {
super.onCreate()
// ...
FWReactNativeSDK.INSTANCE.init(
this,
new FWSDKInitOptionsModel(null, FWPlayerLaunchBehavior.MuteOnFirstLaunch)
);
// ...
}
}
```
// If you have the modules below, you need to add the modules before the SDK init method
// FWReactNativeSDK.INSTANCE.addLivestreamPlayerInitializer(new SingleHostLivestreamPlayerInitializer());
// FWReactNativeSDK.INSTANCE.setImageLoader(GlideImageLoaderFactory.INSTANCE.createInstance(this));
// FWReactNativeSDK.INSTANCE.setImageLoader(PicassoImageLoaderFactory.INSTANCE.createInstance(this));
FWReactNativeSDK.INSTANCE.init(
this,
new FWSDKInitOptionsModel(null, FWPlayerLaunchBehavior.MuteOnFirstLaunch)
);
#### Android initialization options
We support passing an option to the SDK initialization method. The sample codes are:
```kotlin
FWReactNativeSDK.INSTANCE.init(
this,
new FWSDKInitOptionsModel(null, FWPlayerLaunchBehavior.MuteOnFirstLaunch)
);
```
The SDK init option structure is:
```kotlin
data class FWSDKInitOptionsModel(
val userId: String? = null,
val videoLaunchBehavior: FWPlayerLaunchBehavior? = null,
)
```
Step 2: Please check the [**Inject Image Loader**](/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader.md) section. Choose an image loader([**Glide**](/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader.md#inject-the-glide) or [**Picasso**](/firework-for-developers/flutter-sdk/integration-guide-v2/inject-android-image-loader.md#inject-the-picasso)) that works for you. If you're not sure which one to use, Glide image loader is recommended.
### JS
Call `FireworkSDK.getInstance().markInitCalled()` on the JS side.
```typescript
import FireworkSDK from 'react-native-firework-sdk';
/*
Optional: set listener for SDK init
*/
FireworkSDK.getInstance().onSDKInit = (event) => {
console.log('onSDKInit', event);
};
/*
Although we call the initialization method on the native side,
we also need to mark the initialization method as being called on the JS side.
*/
FireworkSDK.getInstance().markInitCalled();
```
{% hint style="danger" %}
Please don't call `FireworkSDK.getInstance().init()` on the JS side anymore.
{% endhint %}
## Next
### ATT compliance
Please refer to [ATT compliance React Native (iOS)](/firework-for-developers/react-native-sdk/integration-guide-v2/att-compliance-react-native-ios.md).
### Video Feed
If you want to integrate a video feed, please follow the instruction [here](/firework-for-developers/react-native-sdk/integration-guide-v2/video-feed-react-native.md).
### Shopping
If you want to integrate video shopping, please follow the instruction [here](/firework-for-developers/react-native-sdk/integration-guide-v2/shopping.md).
### Livestream support
#### Enable low latency live stream
Please refer to the following links:
1. [Configurations for iOS](/firework-for-developers/react-native-sdk/integration-guide-v2/live-stream-support.md#support-low-latency-live-stream)
2. [Configurations for Android](/firework-for-developers/react-native-sdk/integration-guide-v2/live-stream-support.md#support-the-single-host-live-stream)
#### Use modern (v2) livestream player
Please follow the instruction [here](/firework-for-developers/react-native-sdk/integration-guide-v2/live-stream-support.md#use-modern-v2-livestream-player).
### Sample Project
We provide a [sample project](https://github.com/loopsocial/react-native-firework-sdk) on Github.