# React Native Library

{% hint style="warning" %}
How to add IMQABridge may vary depending on development using React Native.
{% endhint %}

## 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 )

{% code title="../components/MyComponent.tsx ( parent component ) " %}

```tsx
// 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);
}, []);
..
} 
```

{% endcode %}

* ( child component )

{% code title="../components/MyChildComponent.tsx ( child component ) " %}

```tsx
// 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);
}, []);
```

{% endcode %}

### 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 )

{% code title="../components/MyComponent.tsx ( parent component ) " %}

```tsx
// 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);
 }
..
} 
```

{% endcode %}

* ( child component )

{% code title="../components/MyChildComponent.tsx ( child component ) " %}

```tsx
// 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);
 }

..
}
```

{% endcode %}

## 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");  
  });

```