Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
怖くないexpo eject - TECH STAND #2
Search
takahi5
December 18, 2020
Programming
0
2.1k
怖くないexpo eject - TECH STAND #2
3年ほどExpoのmanaged workflowで開発していたアプリをejectしてbare workflowへ移行しました。その際の苦労やeject後の運用についてご紹介します。
takahi5
December 18, 2020
Tweet
Share
More Decks by takahi5
See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
120
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.5k
React Native x Firebaseの メリットとTips5選
takahi5
1
2.1k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
97
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
710
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.3k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
310
Other Decks in Programming
See All in Programming
Introduction to Git & GitHub
latte72
0
120
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
210
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8.4k
令和最新版手のひらコンピュータ
koba789
14
8k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
600
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.5k
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.3k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
It's Worth the Effort
3n
187
28k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
We Have a Design System, Now What?
morganepeng
53
7.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Designing for humans not robots
tammielis
253
25k
How GitHub (no longer) Works
holman
315
140k
Done Done
chrislema
185
16k
Typedesign – Prime Four
hannesfritz
42
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A better future with KSS
kneath
239
17k
Transcript
怖くない expo eject ワダタカヒコ @takahi5
和田崇彦(ワダタカヒコ) @takahi5 • フリーランス (1月にstand.fmジョイン予定!) • React NativeのUdemyコースを作っ たり
今日話すこと 3年運用したアプリをexpo ejectして Bare Workflowへ移行した話
スポーツ観戦を楽しくするアプリ • リアルタイム実況 • 応援 • ギフティング SpoLive
Expoあり?なし? expo init my-project npx react-native init myProject Expoあり Expoなし(Vanilla
RN, 素のRN)
iOS Android React Native Expo Expoあり (managed workflow)
Expoのメリット (Managed workflow) • Expo Clientアプリによるスピーディな動作確認 (QRコードで起動) • OTAアップデート (apple審査なし)
• クラウドビルド (XCode, Android Studio不要, プロビジョニング管理も)
Expoのデメリット (Managed workflow) ネイティブコードを触れない Expoの提供してない機能は、実現できない (例) • 3rd party製のSDKの導入(広告計測など) •
動画, 音声, bluetoothなどネイティブ寄りの実装 • アプリ内課金
要件を満たすならExpoがおすすめ (大半のアプリはExpoで足りそう)
途中でExpoでは満たせない要件が 追加になったら!?
expo eject Expo (Managed Workflow) Expo (Bare Workflow) expo eject
ネイティブコードも触れる!
Expo Bare Workflowとは iOS Android React Native react-native-unimodule expo- camera
expo- update expo- notification etc ...
フォルダ階層 Managed Workflow Bare Workflow
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
↓ まともに起動しない expo eject
~元通り動かすためにやったこと~ 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/
~元通り動かすためにやったこと~ 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では不要!
~元通り動かすためにやったこと~ 3. 3rdパーティ製モジュールの改修 Bareに対応していない3rdパーティ製モジュール ↓ forkして修正したものを読み込み 例: expo-analytics
~元通り動かすためにやったこと~ 4. クレデンシャルなどの設定 Expo側で管理していたクレデンシャルやプッシュ通知のキー をダウンロードしてXCodeで設定
Bare Workflowになって 変わったこと 変わらなかったこと
Managed → Bareで変わったこと 変わった 変わらなかった OTA Push 通知 Expo Client
SDK の更新 ビルド 方法 社内の 配布方法
OTA ♂ Bareでも対応している (expo-update) Expo SDK 38〜
Push通知 ♂ Bareでも対応している (expo-notification) Expo SDK 37〜
Expo Clientはだいたい動く Managedで対応している機能は動く 非対応機能は分岐させる必要あり expo start react-native start
Expo Clientを使うために... ManagedもしくはBareでしか使えない機能は分岐させる if (Constants.appOwnership === "expo") { // Expo
Clientで起動した場合 // Managedのみの機能 } else { // Bareのみの機能 } https://docs.expo.io/bare/using-expo-client/
SDKの更新 Expo SDKと別に、RN及びExpoパッケージを更新可能 SpoLiveではExpo SDKリリースのタイミングで更新している expo upgrade
社内配布 Before: QRコードでプルリクごとに配布 After: devのrelease channelを向けたビルドを社内に配布 release-channel=prod release-channel=stage ユーザー 社内
まとめ • Bare Workflowも整備されてきた感 • なるべく最新のExpo SDKにしてからejectするのが⭕