TypeError: null is not an object (evaluating '_NativeAppearance.NativeAppearance.initialPreferences') after upgrading to ExpoSDK 46

Hello,

i have upgraded my project to ExpoSDK 46. On the web everything works well, but when trying to run the project on iOS or Android using the ExpoGo App, i’m getting the following error:

Error:

TypeError: null is not an object (evaluating '_NativeAppearance.NativeAppearance.initialPreferences')
at node_modules\expo\build\environment\react-native-logs.fx.js:null in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError
at node_modules\metro-runtime\src\polyfills\require.js:null in guardedLoadModule

Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules\expo\build\environment\react-native-logs.fx.js:null in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:null in handleError
at node_modules\expo\build\errors\ExpoErrorManager.js:null in errorHandler
at node_modules\expo\build\errors\ExpoErrorManager.js:null in <anonymous>
at node_modules\@react-native\polyfills\error-guard.js:null in ErrorUtils.reportFatalError
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:null in callFunctionReturnFlushedQueue

I am using the following package.json:

{
  "name": "example",
  "version": "1.0.0",
  "private": true,
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@firebase/auth-types": "^0.11.0",
    "@firebase/firestore-types": "^2.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-brands-svg-icons": "^5.15",
    "@fortawesome/pro-duotone-svg-icons": "^5.15",
    "@fortawesome/pro-solid-svg-icons": "^5.15",
    "@fortawesome/react-fontawesome": "^0.1.19",
    "@fortawesome/react-native-fontawesome": "^0.2.3",
    "@hookform/resolvers": "^2.9.7",
    "@material-ui/core": "^4.12.4",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@types/dinero.js": "^1.9.0",
    "@types/json-buffer": "^3.0.0",
    "@types/react-router-native": "^5.1.3",
    "@unimodules/react-native-adapter": "^6.3.9",
    "api": "^4.5.2",
    "browserslist": "^4.21.3",
    "d3-shape": "^2.0.0",
    "deepmerge": "^4.2.2",
    "dinero.js": "^1.9.1",
    "expo": "46.0.8",
    "expo-app-loading": "~2.1.0",
    "expo-apple-authentication": "~4.3.0",
    "expo-asset": "~8.6.1",
    "expo-auth-session": "~3.7.1",
    "expo-blur": "~11.2.0",
    "expo-cli": "^6.0.5",
    "expo-constants": "~13.2.3",
    "expo-device": "~4.3.0",
    "expo-file-system": "~14.1.0",
    "expo-font": "~10.2.0",
    "expo-image-picker": "~13.3.1",
    "expo-linear-gradient": "~11.4.0",
    "expo-linking": "~3.2.2",
    "expo-localization": "~13.1.0",
    "expo-navigation-bar": "~1.3.0",
    "expo-notifications": "~0.16.1",
    "expo-random": "~12.3.0",
    "expo-sharing": "~10.3.0",
    "expo-splash-screen": "~0.16.1",
    "expo-status-bar": "~1.4.0",
    "expo-system-ui": "~1.3.0",
    "expo-updates": "~0.14.4",
    "expo-web-browser": "~11.0.0",
    "firebase": "^8.10.1",
    "global": "^4.4.0",
    "history": "^5.3.0",
    "html-entities": "^1.4.0",
    "i18next": "^21.9.1",
    "jimp": "^0.16.1",
    "js-sha256": "^0.9.0",
    "lodash": "^4.17.15",
    "md5": "^2.2.1",
    "moment": "^2.29.4",
    "native-base": "3.4.13",
    "numbro": "^2.3.1",
    "prop-types": "^15.7.2",
    "react": "18.0.0",
    "react-country-flag": "^2.3.0",
    "react-dom": "18.0.0",
    "react-helmet": "^6.0.0",
    "react-hook-form": "^7.34.2",
    "react-i18next": "^11.18.4",
    "react-native": "0.69.4",
    "react-native-appearance": "~0.3.4",
    "react-native-dialog": "^6.2.0",
    "react-native-dialog-input": "^1.0.8",
    "react-native-draggable-flatlist": "^3.1.2",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-get-random-values": "~1.8.0",
    "react-native-paper": "^4.12.4",
    "react-native-prompt-crossplatform": "^1.6.1",
    "react-native-reanimated": "~2.9.1",
    "react-native-render-html": "^6.3.4",
    "react-native-responsive-screen": "^1.4.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-super-grid": "^4.4.3",
    "react-native-svg": "12.3.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-toast-message": "^2.0.2",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.17.7",
    "react-redux": "^7.2.5",
    "react-redux-firebase": "^3.10.0",
    "react-router": "^5.3.3",
    "react-router-dom": "^5.3.3",
    "react-router-native": "^6.3.0",
    "redux": "^4.2.0",
    "redux-cookies-middleware": "^0.2.1",
    "redux-firestore": "^1.0.0",
    "redux-thunk": "^2.3.0",
    "semver": "^7.3.7",
    "sentry-expo": "~5.0.0",
    "url-parse": "^1.5.3",
    "use-deep-compare-effect": "^1.3.1",
    "uuid": "^8.3.2",
    "xmldom": "^0.6.0",
    "yallist": "^4.0.0",
    "yup": "^0.32.9"
  },
  "resolutions": {
    "react-error-overlay": "6.0.11",
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@expo/webpack-config": "^0.17.2",
    "@testing-library/jest-native": "^4.0.11",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/react-native": "^11.0.0",
    "@types/d3-shape": "^3.1.0",
    "@types/jest": "^28.1.7",
    "@types/lodash": "^4.14.184",
    "@types/md5": "^2.1.33",
    "@types/numbro": "^1.9.3",
    "@types/react": "~18.0.0",
    "@types/react-dom": "~18.0.0",
    "@types/react-helmet": "^6.1.5",
    "@types/react-native": "~0.69.1",
    "@types/react-native-svg-charts": "^5.0.3",
    "@types/react-redux": "^7.1.24",
    "@types/react-router-dom": "^5.1.3",
    "@types/semver": "^7.3.12",
    "@types/url-parse": "^1.4.3",
    "@types/uuid": "^8.3.4",
    "@types/yup": "^0.32.0",
    "@typescript-eslint/eslint-plugin": "^5.33.1",
    "@typescript-eslint/parser": "^5.33.1",
    "@welldone-software/why-did-you-render": "^4.0.5",
    "babel-plugin-inline-react-svg": "^2.0.1",
    "eas-cli": "^0.60.0",
    "eslint": "^8.22.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "expo-optimize": "^0.2.19",
    "firebase-tools": "^10.9.2",
    "husky": "~4.0.0",
    "i18next-parser": "^6.5.0",
    "jest": "^26.6.3",
    "jest-expo": "^46.0.0",
    "lint-staged": "^10.0.8",
    "node-sass": "^7.0.1",
    "prettier": "^2.7.1",
    "react-test-renderer": "~16.13.1",
    "redux-devtools-extension": "^2.13.8",
    "sharp-cli": "^2.1.0",
    "ts-jest": "^28.0.08",
    "typescript": "^4.6.3"
  }
}

