Upgrade to SDK 46

.gitignore

@@ -27,4 +27,7 @@ with-nextjs/out
 */backend/.env
 
 .DS_Store
-report.html
+report.html
+
+# Maintenance logs
+.sdk-upgrade-logs

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 `npx expo 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
 

blank/app.json

@@ -0,0 +1,12 @@
+{
+  "expo": {
+    "name": "blank",
+    "slug": "blank",
+    "version": "1.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ]
+  }
+}

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"
   }
 }

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 `npx expo 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)

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"
   }
 }

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"

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 `npx expo start` to try it out.
 
 ## 📝 Notes
 

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"
   }
 }

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 [`npx expo start`](https://docs.expo.dev/versions/latest/workflow/expo-cli/), try it out.
 
 #### AuthSession callback URL
 

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"
   }
 }

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 [`npx expo start`](https://docs.expo.dev/versions/latest/workflow/expo-cli/), try it out.

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"
   }
 }

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 `npx expo 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)

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"
   }
 }

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"
   }
 }

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"

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 `npx expo 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)

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']
   };
 };