React Native Flurry SDK Tutorial

• Install React Native
• Create React Native Flurry Project
  • Run React Native Flurry Project
• Integrate Flurry Config in React Native Project
• Integrate Flurry Push in React Native Project
  • Android Flurry Push
    • User's Native Flurry Push Options or Listener
  • iOS Flurry Push
• Support
• License

This tutorial is based on the fact that you already have basic mobile development skills and environment setup. If you already have React Native installed, you can skip to the Create React Native Flurry Project section.

• Download the tutorial from https://git.ouroath.com/poting/React-Native-Tutorial. Before start running the tutorial sample app, please apply the following command to install required npm dependencies.

  $ npm install
  
  # iOS only; to install CocoaPods dependency
  $ cd ios && pod install && cd ..

Install React Native

Getting Started

https://facebook.github.io/react-native/docs/getting-started.html#caveats

This tutorial will use "React Native CLI" for development. Please follow the links of,
React Native CLI Quickstart -> macOS -> iOS/Android.

1. Install Node

   $ brew install node
   $ brew install watchman

2. Initialize npm and install React Native Command Line

   $ npm init
   $ npm install react-native
   $ npm install -g react-native-cli

Create React Native Flurry Project

1. Create a React Native project with Flurry plugin

   $ react-native init FlurryProject
   $ cd FlurryProject
   $ npm install react-native-flurry-sdk --save

   • If you are using React Native >= 0.60, install CocoaPods dependency

     $ cd ios && pod install && cd ..

   • If you are using React Native < 0.60, link React Native dependency

     $ react-native link react-native-flurry-sdk

     Android: Optionally you can improve analytics identities by adding Google Play Services library in your app.

     // android/app/build.gradle
     dependencies {
         Implementation 'com.google.android.gms:play-services-base:15.0.1'
         implementation 'com.google.android.gms:play-services-ads:15.0.1'
     }

2. Add Flurry JavaScript codes in index.js to initialize Flurry

   import Flurry from 'react-native-flurry-sdk';
   
   // Init Flurry once as early as possible recommended in index.js.
   new Flurry.Builder()
       .withLogEnabled(true)
       .withLogLevel(Flurry.LogLevel.DEBUG)
       .build(FLURRY_ANDROID_API_KEY, FLURRY_IOS_API_KEY);

3. Add Flurry JavaScript codes in App.js to log Flurry events

   import Flurry from 'react-native-flurry-sdk';
   
   // Log Flurry events.
   Flurry.logEvent('React Native Event');

Run React Native Flurry Project

$ react-native run-android
$ react-native run-ios

Integrate Flurry Config in React Native Project

Flurry Remote Config is the free service from Flurry that helps developers update app experience for users without requiring users to update to a new version of your app - Android and iOS.

To learn more, please checkout our Remote Config sample apps (Flurry SDK) as a reference implementation - Android and iOS.

In order to use Flurry Config in React Native projects, please follow the additional steps below.

1. Set up and add your Flurry remote Config key-value pairs in the Flurry console.
   Click Marketing tab -> select Config Management under Remote Config.
   https://dev.flurry.com/marketing/config/remote-config

   

2. Add Flurry JavaScript codes to use the remote configuration values.

   Flurry.addConfigListener((event) => {
     if (event.Type === Flurry.ConfigStatus.SUCCESS) {
       // Data fetched, activate it.
       Flurry.activateConfig();
     } else if (event.Type === Flurry.ConfigStatus.ACTIVATED) {
       // Received cached data, or newly activated data.
       Flurry.getConfigString('welcome_message', 'Welcome!').then((value) => {
         console.log((event.isCache ?
             'Received cached data: ' : 'Received newly activated data: ') +
             value.welcome_message);
       });
     } else if (event.Type === Flurry.ConfigStatus.UNCHANGED) {
       // Fetch finished, but data unchanged.
       Flurry.getConfigString('welcome_message', 'Welcome!').then((value) => {
         console.log('Received unchanged data: ' + value.welcome_message);
       });
     } else if (event.Type === Flurry.ConfigStatus.ERROR) {
       // Fetch failed.
       console.log('Fetch error! Retrying: ' + event.isRetrying);
     }
   });
   
   Flurry.fetchConfig();

Integrate Flurry Push in React Native Project

Flurry Push enables app developers to send targeted messages to re-engage and retain users.

In order to use Flurry Push in React Native projects for Android or iOS, please follow the additional steps below.

Android Flurry Push

1. Android Flurry Push requires your projects to initialize Flurry from the native Application class, you can find the Java file in,

   $PROJ_ROOT/android/app/src/main/java/com/$proj_name/MainApplication.java

   Please do the Flurry setup in MainApplication.onCreate(). With the same APIs as the JavaScript version.

   import com.flurry.android.reactnative.FlurryModule;
   
   new FlurryModule.Builder()
       .withLogEnabled(true)
       .withMessaging(true, options_or_listener)    // optional user's native options or listener
       .build(this, FLURRY_ANDROID_API_KEY);

   • Optionally you can add a Flurry Messaging listener to monitor the messaging receive, click, and cancel actions.

     Flurry.addMessagingListener((message) => {
       if (message.Type === Flurry.MessageType.RECEIVED) {
         Flurry.willHandleMessage(false);
         // Add your actions here.
       } else if (message.Type === Flurry.MessageType.CLICKED) {
         Flurry.willHandleMessage(false);
         // Add your actions here.
       }
       Flurry.printMessage(message);
     });

