Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

⬆️: Upgrade Expo SDK to 49 #1221

Merged
merged 70 commits into from
Sep 19, 2023
Merged

⬆️: Upgrade Expo SDK to 49 #1221

merged 70 commits into from
Sep 19, 2023

Conversation

tksugimoto
Copy link

@tksugimoto tksugimoto commented Aug 30, 2023

✅ What's done

  • npm install expo@^49.0.0を実行してExpo SDKをアップグレード
  • npx expo install --fixを実行してExpo管理のライブラリをアップグレード
  • 既存のパッチファイルの更新
  • 不要になったreact-native用patchファイルを削除
  • npx expo instlall --fixで更新されないライブラリの更新
    • jest-expo(^48.0.0 -> ^49.0.0)
  • typeエラー修正
    • styles.imageStyle
    • WebView.onScroll
    • FlatList.renderItem
  • test修正
    • react-native-reanimated v2のjestUtilsパス変更への対応
    • react-nativeのDimensionsのmock失敗の対応
    • jest.advanceTimersByTimeをactでwrap
    • jest-mockでのexpo-constantsのdeprecated warn対応
    • アニメーション中のAnimatedStyleの僅かな変化に対応
    • slideOutDurationテストの時間指定が厳密すぎるとテストが落ちる問題修正
    • keyExtractorの呼び出しが増えて落ちるようになったテスト修正
    • update snapshot
  • warn対応
    • TypeScriptバージョンに対応しているtypescript-eslintに更新
    • deprecated対応(JSX.Element -> React.JSX.Element)
    • initialScrollIndexの範囲外警告対応
  • prebuild
    • local
    • dev
    • stg
    • prod
  • buildエラー対応
    • app.notifee:coreを見つけられない問題対応
  • chore
    • 使用しなくなったandroidx.swiperefreshlayout:swiperefreshlayoutをrenovate除外設定から削除
  • 不要になったconfig pluginを削除
    • withAndroidRemoveUsesClearTextTrafficForRelease
  • 不要になったProguardRule削除(react-native-svg)
  • typescript ^5.1.3~5.1.3(互換性対応)
  • .gitignoreの更新
  • managed-license.jsの更新
  • docs
    • Metro Bundlerのデフォルトポート番号の更新(19000 -> 8081)
    • アップグレード記事の作成

Tests

  • QA画面の動作確認
  • デモ画面の動作確認

以下のコマンドをこのプルリクエストのコメントとして投稿すると、
Azure Pipeline上でSantokuAppをビルドしてDeployGateへアップロードできます。

  • /azp run deploy-stg
  • /azp run deploy-dev
  • /azp run deploy-all
    • stg, dev の両方

Devices

  • iOS
    • シミュレータ (iPhone 13/iOS 15.5)
    • 実機 (iPhone SE/iOS 16.6)
  • Android
    • エミュレータ (Pixel 3a/Android 13)
    • 実機 (Pixel 3a/Android 11)

Other (messages to reviewers, concerns, etc.)

関連

patch-package の修正は別途対応
変更しなくても動作はするがwarningがでるため
以下への対応
Improve handling of invalid DimensionValue usage
facebook/react-native@02e29ab
```diff
-width?: number | string | undefined;
+width?: DimensionValue | undefined;
```
```ts
export type DimensionValue =
  | number
  | 'auto'
  | `${number}%`
  | Animated.AnimatedNode
  | null;
```
以下への対応
feat: Fabric support
react-native-webview/react-native-webview@5558e28
```diff
-onScroll?: (event: WebViewScrollEvent) => void;
+onScroll?: ComponentProps<typeof NativeWebViewComponent>['onScroll'];
```
以下への対応
🤖 Merge [react] Allow returning ReactNode from function com…
DefinitelyTyped/DefinitelyTyped@443451c
```diff
    interface FunctionComponent<P = {}> {
-        (props: P, context?: any): ReactElement<any, any> | null;
+        (props: P, context?: any): ReactNode;
```
@github-actions github-actions bot added app build chore Other changes that don't modify src or test files. test labels Aug 30, 2023
@tksugimoto
Copy link
Author

