Threat-Events™, In-App Threat Intelligence in React Native Apps

This knowledge base article shows you how easy it is to use Appdome Threat-Events™ to get in-app threat intelligence in React Native Apps and control the user experience in your React Native Apps when mobile attacks occur.

Implementation of  Threat-Events™ in React Native Apps

Appdome supports integration with both the Legacy React Native Architecture and the New React Native Architecture (TurboModules). As React Native gradually transitions to the New Architecture, adoption depends on app readiness and third-party library compatibility. To ensure stability, Appdome recommends using the Legacy Architecture unless the New Architecture is fully supported and officially recommended for your app environment.

What are Threat-Events?

Appdome Threat-Events is a powerful threat-intelligence framework for Android & iOS apps, which is comprised of three elements: (1) a Threat Event, (2) the data from each Threat-Event, and (3) the Threat-Score™.

With Threat-Events, mobile developers can register, listen to, and consume real-time attack and threat data from Appdome’s mobile app security, anti-fraud, mobile anti-bot, and other protections within their mobile applications. This allows them to (1) ensure that mobile application workflows are aware of attacks and threats, (2) customize business logic and user experience based on the user’s risk profile and/or each attack or threat presented, and (3) pass the threat data to other record systems, such as app servers, mobile fraud analysis systems, SIEMs, and other data collection points.

The purpose of Threat-Events is to enable Android and iOS applications to adapt and respond to mobile app attacks and threats in real-time. Using Threat-Events will ensure the safety of users, data, and transactions.

Mobile Application Threat-Events vs. Threat-Scores

Appdome Threat Events can be used as a stand-alone implementation in React Native Apps or in combination with Threat Scores. Threat Events provide the mobile developer with the in-app notification of each attack or threat and the metadata associated with the attack. Threat Scores provide the mobile developer with the Threat Event event score and the combined (aggregate) mobile end-user risk at the time of the notification.

The figure below shows where you can find Threat-Events and Threat-Scores for each of the runtime mobile app security, anti-fraud, anti-malware, mobile antibot, and other protections available on Appdome:

To enable Threat-Events with any runtime protection, select the check box next to Threat-Events for that feature. Doing so will enable (turn ON) Threat-Events for that feature. To enable Threat-Scores for any runtime protection, click the up/down arrow associated with Threat-Scores to assign a specific score to each protection.
Threat-Scores must have a value greater than zero (0) and less than a thousand (1,000).

Threat-Events and Threat-Scores can be used with or in place of server-based mobile anti-fraud solutions.

Prerequisites for Using Threat-Events with React Native Apps

Here’s what you need to use Threat-Events with React Native Apps.

• Appdome account (If you do not yet have an account, create a free Appdome account).
• Appdome account class – Appdome DEV or higher.
• Mobile Application Source Code.
• Threat events license
• Xcode software
• Android Studio software
• React-Native mobile development framework
• Signing Credentials (e.g., signing certificates and provisioning profile) – see Signing Secure Android apps and Signing Secure iOS apps.

React Native Legacy Architecture Support (Bridge-based Native Modules)

The Legacy Architecture is based on the JavaScript-to-native Bridge, where communication between JavaScript and native code occurs asynchronously through serialized messages. Native modules are implemented using RCTBridgeModule, and native-to-JavaScript events are delivered using RCTEventEmitter or NativeEventEmitter. Because all communication across the bridge is asynchronous and batched, this approach may introduce some overhead compared to newer architectures.

Code Snippet Required for Using Threat-Events with React Native Apps

Before consuming Threat-Events or Threat-Scores in your React Native Apps, confirm that the following conditions are met:

• Threat-Events and/or Threat-Scores have been enabled (turned ON) for the specific protection
• You are using the correct identifiers for the Threat-Events for each protection.
  You can find the specific identifiers for each Threat-Event and Threat-Score in the knowledge base article associated with each protection.

Using Threat-Events™ and Threat-Scores™ in React Native Apps is different between iOS and Android.

1. Open the iOS project in Xcode (resides in IOS folder under the root directory of the project).
2. Add an ADThreatEvents class and an ADThreatEvents header.
3. Make the ADThreatEvents class inherit from RCTEventEmitter and implements RCTBridgeModule.
   The ADThreatEvents header should contain the following code:

   #ifndef ADThreatEvents_h
   #define ADThreatEvents_h 
   
   #import "React/RCTBridgeModule.h"
   #import <React/RCTEventEmitter.h>
   
   @interface ADThreatEvents : RCTEventEmitter 
   @property (strong) NSMutableArray *supportedEventsArray; 
   @end 
   
   #endif/* ADThreatEvents_h */
   

