> For the complete documentation index, see [llms.txt](https://app.developers.karte.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://app.developers.karte.io/react-native-sdk/setup-react-native-sdk-expo.md).

# \[React Native]SDKを導入する (Expo)

{% hint style="warning" %}
**導入時の注意事項**

新規でのReact Native環境への導入、もしくは既存環境をReact Native環境に移行する場合、担当から詳細をご案内しております。\
適宜担当までご連絡をお願い致します。
{% endhint %}

Expoでの導入は、Managed WorkflowかBare Workflowかによって方法が異なります。

## 導入手順(Managed Workflow)

### 1. パッケージをインストールする

下記パッケージをインストールします。

{% code overflow="wrap" %}

```sh
npm install @react-native-karte/core
npm install @react-native-karte/notification
npm install @react-native-karte/in-app-messaging
npm install karte-expo-plugin
```

{% endcode %}

{% hint style="warning" %}
**パッケージ導入に関する注意点**

`karte-expo-plugin` では `@react-native-karte/core` `@react-native-karte/in-app-messaging` `@react-native-karte/notification` の導入が必須です。
{% endhint %}

### 2. React Native Firebase を導入する

{% code overflow="wrap" %}

```sh
npm install @react-native-firebase/app
npm install @react-native-firebase/messaging
```

{% endcode %}

導入に関しては、下記ドキュメントをご覧ください。

* [プッシュ通知を受信する](https://app.developers.karte.io/react-native-sdk/pages/90wYEaf1r1YRxCQ1qP9L#step1-react-native-firebase-を導入する)

### 3. KARTE 設定ファイルをプロジェクトに追加する

iOS, Android それぞれの設定ファイルダウンロードします。

ダウンロード方法に関しては、下記ドキュメントをご覧ください。

* [SDKの設定ファイルをダウンロードする](https://support.karte.io/post/SRlsXvrikIKjpZcfahGdc)

ダウンロードしたファイルをプロジェクトのルートディレクトリに移動します。

### 4. app.json ファイルを編集する

app.json ファイルに、設定ファイルのパスを指定します。Firebaseプラグインの設定も追加します。

{% code title="app.json" overflow="wrap" %}

```json
{
  "expo": {
    "plugins": [
      [
        "karte-expo-plugin",
        {
          "karteInfoPlist": "./Karte-Info.plist",
          "karteXml": "./karte.xml"
        }
    	],
      "@react-native-firebase/app",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}
```

{% endcode %}

### 5. ネイティブコードを生成する

Expoのプラグインを追加した際はios/androidディレクトリを再生成する必要があるため以下のコマンドを実行します。

{% code overflow="wrap" %}

```sh
npx expo prebuild --clean
```

{% endcode %}

詳細については Expo の[ドキュメント](https://docs.expo.dev/workflow/customizing/)をご覧ください。

{% hint style="warning" %}
**実行環境について**

ExpoプラグインはExpo Go環境では動作しません。 `npx expo prebuild --clean` コマンド実行後、プラットフォームに合わせて以下のコマンドを実行するかXcode/AndroidStudioからネイティブ環境で実行してください。

{% code overflow="wrap" %}

```shell
npx expo run:ios
npx expo run:android
```

{% endcode %}
{% endhint %}

## 導入手順(Bare Workflow)

### 1. パッケージをインストールする

下記パッケージをインストールします。

{% code overflow="wrap" %}

```sh
npm install @react-native-karte/core
npm install @react-native-karte/notification
npm install @react-native-karte/in-app-messaging
```

{% endcode %}

### 2. React Native Firebase を導入する

{% code overflow="wrap" %}

```sh
npm install @react-native-firebase/app
npm install @react-native-firebase/messaging
```

{% endcode %}

導入に関しては、下記ドキュメントをご覧ください。

* [プッシュ通知を受信する](https://app.developers.karte.io/react-native-sdk/pages/90wYEaf1r1YRxCQ1qP9L#step1-react-native-firebase-を導入する)

### 3. KARTEのセットアップを行う

以下のドキュメントに従って、KARTEのセットアップを行なってください。

* [\[React Native\] SDKを導入する - 導入手順(iOS)](https://github.com/plaidev/karte-app-dev-docs/blob/main/japanese/react-native-sdk/setup-react-native-sdk/README.md#/導入手順ios)
* [\[React Native\] SDKを導入する - 導入手順(Android)](https://github.com/plaidev/karte-app-dev-docs/blob/main/japanese/react-native-sdk/setup-react-native-sdk/README.md#/導入手順android)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://app.developers.karte.io/react-native-sdk/setup-react-native-sdk-expo.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.