Expoを使っていたReact NativeのアプリでNative Modulesを使うためにdetachする

こんばんは，ぽちです．

Expoを使って開発をしていたら，途中でどうしてもNative Modulesを使いたいというケースが出てきます． その場合はdetachする必要が出てきます． detachした後はXCodeã‚„Android Stuidoで自分で管理する必要が出てきますので，その辺りよく考えてからdetachの道へ進むことをオススメします．うちは極力detachの道へ進みたくありません．

detachした後でもXDEで起動とかXDEからPublishとかは出来ます． Publishは出来ると言っても，Nativeの部分はケアされないのでその部分は動きません．（クラッシュするでしょうね）

それでは，detachの流れを追いましょう． 基本的には Detaching to ExpoKit に沿ってコマンドを実行して行けばdetach出来ます．

初めに，exp コマンドが必要なので，入れていない場合はインストールします．

$ npm install -g exp

Expoへのログインが必要なので，ログインします．

$ exp login

exp.jsonに必要な項目を追加します．

 {
   "name": "Your App Name",
   "icon": "./path/to/your/app-icon.png",
   "version": "1.0.0",
   "slug": "your-app-slug",
   "sdkVersion": "17.0.0",
   "ios": {
     "bundleIdentifier": "com.yourcompany.yourappname のようなのを入れる",
   },
   "android": {
     "package": "com.yourcompany.yourappname のようなのを入れる",
   }
 }

その後exp detachを実行すると色々処理が行われてiosディレクトリやandroidディレクトリが作成されたりします．

$ exp detach       
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
Validating project manifest...
Downloading iOS code...
Moving iOS project files...
Naming iOS project...
Configuring iOS project...
Using shell config: { manifestUrl: 'exp://exp.host/@pchw/***********',
  isShell: true,
  isManifestVerificationBypassed: true }
Configuring iOS dependencies...
Cleaning up iOS...
iOS detach is complete!
Downloading Android code...
Moving Android project files...
Configuring Android project...
Naming Android project...
Cleaning up Android...
Android detach is complete!

Writing ExpoKit configuration...
Finished detaching your project! Look in the `android` and `ios` directories for the respective native projects. Follow the ExpoKit guide at https://docs.expo.io/versions/latest/guides/expokit.html to get your project running.

XDEでRestartします．

その後，iosディレクトリに移動して，pod installを行って依存するモジュールのインストールを行います．これは結構時間がかかります．

$ cd ios
$ pod install
Analyzing dependencies
Pre-downloading: `ExpoKit` from `http://github.com/expo/expo.git`, tag `ios/1.16.2`
Fetching podspec for `React` from `../node_modules/react-native`
Fetching podspec for `Yoga` from `../node_modules/react-native/ReactCommon/yoga`
Downloading dependencies
Installing Amplitude-iOS (3.14.1)
Installing Analytics (3.6.1)
Installing AppAuth (0.9.1)
Installing Bolts (1.8.4)
Installing Branch (0.14.12)
Installing CocoaLumberjack (3.2.0)
Installing Crashlytics (3.8.4)
Installing ExpoKit (1.16.2)
Installing FBAudienceNetwork (4.23.0)
Installing FBSDKCoreKit (4.23.0)
Installing FBSDKLoginKit (4.23.0)
Installing FBSDKShareKit (4.23.0)
Installing Fabric (1.6.11)
Installing FirebaseAnalytics (3.9.0)
Installing FirebaseCore (3.6.0)
Installing FirebaseInstanceID (1.0.10)
Installing GPUImage (0.1.7)
Installing GTMOAuth2 (1.1.4)
Installing GTMSessionFetcher (1.1.10)
Installing Google (3.0.3)
Installing GoogleMaps (2.2.0)
Installing GoogleSignIn (4.0.2)
Installing GoogleToolboxForMac (2.1.1)
Installing React (0.44.0)
Installing Yoga (0.44.0.React)
Installing lottie-ios (1.5.1)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 15 dependencies from the Podfile and 26 total pods installed.

補足：pod install時にエラーが起こった場合 手元の環境ではpod install時に以下のようなエラーが出ました．

$ pod install
Analyzing dependencies
Pre-downloading: `ExpoKit` from `http://github.com/expo/expo.git`, tag `ios/1.16.2`
Fetching podspec for `React` from `../node_modules/react-native`
Fetching podspec for `Yoga` from `../node_modules/react-native/ReactCommon/yoga`
[!] Unable to find a specification for `lottie-ios (~> 1.5.1)` depended upon by `ExpoKit/Core`

その場合はpod setup を実行し，その後再度pod installをすることで成功するようになりました．

$ pod setup
Setting up CocoaPods master repo
  $ /usr/local/bin/git -C /Users/pochi/.cocoapods/repos/master fetch origin
  --progress
  remote: Counting objects: 287020, done.        
  remote: Compressing objects: 100% (83/83), done.        
  remote: Total 287020 (delta 52618), reused 52644 (delta 52603), pack-reused 234331        
  Receiving objects: 100% (287020/287020), 29.79 MiB | 432.00 KiB/s, done.
  Resolving deltas: 100% (193366/193366), completed with 7824 local objects.
  From https://github.com/CocoaPods/Specs
     d03518a..3c729d8  master     -> origin/master
  $ /usr/local/bin/git -C /Users/pochi/.cocoapods/repos/master rev-parse
  --abbrev-ref HEAD
  master
  $ /usr/local/bin/git -C /Users/pochi/.cocoapods/repos/master reset --hard
  origin/master
  Checking out files: 100% (29533/29533), done.
  HEAD is now at 3c729d8 [Add] iLog 1.2.5
Setup completed

ここまで出来れば，あとはビルドして実行するだけです． .xcworkspaceのファイルをXCodeで開いてビルド→実行でも良いですし，以下のようにreact-native run-iosを使うのでもいいです． XCodeを開きたくないので，react-native run-iosします．

$ cd ..
$ react-native run-ios
Scanning 550 folders for symlinks in /Users/pochi/Documents/development/github/expokit/node_modules (11ms)
Found Xcode workspace expokit.xcworkspace
（長いので省略）

** BUILD SUCCEEDED **

Installing build/Build/Products/Debug-iphonesimulator/expokit.app
Launching com.yourcompany.yourappname
com.yourcompany.yourappname: 82444

自動的にSimulatorが起動して実行されます．

この状態で，XDEの方からbundleされたjsが配信されている状態になります． もちろん，jsのコードを編集するとすぐにSimulatorに反映されます．

あとは，使いたいNative Modulesをインストールして，react-native linkã‚„rnpm linkして使うことができます．

おめでとうございます，detach成功です．