# Vanilla Integration

{% hint style="info" %}
If you are using Expo into your application, you can jump directly to the [Expo integration](https://doc.batch.com/developer/sdk/react-native/sdk-integration/expo-integration) 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](https://doc.batch.com/developer/sdk/advanced/customizing-notifications#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()

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