IMQA GUIDE
HomepageFAQDeveloper forum
ENG
ENG
  • Getting started
    • Notice
    • Supported environment
  • Installation Guide
    • Android
      • Installing MPM SDK
      • Setting MPM SDK
      • Installing Crash SDK
      • Setting Crash SDK
    • iOS
      • Installing MPM SDK
      • Setting MPM SDK
      • Installing Crash SDK
      • Setting Crash SDK
    • React Native
      • Android
      • iOS
      • React Native Library
    • Cordova
      • Android
      • iOS
    • Morpheus
      • Android
      • iOS
    • W Hybrid
    • Web (WPM)
      • WebAgent Installation
      • WebAgent Setting
      • Browser Compatibility
  • User Guide
    • Using MPM
      • Project list
      • Performance Dashboard
      • A/B Dashboard
      • Screen performance analysis
      • Detailed performance analysis
      • UBA (User Behavior Analysis)
      • Region analysis
      • Statistics
      • Report
      • Alert
      • Management
    • Using Crash
      • Project list
      • Dashboard
      • Error details
      • Error search
      • Statistics
      • Settings
    • Using WPM
      • Project list
      • Performance Dashboard
      • Page performance analysis
      • Detailed performance analysis
      • Reverse Behavior Analysis
      • Statistics
      • Report
      • Alert
      • Management
    • Using WCrash
      • Project list
      • Dashboard
      • Error details
      • Error search
      • Statistics
Powered by GitBook
On this page
  • 1. IMQA Settings by Component
  • Setting up Functional Components
  • Setting up Class Components
  • 2. Setting up Network Communication
  • Using Axios for Network Communication
  • Using Fetch for Network Communication
  1. Installation Guide
  2. React Native

React Native Library

Install SDK in React Native Environment

How to add IMQABridge may vary depending on development using React Native.

1. IMQA Settings by Component

Setting up Functional Components

To collect performance data from React Native apps, you need to insert the IMQA collection code per component screen. The collection code is written as a functional component, and the settings vary depending on whether it is a parent or a child component. First, the following settings should be applied according to a parent component rendered first and a child component imported and used by the parent component.

  • ( parent component )

../components/MyComponent.tsx ( parent component )
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

const MyComponent = () => {

.. 
useLayoutEffect(() => { 
  // These settings must be applied in useLayoutEffect Hook 
  // as they are functions that should be called before the screen is rendered. 
  MpmAgent?.setBehaviorData("MyComponent"); 
}, []);

useEffect(() => {
  // It should be located at the top of the useEffect function.
  MpmAgent?.startReactNativeRender("MyComponent",true); 
  ..

  // It should be located at the bottom of the useEffect function. 
  MpmAgent?.endReactNativeRender("MyComponent",true);
}, []);
..
} 

  • ( child component )

../components/MyChildComponent.tsx ( child component )
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..
const MyChildComponent = () =>

useEffect(() => {
  // It should be located at the top of the useEffect function.
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 

  ..

  // It should be located at the bottom of the useEffect function. 
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
}, []);

Setting up Class Components

To collect performance data from React Native apps, you need to insert the IMQA collection code per component screen. The collection code is written as a functional component, and the settings vary depending on whether it is a parent or a child component. First, the following settings should be applied according to a parent component rendered first and a child component imported and used by the parent component.

  • ( parent component )

../components/MyComponent.tsx ( parent component )
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyComponent extends React.Component {

..
 
 componentDidMount() {
  // It should be located at the top of the componentDidMount function.
    MpmAgent?.setBehaviorData("MyComponent"); 
    MpmAgent?.startReactNativeRender("MyComponent", true); 
    
    ..

  // It should be located at the bottom of the componentDidMount function.
    MpmAgent?.endReactNativeRender("MyComponent", true);
 }
..
} 
  • ( child component )

../components/MyChildComponent.tsx ( child component )
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyChildComponent extends React.Component {

..

 componentDidMount() {
  // It should be located at the top of the componentDidMount function.
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 
  ..

  // It should be located at the bottom of the componentDidMount function.
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
 }

..
}

2. Setting up Network Communication

Using Axios for Network Communication

If you are using the Axios library for network communication, you must implement an interceptor to inject the code to allow the IMQA collection code to work over network communication.

const axiosInstance = axios.create({
      baseURL:"http://sample-api"
    });
    axiosInstance.interceptors.request.use(
      (config) => {
        Try{
         // Network Communication Collection Code 
          MpmAgent?.startReactNativeNetwork( 
            config.baseURL?.toString(),
            config.url?.toString(),
            config.method?.toString(),
            config.baseURL?.split('://')[0]
          );
        }catch(e){
          console.error(e);
        }
        return config;
      },
      error => {
       // When errors occur during network communication, you need to enter a status code as follows.
        MpmAgent?.endReactNativeNetwork("500");
      }
    );
    axiosInstance.interceptors.response.use( response => {
      // The status code must be inserted when network communication is done.
      MpmAgent?.endReactNativeNetwork(response.status.toString());
      return response;
    });

Using Fetch for Network Communication

If you are using Fetch for network communication, you must insert the code in the form below in order for the IMQA collection code to work over network communication.

let url = "http://sample-api";

// The code must be applied before network communication is initiated.
  MpmAgent?.startReactNativeNetwork( 
      url,
     "/sample",
     "post",
     url?.split('://')[0]);

fetch(url)
  .then(response => {
    MpmAgent?.endReactNativeNetwork(response.status.toString());  
    return response;
  })
  .catch(error => {
    MpmAgent?.endReactNativeNetwork("500");  
  });

Last updated 1 year ago