upgrade-support Typeerror: cannot read property 'style' of undefined, js engine: hermes

Environment

System: OS: macOS 15.3 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 52.68 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 21.7.3 path: /usr/local/bin/node Yarn: Not Found npm: version: 10.5.0 path: /usr/local/bin/npm Watchman: version: 2023.03.13.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /Users/gopi/.rvm/gems/ruby-2.7.6/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 24.2 - iOS 18.2 - macOS 15.2 - tvOS 18.2 - visionOS 2.2 - watchOS 11.2 Android SDK: API Levels: - "23" - "24" - "25" - "26" - "27" - "28" - "29" - "30" - "31" - "32" - "33" - "34" Build Tools: - 29.0.2 - 30.0.3 - 33.0.1 - 34.0.0 System Images: - android-29 | Google APIs Intel x86 Atom - android-29 | Google Play Intel x86 Atom - android-30 | Google APIs Intel x86 Atom - android-32 | Google APIs Intel x86 Atom_64 - android-32 | Google Play Intel x86 Atom_64 - android-33 | Google APIs Intel x86 Atom_64 - android-33 | Google Play Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: Not Found Xcode: version: 16.2/16C5032a path: /usr/bin/xcodebuild Languages: Java: version: 18.0.2.1 path: /Library/Java/JavaVirtualMachines/jdk-18.0.2.1.jdk/Contents/Home/bin/javac Ruby: version: 2.7.6 path: /Users/gopi/.rvm/rubies/ruby-2.7.6/bin/ruby npmPackages: "@react-native-community/cli": installed: 15.0.1 wanted: 15.0.1 react: installed: 19.0.0 wanted: 19.0.0 react-native: installed: 0.78.0 wanted: 0.78.0 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: false

Things I’ve done to figure out my issue

I'm upgrading my app from 0.73.11 to 0.78.0. The app is successfully built in iOS and getting the below error.

[Runtime not ready]: Typeerror: cannot read property 'style' of undefined, js engine: hermes

Upgrading version

0.78.0

Description

I'm upgrading my app from 0.73.11 to 0.78.0. The app is successfully built in iOS and getting the below error.

[Runtime not ready]: Typeerror: cannot read property 'style' of undefined, js engine: hermes

Reproducible demo

I'm upgrading my app from 0.73.11 to 0.78.0. The app is successfully built in iOS and getting the below error.

[Runtime not ready]: Typeerror: cannot read property 'style' of undefined, js engine: hermes

Mar 06 '25 14:03 gkasireddy202

I'm having the exact same issue

Mar 11 '25 00:03 GoldAndLink

This issue is happening in react-native-material-dropdown.

Mar 11 '25 01:03 gkasireddy202

infact im tired. i have been facing this issue since 3 days now. and i do not even know where the isse is coming from.

see a my dependencies here

