概要
今年の1月にGoogleが「今後Androidアプリは64bit対応してないとダメだよ！8月1日以降32bitのアプリはリリースできないからね！」というアナウンスをしました。 android-developers.googleblog.com
SnapmartアプリはReactNativeで実装しており、開発ツールとしてExpoを使っています。ExpoはSDKのバージョン33から64bitのApp Bundleをビルドできるようになりました。 blog.expo.io
この記事ではExpo SDK v32.0.0からv33.0.0へアップグレードする手順を紹介します。
手順
app.jsonの修正
app.jsonのsdkVersionを"33.0.0"に変更します。
package.jsonの修正
package.json内に記述している、react-native, expo, reactをそれぞれ下記の通り変更します。
{ "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", "expo": "^33.0.0", "react": "16.8.3" }
import文の修正
これまでexpoからのimportしていた各種APIが、SDK33からはexpoから分離し、別パッケージとして開発が行われるようになりました。 それに伴い、expoからのimportしていたコードは、分離されたパッケージからimportするように変更しなくてはなりません。
具体的にはこんな感じです。
- Before
import { FileSystem } from 'expo';
- After
expo install expo-file-systemを実行import * as FileSystem from 'expo-file-system';
上記のような修正を全て手作業を行うのはとても骨が折れます。
Expoはこの処理を自動で修正するツールも開発しています。今回はそのツールを使用します。
www.npmjs.com
npx expo-codemod
使い方は非常に簡単です。
$ npx expo-codemod
$ npx expo-codemod sdk33-imports 'src/**/*.js' 'src/**/*.{ts,tsx}'
Transforming 13 TS files...
Processing 13 files...
Spawning 11 workers...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 2 files to free worker...
Sending 1 files to free worker...
All done.
Results:
0 errors
12 unmodified
0 skipped
1 ok
Time elapsed: 0.471seconds
Transforming 99 TSX files...
Processing 99 files...
Spawning 11 workers...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
Sending 9 files to free worker...
All done.
Results:
0 errors
37 unmodified
0 skipped
62 ok
Time elapsed: 1.661seconds
Added imports from 9 packages.
To install the correct versions of these packages you can run this expo-cli command:
expo install @expo/vector-icons expo-analytics-amplitude expo-camera expo-constants expo-contacts expo-font expo-image-picker expo-permissions expo-secure-store
このような感じで自動で変換してくれます。 また、処理が終わったあとのメッセージに、expo installすべきパッケージが羅列されます。 最後に下記コマンドを実行すれば変更は完了です。
expo install @expo/vector-icons expo-analytics-amplitude expo-camera expo-constants expo-contacts expo-font expo-image-picker expo-permissions expo-secure-store
node_moduleの削除と再インストール
package.jsonを書き換えたので、node_moduleディレクトリを削除します。
その後、yarn installで新しくパッケージのインストールを行います。
Breaking changesの確認と修正
最後にBreaking changesを確認し、変更すべきものがあったらアプリのコードを修正していきます。 github.com
まとめ
Expo SDKのバージョンアップは基本的にapp.jsonとpackage.jsonを修正してyarn installするだけで済みます。 SDK33においては、ExpoのAPIを独立させる動きがあっため、自動変換ツールを使用してパッケージのimport方法を変更しました。 自動変換ツールをExpoが提供してくれているので、特にハマることもなく変換できました。 最後のBreaking changesの確認と修正は、アプリの規模によって修正箇所が増減しそうです。 Snapmartアプリは影響があった修正は数カ所であったため、比較的スムーズにアップグレードが完了しました。
また、Expo SDKは下位互換性維持期間はリリースされてから半年であることや、半年をすぎるとbuildできなくなります。 そのため、Expoを使っている場合は、定期的にSDKのアップグレードを行なう必要があります。
