MENU

Expo 46が公開されました

2022-08-03

Expo 46 is available

Expo46

8月2日にExpo46が正式に公開されました。


主要な変更点

  • react-native-skiaのサポート
  • FlashListのサポート
  • React Native 0.69.3とReact 18へのアップデート
  • ローカルのexpo-cliをデフォルトで使用するように変更
  • expo-dev-clientが1.0.0に到達
  • クラシックビルドを使用する最後のバージョンに到達

ローカルのexpo-cliをデフォルトで使用するようになったのでexpo startなどのコマンドに若干の変更が必要です。

なお、expo build:iosやexpo build:androidなどのクラシックビルドコマンドは今後2週間で利用可能になるようです。

アップグレード方法

いつものごとく自作のボイラープレートでアップグレードを試してみました。


まずはグローバルのexpo-cliを更新します。

npm i -g expo-cli

次にパッケージをアップグレードします。

ローカルのexpo-cliがデフォルトになったため、グローバルにインストールしたexpoコマンドを使う場合はexpo-cliと明示する必要があります。

expo-cli upgrade 46

ローカルのexpo-cliも更新しておきます。

yarn add expo-cli

アプリを実行してみます。ローカルのexpo-cliを使うのでnpxを付与して実行します。

npx expo start

発生したエラー

上記コマンドで実行したところ以下のエラーが発生しました。

Invariant Violation: ViewPropTypes has been removed from React Native.

以前からViewPropTypesがdeprecatedになったという警告は出ていましたがついにremovedされてしまったためエラーが発生しました。

対処方法

Issuesを参考に修正していきます。

まずはpatch-packageをインストールします。

yarn add patch-package

次にdeprecated-react-native-prop-typesをインストールします。

yarn add deprecated-react-native-prop-types

node_modules/react-native/index.jsの436から463行目を修正していきます。

変更前

// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
invariant(
  false,
  'ColorPropType has been removed from React Native. Migrate to ' +
    "ColorPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get EdgeInsetsPropType(): $FlowFixMe {
invariant(
  false,
  'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
    "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get PointPropType(): $FlowFixMe {
invariant(
  false,
  'PointPropType has been removed from React Native. Migrate to ' +
    "PointPropType exported from 'deprecated-react-native-prop-types'.",
);
},
get ViewPropTypes(): $FlowFixMe {
invariant(
  false,
  'ViewPropTypes has been removed from React Native. Migrate to ' +
    "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
);
},

変更後

// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ColorPropType;
},
get EdgeInsetsPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},
get PointPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').PointPropType;
},
get ViewPropTypes(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ViewPropTypes;
},

行った変更をpatch-packageに保存します。

npx patch-package react-native

依存関係のインストール時にpatch-packageも実行されるようにコマンドを追加します。

postinstallを追加するのと、毎回npxをつけてexpoコマンドを実行するのも面倒なのでstartとpublishも変更しました。

package.json

"scripts": {
  "start": "npx expo start",
  "android": "npx expo start --android",
  "ios": "npx expo start --ios",
  "postinstall": "patch-package",
  "publish": "npx expo publish",
},

実行します。

yarn start

以上の変更でExpo Goにてアプリを実行できることを確認しました。

まとめ

いよいよクラシックビルドをサポートする最後のSDKになりました。来年はじめにはクラシックビルドが終了するため既存のExpoアプリは今後5ヶ月以内にEASビルドに移行する必要があります。

EASへの移行についてもいずれブログ記事にする予定です。

この記事を共有