{ "name": "afroshipper_mobiles", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@d11/react-native-fast-image": "^8.9.2", "@react-native-async-storage/async-storage": "^2.1.2", "@react-native-community/checkbox": "^0.5.17", "@react-native-community/clipboard": "^1.5.1", "@react-native-community/datetimepicker": "^8.3.0", "@react-native-community/netinfo": "^11.4.1", "@react-native-google-signin/google-signin": "^13.2.0", "@react-native-picker/picker": "^2.11.0", "@react-navigation/bottom-tabs": "^7.2.1", "@react-navigation/drawer": "^7.1.2", "@react-navigation/native": "^7.0.15", "@react-navigation/native-stack": "^7.2.1", "@reduxjs/toolkit": "^2.6.1", "axios": "^1.8.2", "cloudinary": "^2.6.0", "moment": "^2.30.1", "nativewind": "^4.1.23", "react": "19.0.0", "react-native": "0.78.0", "react-native-biometrics": "^3.0.1", "react-native-bottomsheet-reanimated": "^0.3.1", "react-native-camera": "^4.2.1", "react-native-check-box": "^2.1.7", "react-native-collapsible": "^1.6.2", "react-native-config": "^1.5.5", "react-native-country-picker-modal": "^2.0.0", "react-native-date-picker": "^5.0.10", "react-native-datepicker": "^1.7.2", "react-native-document-picker": "^9.3.1", "react-native-dropdown-country-picker": "^1.0.11", "react-native-elements": "^3.4.3", "react-native-fast-image": "^8.6.3", "react-native-geocoding": "^0.5.0", "react-native-gesture-handler": "^2.24.0", "react-native-google-places-autocomplete": "^2.5.7", "react-native-image-crop-picker": "^0.42.0", "react-native-image-picker": "^8.2.0", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-keychain": "^9.2.3", "react-native-loading-spinner-overlay": "^3.0.1", "react-native-maps": "^1.20.1", "react-native-mask-text": "^0.14.2", "react-native-modal": "^14.0.0-rc.0", "react-native-otp-textinput": "^1.1.6", "react-native-pager-view": "^6.7.0", "react-native-paper": "^5.13.1", "react-native-picker-select": "^9.3.1", "react-native-reanimated": "^3.17.1", "react-native-root-siblings": "^5.0.1", "react-native-root-toast": "^3.6.0", "react-native-safe-area-context": "^5.3.0", "react-native-screens": "^4.9.1", "react-native-searchable-dropdown": "^1.1.3", "react-native-smooth-pincode-input": "^1.0.9", "react-native-swiper": "^1.6.0", "react-native-tab-view": "^4.0.5", "react-native-vector-icons": "^10.2.0", "react-native-version-check": "^3.4.7", "react-native-vision-camera": "^4.6.4", "react-native-webview": "^13.13.4", "react-redux": "^9.2.0", "reanimated-bottom-sheet": "^1.0.0-alpha.22", "redux-persist": "^6.0.0", "swr": "^2.3.3" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "15.0.1", "@react-native-community/cli-platform-android": "15.0.1", "@react-native-community/cli-platform-ios": "15.0.1", "@react-native/babel-preset": "0.78.0", "@react-native/eslint-config": "0.78.0", "@react-native/metro-config": "0.78.0", "@react-native/typescript-config": "0.78.0", "@types/jest": "^29.5.13", "@types/react": "^19.0.0", "@types/react-test-renderer": "^19.0.0", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-native-dotenv": "^3.4.11", "react-native-svg-transformer": "^1.5.0", "react-test-renderer": "19.0.0", "tailwindcss": "^3.4.17", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }

Mar 12 '25 07:03 francis1999

I upgraded my project from React Native 0.63 to 0.78.1 and am now stuck on the same issue. If anyone has found a solution, please help!

Mar 28 '25 10:03 vivek-sharma-sws

@vivek-sharma-sws - I faced this issue due to react-native-material-dropdown

Mar 28 '25 10:03 gkasireddy202

@gkasireddy202 Yes, I've viewed your comment and removed the react-native-material-dropdown library, reinstalled node modules, and cleaned the cache before reinstalling the pods, but I'm still facing the same issue. Should I share my package.json file for clarification?

Mar 28 '25 11:03 vivek-sharma-sws

@vivek-sharma-sws - You have to debug the issue.

Please import the one-by package in the first screen of your app, and please comment the remaining screens navigation.

Mar 28 '25 11:03 gkasireddy202

any solution?

Apr 01 '25 11:04 zinalundhad

A few days ago, I upgraded my React Native version from 0.73 to 0.78.1 and encountered the same issue.

In my case, I discovered that some libraries were using ComponentName.propTypes.style. Since propTypes is no longer available, the code was attempting to access the style property from propTypes, which caused the app to crash.

I found that two third-party packages in my project were using this approach:

"react-native-snap-carousel": "^3.9.1"
"react-native-highlight-words": "^1.0.1"

These packages may differ in your case.

Apr 02 '25 05:04 VickyA371

I'm not using react-native-snap-carousel; I'm using react-native-material-dropdown-v2.

Apr 02 '25 05:04 zinalundhad

in your VS code, search for .propTypes.style for whole project directory

Apr 02 '25 05:04 VickyA371

Using the command yarn add [email protected] and clearing the cache after solved the issue for me

May 05 '25 15:05 pvaras8

for me it was the problem with yarn. when i delete node_modules and package-lock.json and running npm install --legacy-peer-deps it's working again

May 22 '25 15:05 tunnaduong

I tried using all these and still I am facing the same error. Here is my dependency list:

{ "name": "gameplay", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@cometchat-pro/react-native-chat": "^3.0.13", "@expo/vector-icons": "^14.1.0", "@react-native-async-storage/async-storage": "2.1.2", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "@react-navigation/native-stack": "^7.3.14", "@react-navigation/stack": "^7.3.3", "base-64": "^1.0.0", "expo": "~53.0.11", "expo-app-loading": "^2.1.1", "expo-blur": "~14.1.5", "expo-constants": "~17.1.6", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.2.1", "expo-linking": "~7.1.5", "expo-router": "~5.0.7", "expo-secure-store": "^14.2.3", "expo-splash-screen": "~0.30.9", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.5", "expo-system-ui": "~5.0.8", "expo-web-browser": "~14.1.6", "galio-framework": "^0.8.0", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.3", "react-native-actionsheet": "^2.4.2", "react-native-gesture-handler": "~2.24.0", "react-native-paper": "^5.14.5", "react-native-popup-menu": "^0.18.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-snap-carousel": "^3.9.1", "react-native-vector-icons": "^10.2.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "react-redux": "^9.2.0", "xmldom": "^0.6.0" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/react": "~19.0.10", "ajv": "^8.17.1", "eslint": "^9.25.0", "eslint-config-expo": "~9.2.0", "typescript": "~5.8.3" }, "private": true }

