⬆️: Upgrade Expo SDK to 48

.github/labeler.yaml

@@ -13,7 +13,6 @@ app:
 # Add 'build' label to any changes to the files listed below
 build:
   - template/.script/**/*
-  - template/.buckconfig
   - template/.editorconfig
   - template/.eslintrc.js
   - template/.prettierrc.js

.github/renovate.json5

@@ -25,20 +25,16 @@
         '@babel/core',
         '@react-native-masked-view/masked-view',
         '@types/react',
-        '@types/react-native',
         'babel-preset-expo',
         'expo',
         'expo-splash-screen',
         'jest',
-        'jest-expo',
         'react',
-        'react-dom',
         'react-native',
         'react-native-gesture-handler',
         'react-native-reanimated',
         'react-native-safe-area-context',
         'react-native-screens',
-        'react-native-web',
         'typescript',
       ],
     },

README.md

@@ -90,6 +90,7 @@ keytool -genkey -v -keystore android/app/debug.keystore -storepass android -alia
 - [x] デフォルトでは`expo-update`を無効化
 - [x] (prebuildそのまま)`orientation`設定を削除(default: 画面方向ロックなし)
 - [x] (prebuildそのまま)`assetBundlePatterns`設定を削除(default: 無し)
+- [x] npm scriptsから`web`を削除
 - [x] Editorconfig, ESLint, Prettierを追加
 - [x] TypeScriptの設定ファイルを修正、`tsc`での型チェックをlintに追加
 - [x] Androidでデフォルトで要求するパーミッションの最小化

example/hands-on/patches/06-login-screen.patch

@@ -1,21 +1,20 @@
 diff --git a/package.json b/package.json
-index b643906..145ac87 100644
+index cc5c15d..f3d20e0 100644
 --- a/package.json
 +++ b/package.json
-@@ -29,6 +29,7 @@
-     "expo-build-properties": "~0.4.1",
-     "expo-splash-screen": "~0.17.5",
+@@ -29,13 +29,15 @@
+     "expo-build-properties": "~0.6.0",
+     "expo-splash-screen": "~0.18.2",
      "expo-status-bar": "~1.4.2",
 +    "formik": "^2.2.6",
