Vanilla Integration

If you are using Expo into your application, you can jump directly to the Expo integration step.

Installation

Start installing the Batch React-Native plugin with the package manager of your choice:

Yarn

yarn add @batch.com/react-native-plugin

NPM

npm install @batch.com/react-native-plugin

Android extra steps

Configure auto-linking

Create or adapt the react-native.config.js file at the root of your project:

react-native.config.js

module.exports = {  dependencies: {  '@batch.com/react-native-plugin': {  platforms: {  android: {  packageInstance: 'new RNBatchPackage(this.getApplication())',  },  },  },  }, }

Install dependencies

Setup the required dependencies in gradle scripts:

android/build.gradle

buildscript {  ...  dependencies {  ...  classpath 'com.google.gms:google-services:4.3.4'  } }

android/app/build.gradle

dependencies {  implementation platform('com.google.firebase:firebase-bom:28.0.0') // needed if you don't have @react-native-firebase/app  implementation "com.google.firebase:firebase-messaging" // needed if you don't have @react-native-firebase/messaging  ... }  apply plugin: 'com.google.gms.google-services'

Firebase config

Add your google-services.json file to android/app.

Configure onNewIntent

Add the following in your MainActivity

Kotlin

MainActivity.kt

// import android.content.Intent // import com.batch.android.Batch  override fun onNewIntent(intent: Intent?) {  super.onNewIntent(intent)  Batch.onNewIntent(this, intent) }

Java

MainActivity.java

// import android.content.Intent; // import com.batch.android.Batch;  @Override public void onNewIntent(Intent intent) {  super.onNewIntent(intent);  Batch.onNewIntent(this, intent); }

Small push notification icon

Follow the Customizing Batch notifications guide to display your notification icon correctly on Android.

iOS extra steps

Install dependencies

As Batch React-Native plugin integrate the iOS Batch SDK, you have to install native dependencies.

cd ios && pod install

By default, React-Native links libraries statically, but if you do it dynamically with use_framework!, please add the following to your Podfile:

Podfile

 config = use_native_modules!   # From here  $static_framework = ['Batch']  pre_install do |installer|  Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}  installer.pod_targets.each do |pod|  if $static_framework.include?(pod.name)  def pod.build_type;  Pod::BuildType.static_library  end  end  end  end  # To here  use_react_native!(  :path => config["reactNativePath"],  :hermes_enabled => true  )

Enable Push Capabilities

Open the .xcworkspace in the ios folder. The in the project window:

• Select your project in the sidebar

• Go to Signing & Capabilities

• Press on + Capability

• Add Push Notifications

Start the SDK

Add the following in your AppDelegate:

Swift

import RNBatchPush  @main class AppDelegate: RCTAppDelegate {  override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {  ...  /// Start Batch Plugin  RNBatch.start()  ...  return super.application(application, didFinishLaunchingWithOptions: launchOptions)  }  }

Objective-C

#import <RNBatchPush/RNBatch.h> // or, use #import "RNBatch.h" if the framework import didn't work  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  ...  /// Start Batch Plugin  [RNBatch start];  ...  return YES; }

Setting up your APIKey

iOS

Edit your Info.plist and add the following:

Info.plist

<key>BatchAPIKey</key> <string>YOUR_BATCH_API_KEY</string>

Android

Edit your android/app/build.gradle and add:

Kotlin

android/app/build.gradle

 defaultConfig {  // ...  resValue("string", "BATCH_API_KEY", "YOUR_BATCH_API_KEY") }

Groovy

android/app/build.gradle

defaultConfig {  // ...  resValue "string", "BATCH_API_KEY", "YOUR_BATCH_API_KEY" }

YOUR_BATCH_API_KEY is your SDK API Key. You'll find it in Settings → General

Enable push notifications

Add the following in your app code, ideally the first view a user sees when opening the app:

import { BatchPush } from '@batch.com/react-native-plugin'  // Ask for the permission to display notifications // The push token will automatically be fetched by the SDK BatchPush.requestNotificationAuthorization()  // iOS ONLY: // If you are using Batch plugin < 7.0.0 please use the following method or update the plugin. // BatchPush.registerForRemoteNotifications();  // Alternatively, you can call requestNotificationAuthorization later // But, you should always refresh your token on each application start // This will make sure that even if your user's token changes, you still get notifications // BatchPush.refreshToken();