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
1.9k
怖くない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
92
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.3k
React Native x Firebaseの メリットとTips5選
takahi5
1
1.9k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
90
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
600
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.1k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
260
Other Decks in Programming
See All in Programming
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
350
App Store Connect APIで 作業時間を増やそう
mot_techtalk
3
130
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
1.2k
20241004 モノタロウ式~ドメインモデリングとリアーキテクチャ
monotaro
PRO
2
650
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
220
RDBの世界をぬりかえていくモデルグラフDB〜truncus graphによるモデルファースト開発〜
jurabi
0
180
テスト駆動開発✅️
akitoshiga
1
160
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
150
perl for shell, awk and sed programmers
mackee
2
940
Програмиране с Rust, ФМИ, 2024
nikolads
0
120
文化が生産性を作る
jimpei
3
610
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
50
7.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Designing for Performance
lara
604
68k
Git: the NoSQL Database
bkeepers
PRO
425
64k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Happy Clients
brianwarren
97
6.7k
The Cult of Friendly URLs
andyhume
77
6k
GraphQLとの向き合い方2022年版
quramy
43
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
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するのが⭕