4. Add the following code to ADThreatEvents class

   #import <Foundation/Foundation.h>
   #import "ADThreatEvents.h"
   #import "React/RCTBridgeModule.h"
   
   @implementation ADThreatEvents
   RCT_EXPORT_MODULE()
   // This method can be called from js to register to event
   RCT_EXPORT_METHOD(registerForThreatEvent:(NSString *)name ) {
       [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleNotification:) name:name object:nil];
       if (!self.supportedEventsArray) {
           self.supportedEventsArray = [NSMutableArray array];
       }
       [self.supportedEventsArray addObject:name];
   }
   
   // This method is needed to return all the events that will be called using sendEventWithName
   - (NSArray *)supportedEvents
   {
       return self.supportedEventsArray;
   }
   
   // This method will send notification to js
   - (void)handleNotification:(NSNotification *)notification
   { 
       [self sendEventWithName:notification.name body:notification.userInfo];
   }
   @end
   

   To register for Threat-Events, see the section Threat-Event Registration for iOS and Android React Native Apps

Below is the code snippet required for using Threat-Events™ and Threat-Scores™ in Android React Native Apps:

1. Open the Android project in Android Studio (it resides in the Android folder under the root directory).
   Add ADThreatEvents class with the following code:

   package com.reactnativedevevents;
   
   import android.content.BroadcastReceiver;
   import android.content.Context;
   import android.content.Intent;
   import android.content.IntentFilter;
   import android.os.Bundle;
   import android.util.Log;
   import com.facebook.react.bridge.Arguments;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.bridge.ReactContextBaseJavaModule;
   import com.facebook.react.bridge.ReactMethod;
   import com.facebook.react.bridge.ReadableMap;
   import com.facebook.react.bridge.WritableMap;
   import com.facebook.react.modules.core.DeviceEventManagerModule;
   import javax.annotation.Nonnull;
   
   public class ADDevEvents extends ReactContextBaseJavaModule {
   
       public class ThreatEventReceiver extends BroadcastReceiver {
   
           @Override
           public void onReceive(Context context, Intent intent) {
               Log.i("Appdome", "recieved");
               handleNotification(intent);
           }
   
           private void handleNotification(Intent intent) {
               WritableMap extras = Arguments.fromBundle(intent.getExtras());
               getReactApplicationContext()
                       .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                       .emit(intent.getAction(), extras);
           }
       }
       private ThreatEventReceiver threatEventReceiver = new ThreatEventReceiver();
   
       public ADDevEvents(@Nonnull ReactApplicationContext reactContext) {
           super(reactContext);
       }
   
       @Nonnull
       @Override
       public String getName() {
           return "ADDevEvents";
       }
   
       @ReactMethod
       public void registerForDevEvent(String action) {
           IntentFilter filter = new IntentFilter(action);
           Log.i("Appdome", "registered");
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
              this.getReactApplicationContext().registerReceiver(threatEventReceiver, filter, Context.RECEIVER_NOT_EXPORTED);
           } else {
              this.getReactApplicationContext().registerReceiver(threatEventReceiver, filter);
           }
       }
   
       @ReactMethod
       public void postDevEvent(String action, ReadableMap userInfo) {
           Intent intent = new Intent(action);
           if (userInfo != null) {
               Bundle bundle = Arguments.toBundle(userInfo);
               intent.putExtras(bundle);
           }
           this.getReactApplicationContext().sendBroadcast(intent);
       }
   }

2. Add ADThreatEventsPackage class with the following code:

   import com.facebook.react.ReactPackage;
   import com.facebook.react.bridge.NativeModule;
   import com.facebook.react.bridge.ReactApplicationContext;
   import com.facebook.react.uimanager.ViewManager;
   import java.util.ArrayList;
   import java.util.Collections;
   import java.util.List;
   import javax.annotation.Nonnull;
   
   public class ADThreatEventsPackage implements ReactPackage {
       @Nonnull
       @Override
       public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {
           List modules = new ArrayList<>();
           modules.add(new ADThreatEvents(reactContext));
           return modules;
       }
   
       @Nonnull
       @Override
       public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   }
   

3. Append the newly created ADThreatEventsPackage() class to getPackages method in MainApplication class.
   Here is an example of the MainApplication class code:

   import android.app.Application;
   import com.facebook.react.ReactApplication;
   import com.facebook.react.ReactNativeHost;
   import com.facebook.react.ReactPackage;
   import com.facebook.react.shell.MainReactPackage;
   import com.facebook.soloader.SoLoader;
   import java.util.Arrays;
   import java.util.List;
   
   public class MainApplication extends Application implements ReactApplication {
   
       private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
           @Override
           public boolean getUseDeveloperSupport() {
           return BuildConfig.DEBUG;
           }
   
           @Override
           protected List getPackages() {
               return Arrays.asList(new MainReactPackage(), new ADThreatEventsPackage());
           }
   
           @Override
           protected String getJSMainModuleName() {
               return "index";
           }
       };
   
       @Override
       public ReactNativeHost getReactNativeHost() {
           return mReactNativeHost;
       }
   
       @Override
       public void onCreate() {
           super.onCreate();
           SoLoader.init(this,/* native exopackage */ false);
       }
   }
   

To register for Threat-Events, see the section Threat-Event Registration for iOS and Android React Native Apps.

Threat-Event Registration for iOS and Android React Native Apps

