SDK: Expo plugin

Step 1: Import the PushSDK Library

Install the PushSDK using either your preferred package manager.

Yarn

yarn add @pushly/push-sdk-expo

NPM

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:

app.config.js

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,
          },
        },
      ],
    ],
  },
};

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

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.

index.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
    ...
};

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

• Handling notification opens / app links / deep linking

• Attaching attributes to a subscriber's profile

• Sending information about what content a subscriber interacts with