# Vanilla Integration

{% hint style="info" %}
If you are using Expo into your application, you can jump directly to the [Expo integration](/developer/sdk/react-native/sdk-integration/expo-integration.md) step.
{% endhint %}

### Installation

***

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

{% tabs %}
{% tab title="Yarn" %}

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

{% endtab %}

{% tab title="NPM" %}

<pre class="language-python"><code class="lang-python"><strong>npm install @batch.com/react-native-plugin
</strong></code></pre>

{% endtab %}
{% endtabs %}

### Android extra steps

***

#### **Starting the SDK**

Update your `MainApplication` file as following:

{% tabs %}
{% tab title="Kotlin" %}

<pre class="language-kotlin" data-title="MainApplication.kt"><code class="lang-kotlin">import com.batch.batch_rn.RNBatchModule

class MainApplication : Application(), ReactApplication {
    // ...
<strong>    override fun onCreate() {
</strong>        super.onCreate()
        // ...
        // Start Batch Plugin
        RNBatchModule.initialize(this)
    }
}
</code></pre>

{% endtab %}

{% tab title="Java" %}
{% code title="MainApplication.java" %}

```java
import com.batch.batch_rn.RNBatchModule
 
public class MainApplication extends Application implements ReactApplication {
    // ...
    @Override
    public void onCreate() {
        super.onCreate();
        // ...
        // Start Batch Plugin
        RNBatchModule.initialize(this);
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

#### **Configuring onNewIntent**

Add the following in your `MainActivity` :

{% tabs %}
{% tab title="Kotlin" %}

<pre class="language-kotlin" data-title="MainActivity.kt"><code class="lang-kotlin">import android.content.Intent
import com.batch.android.Batch

<strong>override fun onNewIntent(intent: Intent?) {
</strong>   super.onNewIntent(intent)
   Batch.onNewIntent(this, intent)
}

// Or, if your project is using AndroidX Activity 1.9+
//override fun onNewIntent(intent: Intent) {
//   super.onNewIntent(intent)
//   Batch.onNewIntent(this, intent)
//}
</code></pre>

{% endtab %}

{% tab title="Java" %}
{% code title="MainActivity.java" %}

```java
import android.content.Intent;
import com.batch.android.Batch;

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

{% endcode %}
{% endtab %}
{% endtabs %}

#### **Install dependencies**

Setup the required dependencies in gradle scripts:

<pre class="language-groovy" data-title="android/build.gradle"><code class="lang-groovy"><strong>buildscript {
</strong>    ...
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.4'
    }
}
</code></pre>

{% code title="android/app/build.gradle" %}

```groovy
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'
```

{% endcode %}

#### **Firebase config**

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

#### **Small push notification icon**

Follow the [Customizing Batch notifications](/developer/sdk/react-native/advanced/customizing-notifications.md#small-push-notification-icon) 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.

```bash
cd ios && pod install
```

#### **Start the SDK**

Add the following in your `AppDelegate`:

{% tabs %}
{% tab title="Swift" %}

```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)
  }
 }
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
#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;
}
```

{% endtab %}
{% endtabs %}

#### **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`

### Setting up your APIKey

***

**iOS**

Edit your `Info.plist` and add the following:

{% code title="Info.plist" %}

```xml
<key>BatchAPIKey</key>
<string>YOUR_BATCH_API_KEY</string>
```

{% endcode %}

**Android**

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

{% tabs %}
{% tab title="Kotlin" %}
{% code title="android/app/build.gradle" %}

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

{% endcode %}
{% endtab %}

{% tab title="Groovy" %}
{% code title="android/app/build.gradle" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

`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:

```js
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()
// Or use the async variant
// const granted = await BatchPush.requestNotificationAuthorizationAsync()

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


---

# 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://doc.batch.com/developer/sdk/react-native/sdk-integration/vanilla-integration.md?ask=<question>
```

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.