Add the React Native plug-in to your app

Overview

To start configuring basic mobile app messaging in React Native projects for iOS and Android apps, create an example app in React Native and then configure and build your Android and iOS apps. After configuring basic mobile app messages, you can configure advanced mobile app messaging features.

🚧

Warning:

When Acoustic Mobile App Messaging stores data that you send, the data is not encrypted; therefore, it is recommended that you do not transmit sensitive information in the inbox, in-app, and mobile app messages. The data is not encrypted in our databases or log files or when stored on the device. If you must transmit sensitive information, encrypt the data before sending it and decrypt the data in memory on the device.

Before you begin

  • Install React Native command-line tools.

📘

Note:

Expo CLI is not supported .

Create a React Native application

react-native init NewApp --version 0.66.0
cd NewApp

Install Acoustic React Native plug-in

npm install <sdk folder>/plugins/react-native-acoustic-mobile-push

Link the plug-in

react-native link react-native-acoustic-mobile-push

Edit App.js

Edit App.js to include the following two lines after the existing import statements:

import { NativeModules } from 'react-native;
const { RNAcousticMobilePush } = NativeModules;
RNAcousticMobilePush.requestPushPermission();

Alternatively, you can import the SDK into the component you need.

Install additional Acoustic plug-ins

To install additional plug-ins, repeat the install and link command from the previous steps for the respective plug-ins, and then import them into the component where you need the support.

The following additional plug-ins available:

  • react-native-acoustic-mobile-push
  • react-native-ios-notification-service
  • react-native-acoustic-mobile-push-calendar
  • react-native-acoustic-mobile-push-snooze
  • react-native-acoustic-mobile-push-displayweb
  • react-native-acoustic-mobile-push-inapp
  • react-native-acoustic-mobile-push-inbox
  • react-native-acoustic-mobile-push-location
  • react-native-acoustic-mobile-push-beacon
  • react-native-acoustic-mobile-push-geofence

Set up your iOS project

  1. Open the iOS project in Xcode.
  2. Fix up the bundle ID and signing to use a bundle ID and profile with appropriate capabilities.
  3. Apply frameworks:
  • Select the main project’s General tab.
  • Drag AcousticMobilePush.xcframework from the plugin directory into the Frameworks section.
  • Verify that Embed and Sign is selected.
  • Select the main project’s Build Settings tab.
  • Drag the directory containing framework into Framework Search Paths.
  1. Add the Push Notification capability to your project.
  • Go to Signing & Capabilities
  • Click +Capability
  • Select Push Notification
  1. Edit the MceConfig.json file in the project and fill in the appKeys and baseUrl provided by your account team.

Integrating the iOS notification service

The iOS notification service requires separate provisioning. This plug-in is required if you need to access push received events, dynamic action categories, and media attachments.

  1. Verify that the react-native-ios-notification-service plug-in is included in your project.
    If not, copy it from the SampleApp project and add it to the package.json file in your application under dependencies.
  2. Add the notification plug-in to your iOS application and the other Acoustic plug-ins using yarn and cocoa pods.
  3. The AcousticMobilePushNotificaiton.xcframework should now be available in your iOS application, and you can integrate the Notification Service by following the steps in Add the iOS Notification Service Framework to your project.

Set up your Android project

  1. Run brew install android-platform-tools.
  2. Open the Android project in Android Studio.
  3. Copy your google-services.json and add it to the NewApp/android/app/ directory.
  4. Replace the google_api_key and google_app_id placeholder values in android/app/src/main/res/values/strings.xml with your Google provided FCM credentials. The value for google_api_key comes from the value in “api_key”: [ { “current_key”: in google-services.json. The value for google_app_id comes from “client_info”: { “mobilesdk_app_id”: in google-services.json.
  5. Edit the MceConfig.json file in the project and fill in the appKeys and baseUrl provided by your account team.

Test your React Native iOS and Android apps

Build
Once your environment is set up to install the packages - including sdk plugins:

cd NewApp
yarn install

Run Android

npx react-native run-android

Run iOS

  1. Change to the NewApp/ios directory `cd NewApp/ios'.
  2. Run pod install.
  3. Open the .xcworkspace file in Xcode.
  4. Build to device or simulator

📘

Note:

The iOS Simulator is unable to handle push messages.


Did this page help you?