2. Follow Set up a Firebase Cloud Messaging client app on Android. Complete "Set up Firebase and the FCM SDK" step for adding Firebase to your Android project.

   1. Add Firebase to your Android project

      1. Create a Firebase project: In the Firebase console, click Add project, then select or enter a Project name.
      2. Register your app with Firebase: In the center of the project overview page, click the Android icon to launch the setup. (e.g., package name: com.flurryproject)
      3. Add the Firebase configuration file: Download google-services.json, move the file to your project. (e.g., $PROJ_ROOT/android/app)

   2. Enable Firebase products: Add rules in the project-level and app-level Gradle files. Your build.gradle will look like:

      // android/build.gradle (project-level)
      buildscript {
          dependencies {
              classpath 'com.google.gms:google-services:4.3.3'
          }
      }

      // android/app/build.gradle (app-level)
      apply plugin: 'com.google.gms.google-services'
      
      dependencies {
          implementation 'com.google.firebase:firebase-messaging:20.1.0'
      }

   3. Get your Firebase Cloud Messaging Server key: On the left panel of the Firebase console, click the Project Settings button on the right side of Project Overview. Under the Cloud Messaging tab, copy your Server key.

      

3. Set up "Android Authorization" in Flurry Push Authorization. After copying your Firebase Cloud Messaging Server key as described in the previous section,

   1. Go to Flurry Admin -> Apps, select Edit for the app corresponded

   2. Click "+ Add Credential", paste the Server Key in the field provided

   3. Click Save

      

4. Test Flurry Push by sending test pushes. To send a test push, visit the Marketing tab. Select the app you want to test and then click the "+ Create Push Campaign" button. Follow the steps to set up the campaign until you get to the final step labeled “Review your campaign.”

   

User's Native Flurry Push Options or Listener

When you initialize Flurry Push, you can specify your own FlurryMarketingOptions or FlurryMessagingListener. Please follow the steps to set your options (similar steps for your listener).

1. Add the following dependency in your android's build.gradle:

   implementation 'com.flurry.android:marketing:#.#.#'

2. Import FlurryMarketingOptions in your MainApplication:

   import com.flurry.android.marketing.FlurryMarketingOptions;

3. Define your FlurryMarketingOptions with your options:

   FlurryMarketingOptions messagingOptions = new FlurryMarketingOptions.Builder()
       .setupMessagingWithAutoIntegration()
       .withDefaultNotificationIconResourceId(R.mipmap.ic_launcher_round)
       .withDefaultNotificationIconAccentColor(getResources().getColor(R.color.colorPrimary))
       .withFlurryMessagingListener(messagingListener)
       .build();

4. Finally enable Flurry Push with your options:

   new FlurryModule.Builder()
       .withLogEnabled(true)
       .withMessaging(true, messagingOptions)
       .build(this, FLURRY_ANDROID_API_KEY);

iOS Flurry Push

1. Open your Podfile, which is located under the ios folder of your project. Add the following line in the target section before use native modules!.

   `pod 'react-native-flurry-sdk', :path => '../node_modules/react-native-flurry-sdk/ios', :subspecs => ['FlurrySDK-Push']`

   The target section of Podfile should now look like this:

   target 'FlurryProject' do
     …
     pod 'react-native-flurry-sdk', :path => '../node_modules/react-native-flurry-sdk/ios', :subspecs => ['FlurrySDK-Push']
   
     target 'FlurryProjectTests' do
       inherit! :search_paths
       # Pods for testing
     end
   
     use_native_modules!
   End

2. Install the dependencies again by executing

   $ cd ios && pod install && cd ..

3. Open your .xcworkspace file which is under the ios folder.

   $ open FlurryProject.xcworkspace

   1. Go to the "Signing & Capabilities" tab and add Capability “Push Notifications”.

      

   2. Add Capability “Background Modes”, and enable “Background Fetch” and “Remote Notifications”.

      

      

   For more information, please see Push Setup.

4. Set up "iOS Authorization" in Flurry Push Authorization.

5. In order to handle notifications from a cold start, Flurry Push requires to be initialized from AppDelegate as early as possible. Please open AppDelegate.m (under ios/$proj_name folder), import the header file

   #import "ReactNativeFlurry.h"

   And add this line right after - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

   [ReactNativeFlurry enableMessaging];

   The AppDelegate.m should now look like this:

   #import "ReactNativeFlurry.h"
   
   @implementation AppDelegate
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
     [ReactNativeFlurry enableMessaging];

Support

• Flurry Developer Support Site

License

Copyright 2018 Oath Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.