Build the sample React Native app

Overview

You can use the sample app provided with our Flutter SDK to customize and test your mobile app messages with minimal effort.

Before you begin

• Download the latest React Native SDK & sampleApp.
• Setup your local environment; for more information, see React CLI Quickstart.

📘

Note:

It is recommended that for Acoustic Mobile Push React Native 3.8.6, you use React Native version 0.66

Prepare the project

1. Once your local environment is set up, change to the sample app directory from the root directory.

cd SampleApp

2. Run the following command to install the sample app.

yarn install

Set up your Android app

1. Create a Google API project with Firebase Cloud Messaging. For more information, see Create a Google API project.

2. Run the following command only for the first time you run the sample app.

brew install android-platform-tools

3. Configure the SDK values for the sample app.
   a. Add your google-services.json in android/app/ folder.
   b. Update the Google Maps Key value in the android/app/src/main/res/values/strings.xml file.
   c. Go to android/app/src/main/assets/MceConfig.json file and configure the following properties:
   • “messagingService”: “fcm”
   • baseURL
   • appKey.prod
   • iBeacon uuid (if needed)
     For more information, see Configuration (MceConfig.json).
4. Run the Android app.

npx react-native run-android

Set up your iOS app

1. Register the sample app with Apple. For more information, see Register the sample app.
2. Change to the iOS directory.

cd ios

3. Run the following command to install the sample app.

pod install

4. Open the .xcworkspace file that is generated.
5. Go to the ios/SampleApp/MceConfig.json file and configure the following properties:
   • baseURL
   • appKey.dev and appKey.prod. If you do not have a production App Key, use apXXXXXXXX.
   • ibeacon uuid (if needed)
     For more information, see Configuration (MceConfig.json).
6. Configure the iOS App Target.
   a. Select Sample in the Targets list.
   b. Select the General tab of the Target Editor.
   c. Update the Bundle Identifier to match an App ID and provisioning profile on Apple’s web portal.
   d. Select the team from the dropdown to enable Code Signing.
7. Configure the Notification Service Target.
   a. Select the Notification Service in the Targets list.
   b. Select the General tab of the Target Editor.
   c. Update the Bundle Identifier with .notification to match the App Target bundle identifier.
   d. Select the team from the dropdown to enable Code Signing.
8. Build the app to your device or a simulator from Xcode.