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

@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;
}

Since react-native 0.77, the AppDelegate community template has been migrated to Swift. If you have migrated to Swift or are using a new project, you need to add a xxx-Bridging-Header.h file to your project (Xcode will ask you to generate this for you if you create a dummy objective-c file and then delete it.) with #import <RNBatchPush/RNBatch.h> inside.

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();