production.log

ピクスタ株式会社で開発部の部長をやっている星直史のブログです。

【React Native】Expo SDK v33.0.0 へのアップグレード手順

概要

今年の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のアップグレードを行なう必要があります。