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.7k
怖くない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
77
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.2k
React Native x Firebaseの メリットとTips5選
takahi5
1
1.8k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
79
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
520
リモートワーク×副業 が中心のチームづくり
takahi5
0
1k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
250
Other Decks in Programming
See All in Programming
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
20240301_cocone_EMゆるミートアップvol6_LT資料
cocone
0
250
25 Years of the JCP Program
ivargrimstad
0
1k
ログラスの継続的なプロンプト改善のためのLLMOpsの今 / LLMOps at loglass now
rkaga
PRO
1
330
TokyoR#111_ANOVA
kilometer
1
710
iOS / Android ネイティブ 実装アプリの Flutter 化事例
mthiroshi
0
650
オレオレkaggle開発環境に Formatter/Linter入れてみた
stgkrt
0
340
Docker ハンズオン / docker-hands-on
suzukihoge
48
15k
スタートアップのフロントエンド事情 GENBA #2 〜Front-End Opsの現場〜
ebijun1007
1
780
Microsoft Fabricを7ヶ月使ってわかったこと
shun_oshidari
2
450
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
180
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
130
Featured
See All Featured
Happy Clients
brianwarren
91
6.3k
Bash Introduction
62gerente
604
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Product Roadmaps are Hard
iamctodd
43
9.6k
Why Our Code Smells
bkeepers
PRO
330
56k
Navigating Team Friction
lara
177
13k
A Philosophy of Restraint
colly
195
15k
Raft: Consensus for Rubyists
vanstee
130
6.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
How STYLIGHT went responsive
nonsquared
92
4.7k
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するのが⭕