Jun 11 '25 20:06 khushal212001

i also getting the same issue. Tried everything but still facing same error. Help me out with this problem

{ "name": "test", "version": "1.0.0", "main": "index.ts", "private": true, "scripts": { "start": "expo start", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web", "lint": "eslint .", "test": "jest" }, "expo": { "doctor": { "reactNativeDirectoryCheck": { "exclude": [ "@react-native-community/checkbox", "react-native-fast-image", "@georstat/react-native-image-cache", "@th3rdwave/react-navigation-bottom-sheet", "react-native-bouncy-checkbox", "react-native-country-codes-picker", "react-native-element-dropdown", "react-native-keyboard-aware-scroll-view", "react-native-restart", "react-native-version-check", "react-native-eva-icons", "react-native-exit-app", "react-native-skeleton-placeholder", "react-native-smooth-pincode-input", "react-native-swipe-list-view", "redux-persist" ], "listUnknownPackages": false } } }, "dependencies": { "@freakycoder/react-native-bounceable": "^1.0.3", "@georstat/react-native-image-cache": "^3.1.0", "@notifee/react-native": "^9.1.8", "@react-native-async-storage/async-storage": "2.1.2", "@react-native-community/checkbox": "0.5.17", "@react-native-community/geolocation": "3.1.0", "@react-native-firebase/analytics": "^20.4.0", "@react-native-firebase/app": "^20.4.0", "@react-native-firebase/messaging": "^20.4.0", "@react-native-masked-view/masked-view": "0.3.2", "@react-navigation/bottom-tabs": "6.5.9", "@react-navigation/drawer": "6.6.4", "@react-navigation/native": "6.1.9", "@react-navigation/native-stack": "6.9.14", "@reduxjs/toolkit": "1.9.7", "@shopify/restyle": "2.4.2", "@th3rdwave/react-navigation-bottom-sheet": "0.2.7", "@uidotdev/usehooks": "^2.4.1", "axios": "1.5.1", "destr": "^2.0.3", "expo": "53.0.13", "expo-build-properties": "~0.14.6", "expo-checkbox": "~4.1.4", "expo-image": "~2.3.0", "expo-status-bar": "~2.2.3", "formik": "2.4.6", "i18next": "23.6.0", "install": "^0.13.0", "npx": "^10.2.2", "react": "19.0.0", "react-i18next": "13.3.1", "react-native": "0.79.4", "react-native-appsflyer": "^6.14.3", "react-native-bouncy-checkbox": "3.0.4", "react-native-country-codes-picker": "2.3.5", "react-native-element-dropdown": "2.10.0", "react-native-eva-icons": "1.3.1", "react-native-exit-app": "^2.0.0", "react-native-fast-image": "8.6.3", "react-native-fbsdk-next": "^13.1.3", "react-native-file-access": "^3.1.1", "react-native-gesture-handler": "2.24.0", "react-native-gifted-charts": "1.3.12", "react-native-gifted-chat": "2.4.0", "react-native-haptic-feedback": "^2.3.1", "react-native-image-picker": "7.0.2", "react-native-keyboard-aware-scroll-view": "0.9.5", "react-native-linear-gradient": "2.8.3", "react-native-maps": "1.20.1", "react-native-modal": "13.0.1", "react-native-paper": "^5.13.1", "react-native-permissions": "3.10.1", "react-native-radio-buttons-group": "^3.1.0", "react-native-ratings": "8.1.0", "react-native-raw-bottom-sheet": "3.0.0", "react-native-reanimated": "3.17.4", "react-native-reanimated-carousel": "^3.5.1", "react-native-restart": "0.0.27", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-skeleton-placeholder": "5.2.4", "react-native-smooth-pincode-input": "1.0.9", "react-native-svg": "15.11.2", "react-native-swipe-list-view": "3.2.9", "react-native-toast-message": "2.1.6", "react-native-tracking-transparency": "^0.1.2", "react-native-url-polyfill": "2.0.0", "react-native-version-check": "^3.4.7", "react-native-webview": "13.13.5", "react-query": "^3.39.3", "react-redux": "8.1.3", "reconnecting-websocket": "^4.4.0", "redux-persist": "6.0.0", "valtio": "^2.0.0", "yup": "1.3.2" }, "devDependencies": { "@babel/core": "^7.25.2", "@react-native/eslint-config": "0.79.4", "@svgr/core": "^6.5.1", "@svgr/plugin-svgo": "^8.1.0", "@types/react": "~19.0.10", "@types/react-test-renderer": "^18.0.0", "babel-jest": "29.2.1", "babel-plugin-module-resolver": "5.0.0", "eslint": "8.19.0", "jest": "~29.7.0", "metro-react-native-babel-transformer": "^0.77.0", "prettier": "2.4.1", "react-native-svg-transformer": "^1.5.1", "react-test-renderer": "18.2.0", "typescript": "~5.8.3" } }