1. 1. 1. Add NativeModules and NativeEventEmitter from react-native.
         1. Add the following code:

            const { ADThreatEvents } = NativeModules;
            const adThreatEvents = new NativeEventEmitter(ADThreatEvents);
            

         2. Add the following function:

            function registerToThreatEvent(action, callback) {
                NativeModules.ADThreatEvents.registerForThreatEvent(action);
                adThreatEvents.addListener(action, callback);
            }
            

      2. Register for a Threat-Events by calling registerToThreatEvent(action, callback) from JS.

New Architecture (TurboModules)

The New Architecture is React Native’s modern native integration system built on TurboModules, JSI, and code generation. It enables direct communication between JavaScript and native code without relying on the legacy bridge, reducing serialization overhead and improving performance.

Native modules are implemented as TurboModules and accessed either synchronously or asynchronously via JSI. Native-to-JavaScript events are delivered using typed, codegen-based event emitters instead of NativeEventEmitter, providing improved type safety and cross-platform consistency.

TurboModules Prerequisites

In addition to the general prerequisites, ensure that:

• Your React Native project is configured to use the New Architecture (TurboModules).

• You are using a React Native version that supports TurboModules.

• Your Android and/or iOS development environments are properly configured for the New Architecture.

Overview

The basic steps to integrate Threat-Events using TurboModules are:

1. Define a typed JavaScript specification for the native module.

2. Configure your dependency management system to run Codegen, which generates the required native interfaces from the specification.

3. Implement your application logic (JavaScript/TypeScript) using the generated module.

4. Implement the native platform code (Android and/or iOS) using the generated interfaces and integrate it with the React Native runtime.

Step 1: Declare Typed Specification

React Native provides a tool called Codegen, which takes a specification written in TypeScript or Flow and generates platform-specific code for Android and iOS. The specification defines the methods and data types exchanged between native code and the React Native JavaScript runtime.

A Turbo Native Module consists of the specification, the generated Codegen interfaces, and the native implementation.

To create the specification file:

1. In the root folder of your app, create a new folder named specs

2. Inside this folder, create a new file named NativeADThreatEvents.ts

Implementation of the threatEvent specification:

// specs/NativeADThreatEvents.ts
 
import type { TurboModule, CodegenTypes } from 'react-native';
import { TurboModuleRegistry } from 'react-native';
 
export type ThreatEvent = {
  eventId: string;
  payload: {[key: string]: string | null} | null;
};
 
export interface Spec extends TurboModule {
  registerForThreatEvent(eventId: string): void;
  readonly onThreatEvent: CodegenTypes.EventEmitter<ThreatEvent>;
}
 
export default TurboModuleRegistry.getEnforcing<Spec>('NativeADThreatEvents');

Step 2: Configure Codegen to run

The specification is consumed by React Native Codegen, which generates the required native interfaces and boilerplate code.
Update your project’s package.json to include the following top-level configuration:

"codegenConfig": {
    "name": "NativeADThreatEventsSpec",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "<your_package>.specs"
    },
    "ios": {
      "modulesProvider": {"NativeADThreatEvents": "RCTNativeADThreatEvents"}
    }
  }

Note: Replace “<your_package>” with your own Java package name.

Step 3: Write Application Code using the Turbo Native Module

Modify your App.tsx to include the following imports and helper function:

import  { EventSubscription } from "react-native";
import NativeADThreatEvents, { ThreatEvent } from "./specs/NativeADThreatEvents";
 
export type ThreatEventCallback = (evt: ThreatEvent) => void;
 
export function registerForThreatEvent(eventId: string, onEvent: ThreatEventCallback) {
  if (!NativeADThreatEvents) {
    console.warn("NativeADThreatEvents native module not found. Make sure you added the native bridge and rebuilt.");
    return () => {};
  }
 
  NativeADThreatEvents.registerForThreatEvent(eventId);
 
  // Listen to the unified stream and filter by eventId
  const subscription: EventSubscription = NativeADThreatEvents.onThreatEvent((evt) => {
    if (evt.eventId !== eventId) return;
    onEvent(evt);
  });
 
  // Return a function that removes the listener
  return () => subscription.remove();
}

Register for a Threat Event by calling registerForThreatEvent(action, callback).

For example:

// Register for a ANTI_VPN event
const unsubscribeVpn = registerForThreatEvent("ActiveVpnDetected", activeVpnCallback);
 
//Unregister on unmount
unsubscribeVpn();

export default function App() {
  React.useEffect(() => {
    // Register on mount
    const unsubscribeVpn = registerForThreatEvent("ActiveVpnDetected", activeVpnCallback);
 
    // Unregister on unmount
    return () => { unsubscribeVpn(); };
 
  }, []);
 
  return (
    // ... your app UI
  );
}

Related Articles

• Threat-Events™, In-App Threat Intelligence in Kotlin Apps
• Threat-Events™, In-App Threat Intelligence in Native iOS Apps
• Threat-Events™, In-App Threat Intelligence in Cordova Apps
• Threat-Events™, In-App Threat Intelligence in Swift Apps
• Threat-Events™, In-App Threat Intelligence in Native Android Apps
• Threat-Events™, In-App Threat Intelligence in Maui, Xamarin Apps
• How To Implement Threat-Events in Java
• Implementing Threat Events – Best Practices