# SDK: Expo plugin

## Step 1: Import the PushSDK Library

Install the PushSDK using either your preferred package manager.

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

```sh
yarn add @pushly/push-sdk-expo
```

{% endtab %}

{% tab title="NPM" %}

```sh
npm install --save @pushly/push-sdk-expo
```

{% endtab %}
{% endtabs %}

The plugin applies the native setup required for the Pushly React Native SDK

## Step 2: Adding plugin to Expo config

### Step 2.1: Google Services

Add your `google-services.json` file to `app` directory.

### Step 2.2: app.config.js

Add the plugin to your Expo config and provide the App Group ID, Android application ID (must match the package inside `google-services.json`), and the path to your `google-services.json` file:

{% tabs %}
{% tab title="app.config.js" %}

```gradle
export default {
  expo: {
    ...,
    plugins: [
      [
        '@pushly/push-sdk-expo',
        {
          ios: {
            enableNse: true,
            nseTargetName: 'NotificationServiceExtension',
            nseBundleIdSuffix: '.NotificationServiceExtension',
            appGroupId: 'group.com.pushly.PushSdkReactNativeExample',
            iosDeploymentTarget: '15.0',
            swiftVersion: '5.0',
          },
          android: {
            applicationId: 'com.example.myapp',
            googleServicesFile: './app/google-services.json',
            applyGoogleServicesPlugin: true,
          },
        },
      ],
    ],
  },
};
```

{% endtab %}
{% endtabs %}

<table><thead><tr><th>Property</th><th>Definition</th></tr></thead><tbody><tr><td><pre><code>ios.enableNse
</code></pre></td><td>Enables plugin to install NotificationServiceExtension</td></tr><tr><td><pre><code>ios.nseTargetName
</code></pre></td><td>User-defined name for NotificationServiceExtension. <br><code>default: NotificationServiceExtension</code></td></tr><tr><td><pre><code>ios.nseBundleIdSuffix
</code></pre></td><td>Bundle id suffix for NotificationServiceExtension. Value is appended to PRODUCT_BUNDLE_IDENTIFIER env var.<br><code>default: .NotificationServiceExtension</code></td></tr><tr><td><pre><code>ios.appGroupId
</code></pre></td><td>To ensure that the PushSDK can properly capture information the container should be named <code>group.{app-bundle-id}.push</code>.</td></tr><tr><td><pre><code>ios.DeploymentTarget
</code></pre></td><td>Used to setup NotificationServiceExtension target in pbxproj file</td></tr><tr><td><pre><code>ios.swiftVersion
</code></pre></td><td>Used to setup NotificationServiceExtension target in pbxproj file</td></tr><tr><td><pre><code>android.applicationId
</code></pre></td><td>Application ID used by Android application</td></tr><tr><td><pre><code>android.googleServicesFile
</code></pre></td><td>Location of google-services.json file relative to app.plugin.js</td></tr><tr><td><pre><code>android.applyGoogleServicesPlugin
</code></pre></td><td>Should google services plugin be applied in gradle.</td></tr></tbody></table>

Run `expo prebuild --clean` (or use EAS Build/custom dev clients) to generate native projects with the Pushly setup applied.

## Step 3: iOS Setup

### Step 3.1: Install Pods

Within your `<project_root>/ios` directory run: `bundle exec pod install`

## Step 4: SDK Initialization

In your `index.tsx` or `app.tsx` file initialize the PushSDK using the example implementation code below.

Replace the `REPLACE_WITH_SDK_KEY` in the `setConfiguration` method with the SDK Key from the platform settings page.

{% tabs %}
{% tab title="index.tsx" %}

```tsx
...
import { PushSDK, LogLevel } from '@pushly/push-sdk-react-native';

export const App = () => {
    ...

    // We recommend initializing the PushSDK in a useEffect block
    // to prevent the application from attempting to invoke
    // PushSDK.setConfiguration() on each rerender
    React.useEffect(() => {
        PushSDK.setLogLevel(LogLevel.INFO);
        PushSDK.setConfiguration({ appKey: 'REPLACE_WITH_SDK_KEY' });

        PushSDK.showNativeNotificationPermissionPrompt().then(({ granted }) => {
            console.log(`Permissions granted: ${granted}`);
        });
    }, []);
    
    // The rest of the your app
    ...
};
```

{% endtab %}
{% endtabs %}

Run your application on either an Android device or emulator (ensure the emulator has `Google Play Store Services` installed) or on an iOS device, if building for iOS, to make sure it builds correctly.

The code you added in the previous step will show the push permission dialog upon app open. This can be customized by using [SDK methods](https://documentation.pushly.com/integration/implementation-steps/react-native-expo-plugin/broken-reference) to control when the dialog shows.

After accepting the dialog log into the platform and navigate to `Notifications > Create Notification` and send your first notification, targeting the appropriate **Native: iOS** or **Native: Android** channel, to your device.

## Next Steps

Once you have confirmed the SDK is working properly you may continue to add additional optional functionality like:

* [<mark style="color:blue;">Handling notification opens / app links / deep linking</mark>](https://documentation.pushly.com/integration/implementation-steps/react-native/sdk-react-native/deep-linking)
* [<mark style="color:blue;">Attaching attributes to a subscriber's profile</mark>](https://documentation.pushly.com/integration/implementation-steps/react-native/sdk-react-native/sdk-methods)
* [<mark style="color:blue;">Sending information about what content a subscriber interacts with</mark>](https://documentation.pushly.com/integration/implementation-steps/react-native/sdk-react-native/activity-tracking)