# React Native Libraryの設定

{% hint style="warning" %}
IMQABridgeの追加方法は、React Nativeを利用して開発されるケースによって異なる場合があります。
{% endhint %}

## 1. 各ComponentのIMQAの設定

### 関数型コンポーネントの設定

React Nativeアプリの性能データを収集するためにComponentの各画面にIMQAの収集コードを挿入する必要があります。当該収集コードは関数型コンポーネントで作成されており、親コンポーネント/子コンポーネントによって設定が異なります。一番優先的にrenderingが行われる上位コンポーネント(親コンポーネント)に該当するコンポーネントからimportして使われるコンポーネント(子コンポーネント)を区別して下記の設定を正しく適用する必要があります。

* (親コンポーネント)

{% code title="../components/MyComponent.tsx (親コンポーネント)" %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

const MyComponent = () => {

.. 
useLayoutEffect(() => { 
  // 当該設定は、画面のrenderingが行われる前に呼び出さなければならない関数なので、
  // 必ずuseLayoutEffect Hookにおいて適用してください。
  MpmAgent?.setBehaviorData("MyComponent"); 
}, []);

useEffect(() => {
  // useEffect関数の最上段に位置する必要があります。
  MpmAgent?.startReactNativeRender("MyComponent",true); 
  ..

  // useEffect関数の最下段に位置する必要があります。
  MpmAgent?.endReactNativeRender("MyComponent",true);
}, []);
..
} 
```

{% endcode %}

* (子コンポーネント)

{% code title="../components/MyChildComponent.tsx (子コンポーネント)" %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..
const MyChildComponent = () =>

useEffect(() => {
  // useEffect関数の最上段に位置する必要があります。
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 

  ..

  // useEffect関数の最下段に位置する必要があります。
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
}, []);
```

{% endcode %}

### クラス型コンポーネントの設定

React Nativeアプリの性能データを収集するためにComponentの各画面にIMQAの収集コードを挿入する必要があります。当該収集コードはクラス型コンポーネントで作成されており、親コンポーネント/子コンポーネントによって設定が異なります。一番優先的にrenderingが行われる上位コンポーネント(親コンポーネント)に該当するコンポーネントからimportして使われるコンポーネント(子コンポーネント)を区別して下記の設定を正しく適用する必要があります。

* (親コンポーネント)

{% code title="../components/MyComponent.tsx (親コンポーネント)" %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyComponent extends React.Component {

..
 
 componentDidMount() {
  // componentDidMount関数の最上段に位置する必要があります。
    MpmAgent?.setBehaviorData("MyComponent"); 
    MpmAgent?.startReactNativeRender("MyComponent", true); 
    
    ..

  // componentDidMount関数の最下段に位置する必要があります。
    MpmAgent?.endReactNativeRender("MyComponent", true);
 }
..
} 
```

{% endcode %}

* (子コンポーネント)

{% code title="../components/MyChildComponent.tsx (子コンポーネント)" %}

```tsx
// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyChildComponent extends React.Component {

..

 componentDidMount() {
  // componentDidMount関数の最上段に位置する必要があります。
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 
  ..

  // componentDidMount関数の最下段に位置する必要があります。
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
 }

..
}
```

{% endcode %}

## 2. Networkの通信設定 

### Axiosを利用したNetworkの通信の場合 

Axiosライブラリを使用してNetwork通信を行う場合、interceptorを実装し、ネットワーク通信の際にIMQAの収集コードが動作するようにコードの挿入を行う必要があります。

```
const axiosInstance = axios.create({
      baseURL:"http://sample-api"
    });
    axiosInstance.interceptors.request.use(
      (config) => {
        Try{
         // network通信の収集コード
          MpmAgent?.startReactNativeNetwork( 
            config.baseURL?.toString(),
            config.url?.toString(),
            config.method?.toString(),
            config.baseURL?.split('://')[0]
          );
        }catch(e){
          console.error(e);
        }
        return config;
      },
      error => {
       // network通信のときにエラーが発生した場合、以下のような形でstatus codeを挿入する必要があります。
        MpmAgent?.endReactNativeNetwork("500");
      }
    );
    axiosInstance.interceptors.response.use( response => {
      // network通信が完了したときに、status codeを挿入する必要があります。
      MpmAgent?.endReactNativeNetwork(response.status.toString());
      return response;
    });
```

### Fetchを利用したNetwork通信の場合

Fetchを利用してNetwork通信を行う場合、ネットワーク通信のときにIMQAの収集コードが動作するように以下の形でコードの挿入を行う必要があります。

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

// network通信の開始前、該当するコードが適用されている必要があります。
  MpmAgent?.startReactNativeNetwork( 
      url,
     "/sample",
     "post",
     url?.split('://')[0]);

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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.imqa.io/imqa-guide/jpn/installation/react-native/react-native-libraryno.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.