Upgrade to SDK 46 (#385)

* chore: run expo upgrade on all projects * update with-yarn-workspaces to use latest monorepo doc * update with-gatsby dependencies to fix errors * fix 'require not defined' error on with-electron * with-three updated, now working * with-react-three-fiber other deps updated, working * update with-splash-screen for clarity * upgrade all examples to react-native 0.69.4 * clean up with-moti * cleaned up react-navigation examples * cleaned up refs to potentially missing NPM scripts * renamed upgrade script for clarity * fix missed update to react-native 0.69.4 * Fix inaccurate script output * remove inaccurate warning * remove refs to global CLI/ ejecting * Update blank/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update blank/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update with-maps/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update with-maps/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update with-moti/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update with-yarn-workspaces/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update with-electron/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * Update with-moti/README.md Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com> * consistent directions for starting projects, rm cli refs Co-authored-by: Kim Brandwijk <kim.brandwijk@gmail.com>
expo · Aug 18, 2022 · 24e3f53 · 24e3f53
1 parent fca8ce1
commit 24e3f53
Show file tree

Hide file tree

Showing 106 changed files with 650 additions and 551 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,4 +27,7 @@ with-nextjs/out
 */backend/.env
 
 .DS_Store
-report.html
+report.html
+
+# Maintenance logs
+.sdk-upgrade-logs
diff --git a/blank/README.md b/blank/README.md
@@ -19,18 +19,17 @@
 
 - Install packages with `yarn` or `npm install`.
   - If you have native iOS code run `npx pod-install`
-- Run `yarn start` to start the bundler.
+- Run `yarn start` or `npm run start` to start the bundler.
 - Open the project in a React runtime to try it:
   - iOS: [Client iOS](https://itunes.apple.com/app/apple-store/id982107779)
   - Android: [Client Android](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample)
   - Web: Any web browser
 
-## Adding Native Code
+## Running/Modifying Native Code
 
-This project can be run from a web browser or the Expo client app. You may find that you want to add more native code later on. You can do this by ejecting the project and rebuilding it yourself.
+You can generate native iOS and Android projects from your Expo config file (**app.json**/ **app.config.js**) by runnning `npx expo prebuild`. These native projects can then be compiled and run via XCode and Android Studio.
 
-- Run `yarn eject` to create the native projects.
-- You can still run your project in the web browser or Expo client, you just won't be able to access any new native modules you add.
+> 💡 Learn more about [native code in Expo](https://docs.expo.dev/workflow/customizing/)
 
 ## Publishing
 

diff --git a/blank/app.json b/blank/app.json
@@ -0,0 +1,12 @@
+{
+  "expo": {
+    "name": "blank",
+    "slug": "blank",
+    "version": "1.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ]
+  }
+}
diff --git a/blank/package.json b/blank/package.json
@@ -1,12 +1,12 @@
 {
   "dependencies": {
-    "expo": "^45.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/navigation/README.md b/navigation/README.md
@@ -18,7 +18,7 @@
 ## 🚀 How to use
 
 - Install packages with `yarn` or `npm install`.
-- Run `yarn start` to start the bundler.
+- Run `yarn start` or `npm run start` to start the bundler.
 - Open the project in a React runtime to try it:
   - iOS: [Client iOS](https://itunes.apple.com/app/apple-store/id982107779)
   - Android: [Client Android](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample)

diff --git a/navigation/package.json b/navigation/package.json
@@ -5,24 +5,24 @@
     "@react-navigation/bottom-tabs": "~6.0.9",
     "@react-navigation/native": "~6.0.6",
     "@react-navigation/stack": "~6.0.11",
-    "expo": "^45.0.0",
-    "expo-asset": "~8.5.0",
-    "expo-constants": "~13.1.1",
-    "expo-font": "~10.1.0",
-    "expo-linking": "~3.1.0",
-    "expo-splash-screen": "~0.15.1",
-    "expo-status-bar": "~1.3.0",
-    "expo-web-browser": "~10.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.0",
+    "expo-asset": "~8.6.1",
+    "expo-constants": "~13.2.3",
+    "expo-font": "~10.2.0",
+    "expo-linking": "~3.2.2",
+    "expo-splash-screen": "~0.16.1",
+    "expo-status-bar": "~1.4.0",
+    "expo-web-browser": "~11.0.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/upgrade-dependencies.sh b/upgrade-dependencies.sh
@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+
+if [ "$1" == "" ] || [ "$1" == "--help" ]; then
+  echo "Available flags:"
+  echo "--help"
+  echo "--run-expo-upgrade - run yarn and expo-cli upgrade to update to latest SDK on all examples"
+  echo "--run-fix-dependencies - run npx expo install --fix on all repos"
+  exit 0
+fi
+
+if [ "$1" == "--run-expo-upgrade" ]; then
+  echo "Upgrading all projects to the latest SDK..."
+  echo "For each example, this will run `yarn` and then run `expo-cli upgrade`, accepting all defaults."
+  echo "Upgrade logs will be written to .sdk-upgrade-logs."
+
+  mkdir ./.sdk-upgrade-logs
+  for d in */ ; do
+    DIRNAME=${d%/}
+    echo "Upgrading $DIRNAME..."
+    echo "• Run yarn"
+    (cd $DIRNAME && yarn --silent) # If yarn fails spectacularly, we'll see evidence in the logs for expo upgrade
+    echo "• Run expo upgrade"
+    (cd $DIRNAME && echo y | expo-cli upgrade > ../.sdk-upgrade-logs/$DIRNAME.txt)
+  done
+
+  # yarn workspaces has example(s) inside of app folder
+  echo "• Run expo upgrade on apps inside with-yarn-workspaces"
+  mkdir ./.sdk-upgrade-logs/with-yarn-workspaces
+  for d in  with-yarn-workspaces/apps/*/ ; do
+    (cd $DIRNAME && echo y | expo-cli upgrade > ../.sdk-upgrade-logs/$DIRNAME.txt)
+  done
+
+  echo "Upgrades complete! Check .sdk-upgrade-logs for results. Be sure to correct any errors or warnings."
+  exit 0
+fi
+
+if [ "$1" == "--run-fix-dependencies" ]; then
+  echo "Fixing dependencies on all examples..."
+
+  mkdir ./.sdk-upgrade-logs
+  for d in */ ; do
+    DIRNAME=${d%/}
+    echo "Fixing dependencies on $DIRNAME..."
+    (cd $DIRNAME && npx expo install --fix)
+  done
+
+  echo "Fixing dependencies on apps inside with-yarn-workspaces..."
+  mkdir ./.sdk-upgrade-logs/with-yarn-workspaces
+  for d in  with-yarn-workspaces/apps/*/ ; do
+    (cd $DIRNAME && npx expo install --fix)
+  done
+
+  echo "Dependency fixes complete!"
+  exit 0
+fi
+
+echo "Error: flag not recognized"
diff --git a/with-apollo/README.md b/with-apollo/README.md
@@ -12,7 +12,7 @@
 ## 🚀 How to use
 
 - Install with `yarn` or `npm install`.
-- Run `expo start` to try it out.
+- Run `yarn start` or `npm run start` to try it out.
 
 ## 📝 Notes
 

diff --git a/with-apollo/package.json b/with-apollo/package.json
@@ -2,15 +2,15 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@apollo/link-context": "^2.0.0-beta.3",
-    "@react-native-picker/picker": "2.4.0",
-    "expo": "^45.0.0",
+    "@react-native-picker/picker": "2.4.2",
+    "expo": "^46.0.0",
     "graphql": "^15.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/with-auth0/README.md b/with-auth0/README.md
@@ -15,7 +15,7 @@
 - Create your own app on [Auth0](https://auth0.com).
 - Add the `AuthSession` auth URL to `Allowed Callback URLs` on Auth0.
 - Open `App.js` and replace `auth0ClientId` and `auth0Domain` with your app settings.
-- Run [`expo start`](https://docs.expo.dev/versions/latest/workflow/expo-cli/), try it out.
+- Run `yarn start` or `npm run start` to try it out.
 
 #### AuthSession callback URL
 

diff --git a/with-auth0/package.json b/with-auth0/package.json
@@ -1,15 +1,15 @@
 {
   "dependencies": {
-    "expo": "^45.0.0",
-    "expo-auth-session": "~3.6.0",
-    "expo-random": "~12.2.0",
+    "expo": "^46.0.0",
+    "expo-auth-session": "~3.7.1",
+    "expo-random": "~12.3.0",
     "jwt-decode": "2.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/with-aws-storage-upload/README.md b/with-aws-storage-upload/README.md
@@ -18,4 +18,4 @@ Try it at https://exp.host/@ykbryan/aws-storage-upload
 ### Running the app
 
 - Run `yarn` or `npm install`
-- Run [`expo start`](https://docs.expo.dev/versions/latest/workflow/expo-cli/), try it out.
+- Run `yarn start` or `npm run start` to try it out.
diff --git a/with-aws-storage-upload/package.json b/with-aws-storage-upload/package.json
@@ -4,18 +4,18 @@
     "@aws-amplify/core": "^4.3.3",
     "@aws-amplify/storage": "^4.4.4",
     "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/netinfo": "8.2.0",
+    "@react-native-community/netinfo": "9.3.0",
     "aws-amplify": "^4.3.3",
-    "expo": "^45.0.0",
-    "expo-clipboard": "~3.0.1",
-    "expo-constants": "~13.1.1",
-    "expo-image-picker": "~13.1.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.0",
+    "expo-clipboard": "~3.1.0",
+    "expo-constants": "~13.2.3",
+    "expo-image-picker": "~13.3.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/with-camera/README.md b/with-camera/README.md
@@ -21,7 +21,7 @@ This example shows how to take a picture and display it.
 
 - Install packages with `yarn` or `npm install`.
   - If you have native iOS code run `npx pod-install`
-- Run `yarn start` to start the bundler.
+- Run `yarn start` or `npm run start` to start the bundler.
 - Open the project in a React runtime to try it:
   - iOS: [Client iOS](https://itunes.apple.com/app/apple-store/id982107779)
   - Android: [Client Android](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=blankexample)

diff --git a/with-camera/package.json b/with-camera/package.json
@@ -1,13 +1,13 @@
 {
   "dependencies": {
-    "expo": "^45.0.0",
-    "expo-camera": "~12.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.0",
+    "expo-camera": "~12.3.0",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/with-custom-font/package.json b/with-custom-font/package.json
@@ -1,14 +1,14 @@
 {
   "dependencies": {
-    "expo": "^45.0.0",
-    "expo-font": "~10.1.0",
-    "expo-splash-screen": "~0.15.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.0",
+    "expo-font": "~10.2.0",
+    "expo-splash-screen": "~0.16.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   }
 }
diff --git a/with-dev-client/README.md b/with-dev-client/README.md
@@ -13,7 +13,7 @@ Experiment with Development Client in SDK 40.
 
 > `npx create-react-native-app my-app -t with-dev-client`
 
-- Run `expo start --dev-client`, try it out.
+- Run `expo start --dev-client` to try it out.
 
 ## 🏗 Build with EAS
 

diff --git a/with-dev-client/package.json b/with-dev-client/package.json
@@ -6,18 +6,18 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "^45.0.0",
-    "expo-dev-client": "~0.9.5",
-    "expo-splash-screen": "~0.15.1",
-    "expo-status-bar": "~1.3.0",
-    "expo-updates": "~0.13.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "expo": "^46.0.0",
+    "expo-dev-client": "~1.1.1",
+    "expo-splash-screen": "~0.16.1",
+    "expo-status-bar": "~1.4.0",
+    "expo-updates": "~0.14.3",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.4",
+    "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.18.6"
   },
   "name": "with-dev-client",
   "version": "1.0.0"

diff --git a/with-drawer-navigation/README.md b/with-drawer-navigation/README.md
@@ -12,9 +12,10 @@
 ## 🚀 How to use
 
 - Install with `yarn` or `npm install`.
-- Run `expo start` to try it out.
+- Run `yarn start` or `npm run start` to try it out.
 
 ## 📝 Notes
 
 - This is a very basic example from the [react navigation](https://reactnavigation.org/) docs.
 - [Drawer navigation documentation](https://reactnavigation.org/docs/drawer-based-navigation).
+- [Reanimated Babel plugin may be required](https://github.com/software-mansion/react-native-reanimated/issues/3410)
diff --git a/with-drawer-navigation/babel.config.js b/with-drawer-navigation/babel.config.js
@@ -2,5 +2,6 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin']
   };
 };