Jun 30 '25 08:06 sadabjr

I am also getting the same error, it was all working fine in RN 0.71 and now upgraded to 0.80 and my app is not even loading.

Does anyone know what might be causing it ??

"dependencies": { "@miblanchard/react-native-slider": "^2.6.0", "@notifee/react-native": "^9.1.8", "@react-native-async-storage/async-storage": "^2.2.0", "@react-native-community/netinfo": "^11.4.1", "@react-native-community/slider": "^4.5.7", "@react-native-masked-view/masked-view": "^0.3.2", "@react-native-picker/picker": "^2.11.1", "@react-native/new-app-screen": "0.80.1", "@react-navigation/bottom-tabs": "^7.4.2", "@react-navigation/drawer": "^7.5.2", "@react-navigation/material-top-tabs": "^7.3.2", "@react-navigation/native": "^7.1.14", "@react-navigation/native-stack": "^7.3.21", "@react-navigation/stack": "^7.4.2", "@sayem314/react-native-keep-awake": "^1.3.1", "base64-js": "^1.5.1", "buffer": "^6.0.3", "deprecated-react-native-prop-types": "^5.0.0", "flatlist-extra": "^1.0.7", "lodash": "^4.17.21", "react": "19.1.0", "react-native": "0.80.1", "react-native-action-button": "^2.8.5", "react-native-big-slider": "^0.1.1", "react-native-cache": "^2.0.3", "react-native-circular-action-menu": "^0.5.0", "react-native-color-palette": "^2.2.0", "react-native-color-picker": "^0.6.0", "react-native-curved-bottom-bar": "^3.5.1", "react-native-device-info": "^14.0.4", "react-native-draggable": "^3.3.0", "react-native-dropdown-picker": "^5.4.6", "react-native-dropdownalert": "^5.1.0", "react-native-easy-bottomsheet": "^1.0.11", "react-native-element-dropdown": "^2.12.4", "react-native-fast-image": "^8.6.3", "react-native-file-logger": "^0.6.0", "react-native-fs": "^2.20.0", "react-native-gesture-bottom-sheet": "^1.1.0", "react-native-gesture-handler": "^2.27.1", "react-native-haptic-feedback": "^2.3.3", "react-native-internet-connection-alert": "^0.1.9", "react-native-linear-gradient": "^2.8.3", "react-native-motion-slider": "^1.0.3", "react-native-network-info": "^5.2.1", "react-native-network-speed-next": "^0.1.1", "react-native-onboard": "^2.6.0", "react-native-pager-view": "^6.8.1", "react-native-paper": "^5.14.5", "react-native-permissions": "^5.4.1", "react-native-prompt-android": "^1.1.0", "react-native-qrcode-scanner": "^1.5.5", "react-native-radial-slider": "^1.1.0", "react-native-reanimated": "^3.18.0", "react-native-restart": "^0.0.27", "react-native-safe-area-context": "^5.5.1", "react-native-screens": "^4.11.1", "react-native-sensors": "^7.3.6", "react-native-settings-list": "^1.8.0", "react-native-shake": "^6.7.8", "react-native-side-drawer": "^2.1.0", "react-native-slider": "^0.11.0", "react-native-slider-color-picker": "^2.2.6", "react-native-sound-level": "^1.3.0", "react-native-sqlite-storage": "^6.0.1", "react-native-startup-time": "^2.1.0", "react-native-svg": "^15.12.0", "react-native-tab-view": "^4.1.2", "react-native-udp": "^4.1.7", "react-native-underline-tabbar": "^1.3.6", "react-native-uuid": "^2.0.3", "react-native-vector-icons": "^10.2.0", "react-native-webview": "^13.15.0", "react-native-wheel-color-picker": "^1.3.1", "react-navigation": "^5.0.0", "rn-fetch-blob": "^0.12.0", "rn-vertical-slider": "^4.4.0", "tinycolor2": "^1.6.0", "valtio": "^2.1.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "19.0.0", "@react-native-community/cli-platform-android": "19.0.0", "@react-native-community/cli-platform-ios": "19.0.0", "@react-native/babel-preset": "0.80.1", "@react-native/eslint-config": "0.80.1", "@react-native/metro-config": "0.80.1", "@react-native/typescript-config": "0.80.1", "@types/jest": "^29.5.13", "@types/react": "^19.1.0", "@types/react-test-renderer": "^19.1.0", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "19.1.0", "typescript": "5.0.4" },

Jul 03 '25 18:07 suhashollakc

Hi i am having same issue here we are using 0.77 version of react native on app launch receiving [runtime not ready]: TypeError: Cannot read property 'style' of undefined we are not using react native snap carousal in the project tried uninstalling libraries like react-native-router-flux and react-native-snackbar and reinstalled tried removing node modules, pods, pods.lock, build files and reinstalled too could able to identity where exactly the issue. please help

Jul 04 '25 08:07 kranthi1216

I'm also upgrading to lastest v0.80.1 and seeing same issue. Also, I dont see the full error stack trace. Is there any way to see more detailed logs?

Jul 12 '25 08:07 Abhishek2250

After spending 2 days, I finally fixed my issue - so this issue is definitely because of ViewPropTypes/propTypes usage. Try searching globally for ViewPropTypes and propTypes(for this error it's propTypes.style) in your project. This should check in all project files including node_modules. I had some node_modules which were using ViewPropTypes or propTypes. I had to upgrade/remove/fork them to remove this usage. Libraries which using ViewPropTypes/propTypes for me were:

react-native-thumbnail-video
react-native-youtube
react-native-settings-list
react-native-phone-input
react-native-snap-carousel

Jul 14 '25 06:07 Abhishek2250

There is a patch for this issue

Step 1) Run this command in your project: grep -r "ViewPropTypes" Step 2)carefully check all the packages, and wherever you see ViewPropTypes imported from react-native, remove it Step 3) use this import { ViewPropTypes } from 'deprecated-react-native-prop-types' to import the ViewPropTypes

And then just reload the app

Caution: This is a patch, so you'll need to do it every time you run yarn install or npm install