-     "react": "18.1.0",
-     "react-dom": "18.1.0",
-     "react-native": "0.70.8",
-@@ -37,7 +38,8 @@
-     "react-native-reanimated": "~2.12.0",
-     "react-native-safe-area-context": "4.4.1",
-     "react-native-screens": "~3.18.0",
--    "react-native-web": "~0.18.7"
-+    "react-native-web": "~0.18.7",
+     "react": "18.2.0",
+     "react-native": "0.71.7",
+     "react-native-elements": "~3.4.0",
+     "react-native-gesture-handler": "~2.9.0",
+     "react-native-reanimated": "~2.14.4",
+     "react-native-safe-area-context": "4.5.0",
+-    "react-native-screens": "~3.20.0"
++    "react-native-screens": "~3.20.0",
 +    "yup": "^0.32.9"
    },
    "devDependencies": {

template/_gitignore

@@ -30,22 +30,21 @@ build/
 local.properties
 *.iml
 *.hprof
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # Bundle artifacts
 *.jsbundle
 
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
 # Expo
 .expo/
 web-build/

template/app.config.js

@@ -15,7 +15,7 @@ module.exports = ({config}) => {
       package: 'com.helloworld',
       adaptiveIcon: {
         foregroundImage: './assets/adaptive-icon.png',
-        backgroundColor: '#FFFFFF',
+        backgroundColor: '#ffffff',
       },
       allowBackup: false,
       blockedPermissions: [

template/package.json

@@ -3,7 +3,6 @@
   "scripts": {
     "android": "expo run:android",
     "ios": "expo run:ios",
-    "web": "expo start --web",
     "start": "expo start --dev-client",
     "prebuild": "run-s build:plugin && expo prebuild --clean --no-install",
     "build:plugin": "rimraf config/plugin/build && tsc --build config/plugin",
@@ -25,41 +24,39 @@
     "@react-navigation/bottom-tabs": "~6.4.0",
     "@react-navigation/native": "~6.0.0",
     "@react-navigation/stack": "~6.3.0",
-    "expo": "~47.0.14",
-    "expo-build-properties": "~0.4.1",
-    "expo-splash-screen": "~0.17.5",
+    "expo": "^48.0.15",
+    "expo-build-properties": "~0.6.0",
+    "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-native": "0.70.8",
+    "react": "18.2.0",
+    "react-native": "0.71.7",
     "react-native-elements": "~3.4.0",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
-    "react-native-web": "~0.18.7"
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
-    "@types/jest": "<27.0.0",
+    "@expo/config-plugins": "~6.0.0",
+    "@types/jest": "<30.0.0",
     "@types/react": "~18.0.24",
-    "@types/react-native": "~0.70.6",
     "@types/react-test-renderer": "18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "babel-preset-expo": "~9.2.1",
+    "babel-preset-expo": "^9.3.0",
     "eslint": "^8.0.0",
     "eslint-config-universe": "^11.0.0",
     "eslint-plugin-deprecation": "^1.3.2",
     "eslint-plugin-jest": "^27.0.0",
     "expo-module-scripts": "^3.0.7",
-    "jest": "^26.6.3",
-    "jest-expo": "^47.0.0",
+    "jest": "^29.2.1",
+    "jest-expo": "^48.0.0",
     "jest-junit": "^14.0.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.4.7",
     "prettier": "^2.2.0",
-    "react-test-renderer": "18.1.0",
+    "react-test-renderer": "^18.2.0",
     "typescript": "^4.6.3"
   },
   "jest-junit": {

template/patches/@expo+config-plugins+5.0.4.patch → template/patches/@expo+config-plugins+6.0.1.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.d.ts b/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.d.ts
-index 403356f..8048396 100644
+index 8a1fc4e..a72436c 100644
 --- a/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.d.ts
 +++ b/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.d.ts
 @@ -14,13 +14,15 @@ export declare function getHackyProjectName(projectRoot: string, config: ExpoCon
@@ -38,10 +38,10 @@ index 403356f..8048396 100644
  export declare function getApplicationNativeTarget({ project, projectName, }: {
      project: XcodeProject;
 diff --git a/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.js b/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.js
-index 840276a..e205dba 100644
+index f2ff872..f39fd90 100644
 --- a/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.js
 +++ b/node_modules/@expo/config-plugins/build/ios/utils/Xcodeproj.js
-@@ -181,7 +181,9 @@ function addResourceFileToGroup({
+@@ -146,7 +146,9 @@ function addResourceFileToGroup({
    isBuildFile,
    project,
    verbose,
@@ -52,24 +52,16 @@ index 840276a..e205dba 100644
  }) {
    return addFileToGroupAndLink({
      filepath,
-@@ -189,6 +191,8 @@ function addResourceFileToGroup({
+@@ -154,6 +156,8 @@ function addResourceFileToGroup({
      project,
      verbose,
      targetUuid,
 +    fileUuid,
 +    fileRef,
-
      addFileToProject({
        project,
-@@ -202,7 +206,6 @@ function addResourceFileToGroup({
-
-       project.addToPbxResourcesBuildPhase(file);
-     }
--
-   });
- }
- /**
-@@ -246,7 +249,9 @@ function addFileToGroupAndLink({
+       file
+@@ -204,7 +208,9 @@ function addFileToGroupAndLink({
    project,
    verbose,
    addFileToProject,
@@ -80,10 +72,10 @@ index 840276a..e205dba 100644
  }) {
    const group = pbxGroupByPathOrAssert(project, groupName);
    const file = createProjectFileForGroup({
-@@ -271,8 +276,16 @@ function addFileToGroupAndLink({
+@@ -225,8 +231,16 @@ function addFileToGroupAndLink({
+     const applicationNativeTarget = project.getTarget('com.apple.product-type.application');
      file.target = applicationNativeTarget === null || applicationNativeTarget === void 0 ? void 0 : applicationNativeTarget.uuid;
    }
-
 -  file.uuid = project.generateUuid();
 -  file.fileRef = project.generateUuid();
 +  if (fileUuid) {
@@ -100,10 +92,10 @@ index 840276a..e205dba 100644
      project,
      file
 diff --git a/node_modules/@expo/config-plugins/build/plugins/withPlugins.js b/node_modules/@expo/config-plugins/build/plugins/withPlugins.js
-index 9349fdc..2981d7b 100644
+index 3623bd4..e389145 100644
 --- a/node_modules/@expo/config-plugins/build/plugins/withPlugins.js
 +++ b/node_modules/@expo/config-plugins/build/plugins/withPlugins.js
-@@ -35,6 +35,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
+@@ -27,6 +27,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   */
  const withPlugins = (config, plugins) => {
    (0, _assert().default)(Array.isArray(plugins), 'withPlugins expected a valid array of plugins or plugin module paths');

template/patches/README.md

@@ -25,6 +25,50 @@ React Native Elementsの3系ではこれらの変更に追従できていなか
 
 そこで、`IOSConfig.XcodeUtils.addResourceFileToGroup`にファイルのIDを指定できるパッチを当てています。
 
+### `@expo/config-plugins`を`devDependencies`に追加
+
+ライブラリによっては`@expo/config-plugins`を`dependencies`に設定しています。
+これらのライブラリが設定している`@expo/config-plugins`のバージョンが同じとは限りません。
+
+複数のバージョンが混在している場合、`deduped`が発生し`node_modules`配下は以下のようになります。
+
+```console
+node_modules/
+├── @expo
+│   ├── cli
+│   │   ├── node_modules
+│   │   │   ├── @expo
+│   │   │   │   ├── config-plugins(6.0.1)
+│   ├── config-plugins(5.0.4)
+├── @react-native-firebase
+│   ├── app
+
+※ 必要な箇所以外は省略しています。
+※ `@expo/config-plugins`を`dependencies`に設定しているライブラリとして、`@react-native-firebase/app`を例に挙げています。
+※ 括弧内に記載しているバージョンは例です。
+```
+
+このパッチは、`@expo/cli`が使用する`@expo/config-plugins`に適用しますが、`deduped`が発生するかどうかによってパッチを適用するべきパスが変わってしまいます。
+
+そのため、`@expo/cli`が使用する`@expo/config-plugins`と同じバージョンを`devDependencies`に追加して、`node_modules`配下の構成を以下のようにします。
+
+```console
+node_modules/
+├── @expo
+│   ├── cli
+│   ├── config-plugins(6.0.1)
+├── @react-native-firebase
+│   ├── app
+│   │   ├── node_modules
+│   │   │   │   ├── config-plugins(5.0.4)
+
+※ 必要な箇所以外は省略しています。
+※ `@expo/config-plugins`を`dependencies`に設定しているライブラリとして、`@react-native-firebase/app`を例に挙げています。
+※ 括弧内に記載しているバージョンは例です。
+```
+
+この対応により、パッチを適用するパスは常に`node_modules/@expo/config-plugins`になります。
+
 ## Expo Config Pluginsで、デフォルトpluginを無効化できるようにするパッチ
 
 `expo prebuild`時にデフォルトpluginに含まれる`withScheme`pluginによってカスタムスキーマが追加されてしまいます。
@@ -33,3 +77,15 @@ React Native Elementsの3系ではこれらの変更に追従できていなか
 ※ 現在は `withPlugins` に渡されている plugin のみが対象です(`withRunOnce`, `withStaticPlugin` は対象外)。
 
 `app.config.js`の`disabledPlugins`にpluginの`name`を追加すれば除外できます。
+
+## [react-native] FlatListでデータが0件の場合に`scrollToEnd`を呼び出すとエラーが発生する問題に対処するパッチ
+
+FlatListでデータが0件の場合に`scrollToEnd`を呼び出すと以下のエラーが発生します。
+
+> ERROR  Invariant Violation: Tried to get frame for out of range index -1, js engine: hermes
+
+この問題に対するissueとPull Requestは以下になります。
+* https://github.com/facebook/react-native/issues/36066
+* https://github.com/facebook/react-native/pull/36067
+
+Pull Requestは既にクローズされ`main`ブランチにはマージされていますが、このアプリで使用している`react-native`のバージョンにはまだ入っていないため、パッチを当てています。

template/patches/react-native+0.71.7.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/react-native/Libraries/Lists/VirtualizedList.js b/node_modules/react-native/Libraries/Lists/VirtualizedList.js
+index e948a85..4534330 100644
+--- a/node_modules/react-native/Libraries/Lists/VirtualizedList.js
++++ b/node_modules/react-native/Libraries/Lists/VirtualizedList.js
+@@ -157,6 +157,9 @@ export default class VirtualizedList extends StateSafePureComponent<
+   scrollToEnd(params?: ?{animated?: ?boolean, ...}) {
+     const animated = params ? params.animated : true;
+     const veryLast = this.props.getItemCount(this.props.data) - 1;
++    if (veryLast < 0) {
++      return;
++    }
+     const frame = this.__getFrameMetricsApprox(veryLast, this.props);
+     const offset = Math.max(
+       0,