Slide 1
Slide 1 text
怖くない
expo eject
ワダタカヒコ
@takahi5
Slide 2
Slide 2 text
和田崇彦(ワダタカヒコ)
@takahi5
● フリーランス
(1月にstand.fmジョイン予定!)
● React NativeのUdemyコースを作っ
たり
Slide 3
Slide 3 text
今日話すこと
3年運用したアプリをexpo ejectして
Bare Workflowへ移行した話
Slide 4
Slide 4 text
スポーツ観戦を楽しくするアプリ
● リアルタイム実況
● 応援
● ギフティング
SpoLive
Slide 5
Slide 5 text
Expoあり?なし?
expo init my-project
npx react-native init myProject
Expoあり
Expoなし(Vanilla RN, 素のRN)
Slide 6
Slide 6 text
iOS Android
React Native
Expo
Expoあり
(managed workflow)
Slide 7
Slide 7 text
Expoのメリット
(Managed workflow)
● Expo Clientアプリによるスピーディな動作確認
(QRコードで起動)
● OTAアップデート
(apple審査なし)
● クラウドビルド
(XCode, Android Studio不要, プロビジョニング管理も)
Slide 8
Slide 8 text
Expoのデメリット
(Managed workflow)
ネイティブコードを触れない
Expoの提供してない機能は、実現できない
(例)
● 3rd party製のSDKの導入(広告計測など)
● 動画, 音声, bluetoothなどネイティブ寄りの実装
● アプリ内課金
Slide 9
Slide 9 text
要件を満たすならExpoがおすすめ
(大半のアプリはExpoで足りそう)
Slide 10
Slide 10 text
途中でExpoでは満たせない要件が
追加になったら!?
Slide 11
Slide 11 text
expo eject
Expo (Managed Workflow)
Expo (Bare Workflow)
expo eject
ネイティブコードも触れる！
Slide 12
Slide 12 text
Expo Bare Workflowとは
iOS Android
React Native
react-native-unimodule
expo-
camera
expo-
update
expo-
notification
etc
...
Slide 13
Slide 13 text
フォルダ階層
Managed Workflow Bare Workflow
Slide 14
Slide 14 text
Expoあり?なし?(まとめ)
expo init my-project
npx react-native init myProject
npx create-react-native-app my-project
Expo (Managed Workflow)
Expo (Bare Workflow)
Vanilla RN (素のRN)
eject
+unimodule
Slide 15
Slide 15 text
↓
まともに起動しない
expo eject
Slide 16
Slide 16 text
~元通り動かすためにやったこと~
1. Bareに対応していないExpoモジュール
● Googleログイン
○ expo-google-app-authでなくexpo-google-sign-in
● スプラッシュスクリーン
○ expo-app-loading でなく expo-splash-screen
...など
https://docs.expo.io/bare/unimodules-full-list/
Slide 17
Slide 17 text
~元通り動かすためにやったこと~
2. Constantsの読み込み
import * as manifest from "app/app.json";
const apkKey = manifest.expo.extra.apiKey
import Constants from 'expo-constants';
const apiKey = Constants.manifest.extra.apiKey
Expo 40では不要！
Slide 18
Slide 18 text
~元通り動かすためにやったこと~
3. 3rdパーティ製モジュールの改修
Bareに対応していない3rdパーティ製モジュール
↓
forkして修正したものを読み込み
例: expo-analytics
Slide 19
Slide 19 text
~元通り動かすためにやったこと~
4. クレデンシャルなどの設定
Expo側で管理していたクレデンシャルやプッシュ通知のキー
をダウンロードしてXCodeで設定
Slide 20
Slide 20 text
Bare Workflowになって
変わったこと
変わらなかったこと
Slide 21
Slide 21 text
Managed → Bareで変わったこと
変わった
変わらなかった
OTA
Push
通知
Expo
Client
SDK
の更新
ビルド
方法
社内の
配布方法
Slide 22
Slide 22 text
OTA ♂
Bareでも対応している
(expo-update)
Expo SDK 38〜
Slide 23
Slide 23 text
Push通知 ♂
Bareでも対応している
(expo-notification)
Expo SDK 37〜
Slide 24
Slide 24 text
Expo Clientはだいたい動く
Managedで対応している機能は動く
非対応機能は分岐させる必要あり
expo start react-native start
Slide 25
Slide 25 text
Expo Clientを使うために...
ManagedもしくはBareでしか使えない機能は分岐させる
if (Constants.appOwnership === "expo") {
// Expo Clientで起動した場合
// Managedのみの機能
} else {
// Bareのみの機能
}
https://docs.expo.io/bare/using-expo-client/
Slide 26
Slide 26 text
SDKの更新
Expo SDKと別に、RN及びExpoパッケージを更新可能
SpoLiveではExpo SDKリリースのタイミングで更新している
expo upgrade
Slide 27
Slide 27 text
社内配布
Before: QRコードでプルリクごとに配布
After: devのrelease channelを向けたビルドを社内に配布
release-channel=prod release-channel=stage
ユーザー 社内
Slide 28
Slide 28 text
まとめ
● Bare Workflowも整備されてきた感
● なるべく最新のExpo SDKにしてからejectするのが⭕