Guides

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

Suggest Edits

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

導入手順(Managed Workflow)

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

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

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

🚧

パッケージ導入に関する注意点

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

2. React Native Firebase を導入する

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

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

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

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

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

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

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

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

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

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

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

npx expo prebuild --clean

詳細については Expo のドキュメントをご覧ください。

🚧

実行環境について

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

npx expo run:ios
npx expo run:android

導入手順(Bare Workflow)

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

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

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

2. React Native Firebase を導入する

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

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

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

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

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

ダウンロードしたファイルをiOSおよびAndroidのルートディレクトリに配置します。

4. Karteのセットアップを行う

現在ExpoをBare Workflowでセットアップする場合、 Module Import(@import KarteCore;)をAppDelegate.mmで行うと
Expoでビルドエラーが発生するという事象が確認されているため、以下の1または2、いずれかワークアラウンドを推奨しております。
※2024.10.22時点、expo:0.51系で確認

1.AppDelegate.mmの拡張子を.mに変更する

XCodeでAppDelegate.mmの拡張子を.mに変更するパターンです。

AppDelegate.mmをXCode上でAppDelegate.mとRenameした上で、
AppDelegate.mを https://developers.karte.io/docs/setup-react-native-sdk-v2#step3-sdk%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B
にそってセットアップします。

2.KarteHelperというobjective-cのクラスを作成する

iOSのプロジェクトファイルに、KarteHelperというObjective-cのクラスを作成した上で、
ヘッダーファイルをAppDelegate.mmでimportします。

// KarteHelper.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface KarteHelper : NSObject

+ (void)setup;

+ (BOOL) openUrl:(UIApplication *)app openURL:(NSURL *)url;

@end

NS_ASSUME_NONNULL_END

// KarteHelper.m

#import "KarteHelper.h"
@import KarteCore;


@implementation KarteHelper

+ (void)setup
{
  [KRTApp setupWithConfiguration:[KRTConfiguration default]];
}

+ (BOOL)openUrl:(UIApplication *)app openURL:(NSURL *)url
{
  return [KRTApp application:app openURL:url];
}

@end

// AppDelegate.mm

#import "KarteHelper.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [KarteHelper setup];
  ... 
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [KarteHelper openUrl:app openURL:url];
}

Updated about 19 hours ago