/azp run deploy-all

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

Cannot find module 'react-native-reanimated/lib/reanimated2/jestUtils' from 'jest/setup/react-native-reanimated.js'
以下変更の対応
ESM Dimensions
facebook/react-native@c52ed25
```diff
   get Dimensions(): Dimensions {
-    return require('./Libraries/Utilities/Dimensions');
+    return require('./Libraries/Utilities/Dimensions').default;
   },
```
以下の警告が出るようになっていたため
- Warning: An update to ForwardRef inside a test was not wrapped in act(...).
- When testing, code that causes React state updates should be wrapped into act(...):
> Constants.manifest has been deprecated in favor of Constants.expoConfig.

※ ...jest.requireActual('expo-constants') を使うと別のテストが落ちた
> TypeError: Cannot read properties of null (reading 'uri')
>   at Function.uri [as fromModule] (node_modules/expo-asset/src/Asset.ts:156:15)

※ wrapPropertyの第二引数のpropertyObj: objectの型をPartial<T>にするのは型解決ができず断念
> 型 'string | symbol' の式を使用して型 'Partial<T>' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。
また、T extends object なので追加で不正なkey:value追加は検知できなかった
[修正前のtest結果]
    expect(jest.fn()).not.toHaveBeenCalled()

    Expected number of calls: 0
    Received number of calls: 1

    1: true

      151 |       jest.advanceTimersByTime(99);
      152 |     });
    > 153 |     expect(afterSlideOut).not.toHaveBeenCalled();
          |                               ^
      154 |     // slideOutDurationで指定した時間経過後は、afterSlideOutが実行される
      155 |     await act(() => {
      156 |       jest.advanceTimersByTime(1);

      at Object.toHaveBeenCalled (src/bases/ui/picker/PickerContainer.test.tsx:153:31)
発生していたWARNログ
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.1.0

YOUR TYPESCRIPT VERSION: 5.1.6

Please only submit bug reports when using the officially supported version.

=============

実行コマンド
npm update @typescript-eslint/eslint-plugin @typescript-eslint/parser
eslint error
error  'JSX' is deprecated. Use `React.JSX` instead of the global `JSX` namespace  deprecation/deprecation
> initialScrollIndex "-1" is not valid (list has 0 items)

react-native v0.72.0での変更
Gracefully handle out-of-bounds initialScrollIndex
facebook/react-native@aab9df3
@tksugimoto
Copy link
Author

/azp run deploy-all

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

- react-native-svg用設定を削除(ライブラリ側で対応されたため)
  - software-mansion/react-native-svg@1637580
- expo用設定のコメントのURLをExpo49に更新(コードに大差ないので依然として対応は必要と思われる)
typescript v5.2を使うとnpm run lint:tscで以下のWARNが出るためv5.1.xまでを指定
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <5.2.0

YOUR TYPESCRIPT VERSION: 5.2.2
=============

バージョン互換性の記載場所
https://github.com/typescript-eslint/typescript-eslint/blob/v5.62.0/packages/typescript-estree/src/parseSettings/warnAboutTSVersion.ts#L9
> const SUPPORTED_TYPESCRIPT_VERSIONS = '>=3.3.1 <5.2.0';

※ typescript-eslintは以下のライブラリでv5が要求されている
- eslint-config-universe v11.x
  - expo-module-scripts v3.0.x
Co-authored-by: creature-water-valley <[email protected]>
@tksugimoto tksugimoto enabled auto-merge (squash) September 19, 2023 07:53
htmltestからのmarketplace.visualstudio.comへのアクセスは404になってしまうらしい
@tksugimoto tksugimoto merged commit 137f589 into master Sep 19, 2023
4 checks passed
@tksugimoto tksugimoto deleted the feature/upgrade-expo-49 branch September 19, 2023 08:43
@creature-water-valley creature-water-valley mentioned this pull request Sep 19, 2023
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
app build chore Other changes that don't modify src or test files. doc Improvements or additions to documentation test
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants