React Native integration Of Batch.com Push Notifications SDK

React Native integration Of Batch.com Push Notifications SDK

The official React Native plugin for the Batch SDK. Made with ❤️ by BAM and Batch.

React Native Batch

The official React Native plugin for the Batch SDK. Made with ❤️ by BAM and Batch.

Development setup

Installation

1. Install the React Native Batch plugin

  • Install using yarn add @bam.tech/react-native-batch
  • Or npm i @bam.tech/react-native-batch

2. Setup iOS dependencies

  • Go to /ios
  • If you don't have a Podfile yet run pod init
  • Add pod 'Batch', '~>1.13' to your Podfile
  • Run pod install

If you don't use CocoaPods, you can integrate Batch SDK manually.

  • Download the SDK
  • Unzip the SDK
  • Here instead of following the readme inside the Batch.embeddedframework folder you downloaded follow the below steps.
  • Create a Batch folder in {your-project}/ios/Batch
  • Copy your Batch framework inside {your-project}/ios/Batch
  • Open your project in XCode. Right click your ".xcodeproj" and click "Add Files to {yourProjectName}…". Find the "Batch" folder you created and select it. Before clicking "Add", to the left you'll see an "Options" button. Click it, and make sure "Create Groups" and "Add to targets" for your project are both selected.
react-native version link the plugin
>= 0.60.0 - auto-linking is supported
< 0.60.0 - From the root folder
  • Run react-native link @bam.tech/react-native-batch |

4. Extra steps on Android

a. Install Batch dependencies
// 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:25.12.0')
    implementation "com.google.firebase:firebase-messaging"
    ...
}

apply plugin: 'com.google.gms.google-services'
b. Add your Batch key
// android/app/build.gradle

defaultConfig {
    ...
    resValue "string", "BATCH_API_KEY", "%YOUR_BATCH_API_KEY%"
}
c. Add your Firebase config
  • Add the google-services.json file to /android/app

5. Extra steps on iOS

a. Enable Push Capabilities
  • In the project window
  • Go to Capabilities
  • Toggle Push Notifications
b. Configure your Batch key

Go to the Batch dashboard, create an iOS app and upload your iOS push certificate.

Then, in Info.plist, provide:

<key>BatchAPIKey</key>
<string>%YOUR_BATCH_API_KEY%</string>
c. Start Batch in AppDelegate.m

In AppDelegate.m, start Batch:

#import "RNBatch.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [RNBatch start:false]; // or true if you want the do not disturb mode
    ...
    return YES;
}

Usage

Start Batch

import { Batch } from '@bam.tech/react-native-batch';

Batch.start();

Enabling push notifications on iOS

import { BatchPush } from '@bam.tech/react-native-batch';

BatchPush.registerForRemoteNotifications();

Other

Small push notification icon

For better results on Android 5.0 and higher, it is recommended to add a Small Icon and Notification Color. An icon can be generated using Android Studio's asset generator: as it will be tinted and masked by the system, only the alpha channel matters and will define the shape displayed. It should be of 24x24dp size. If your notifications shows up in the system statusbar in a white shape, this is what you need to configure.

This can be configured in the manifest as metadata in the application tag:

<!-- Assuming there is a push_icon.png in your res/drawable-{dpi} folder -->

<manifest ...>
    <application ...>
        <meta-data
            android:name="com.batch.android.push.smallicon"
            android:resource="@drawable/push_icon" />

        <!-- Notification color. ARGB but the alpha value can only be FF -->
        <meta-data
            android:name="com.batch.android.push.color"
            android:value="#FF00FF00" />

Mobile landings and in-app messaging

If you set a custom launchMode in your AndroidManifest.xml, add in your MainActivity.java:

// import android.content.Intent;
// import com.batch.android.Batch;

@Override
public void onNewIntent(Intent intent)
{
    Batch.onNewIntent(this, intent);

    super.onNewIntent(intent);
}

Troubleshooting

  • ⚠️ You will need a physical device to fully test push notifications

Download Details:

Author: bamlab

Demo: https://bamlab.github.io/react-native-batch-push/

Source Code: https://github.com/bamlab/react-native-batch-push

react-native react mobile-apps

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.