Does somebody has an idea what might be the problem here or how to fix this?

Thank you!

Hi @erik.bergmeyer

That error is the sort of error you get when your JavaScript code tries to call some native code that does not exist in the app. This can happen if you install a dependency that needs native code that is not included in the Expo SDK and then try to run the app in Expo Go (which only includes the native code needed by the Expo SDK).

In this case the problem dependency is react-native-appearance. Poking around in the Git history I found this:

commit ecdd0347b2e85283e6af89ceca26b653f47e576a
Author: Brent Vatne <brentvatne@gmail.com>
Date:   Thu Jul 7 18:46:02 2022 -0700

    [docs] Delete SDK 42 docs

diff --git docs/pages/versions/v42.0.0/sdk/appearance.md docs/pages/versions/v42.0.0/sdk/appearance.md
deleted file mode 100644
index 3fa323a899..0000000000
--- docs/pages/versions/v42.0.0/sdk/appearance.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: Appearance
-sourceCodeUrl: 'https://github.com/expo/react-native-appearance'
----
[...]

Then I found this in the Expo SDK 43 release announcement:

react-native-appearance has been fully removed.
This package was deprecated in SDK 41, replaced by useColorScheme from React Native core.

1 Like

Hey @wodin,

that really was the problem. Thanks a lot for your help!

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.