Error when upgrading to react-native-reanimated@next

[yepMad]

Description

I just did "yarn upgrade react-native-reanimated" and I'm facing the below error. How can I resolve this?

 ERROR  TypeError: Cannot read property 'View' of undefined, js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

My package.json:

"scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo-google-fonts/roboto": "^0.2.2",
    "@expo-google-fonts/rubik": "^0.2.2",
    "@expo/vector-icons": "^13.0.0",
    "@hookform/resolvers": "^2.8.8",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-firebase/analytics": "^16.4.6",
    "@react-native-firebase/app": "^16.4.6",
    "@react-native-firebase/crashlytics": "^16.4.6",
    "@react-native-firebase/messaging": "^16.4.6",
    "@react-native-firebase/perf": "^16.4.6",
    "@react-native-masked-view/masked-view": "0.2.8",
    "@react-native-picker/picker": "2.4.8",
    "@react-navigation/bottom-tabs": "^6.5.3",
    "@react-navigation/material-top-tabs": "^6.5.2",
    "@react-navigation/native": "^6.1.2",
    "@react-navigation/native-stack": "^6.9.8",
    "@react-navigation/stack": "^6.3.11",
    "@reduxjs/toolkit": "^1.9.0",
    "@shopify/flash-list": "1.3.1",
    "@tanstack/react-query": "^4.16.1",
    "axios": "^1.2.2",
    "date-fns": "^2.29.3",
    "expo": "^47.0.13",
    "expo-apple-authentication": "~5.0.1",
    "expo-application": "~5.0.1",
    "expo-file-system": "~15.1.1",
    "expo-font": "~11.0.1",
    "expo-linking": "~3.3.0",
    "expo-localization": "~14.0.0",
    "expo-navigation-bar": "~2.0.1",
    "expo-screen-orientation": "~5.0.1",
    "expo-secure-store": "~12.0.0",
    "expo-splash-screen": "~0.17.5",
    "expo-status-bar": "~1.4.2",
    "expo-web-browser": "~12.0.0",
    "i18n-js": "^4.2.0",
    "polished": "^4.2.2",
    "query-string": "^7.1.1",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-freeze": "^1.0.3",
    "react-hook-form": "^7.39.5",
    "react-native": "0.70.5",
    "react-native-blob-util": "^0.17.0",
    "react-native-circular-progress-indicator": "^4.4.0",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-image-crop-picker": "^0.38.1",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-magic-modal": "^0.2.19",
    "react-native-mask-text": "^0.13.1",
    "react-native-pager-view": "6.0.1",
    "react-native-pdf": "^6.6.2",
    "react-native-reanimated": "^3.0.0-rc.10",
    "react-native-responsive-fontsize": "^0.5.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-share": "^8.0.0",
    "react-native-shared-element": "0.8.4",
    "react-native-skeleton-placeholder": "^5.2.4",
    "react-native-styled-text": "^2.0.0",
    "react-native-svg": "13.4.0",
    "react-native-tab-view": "^3.3.4",
    "react-native-toast-notifications": "^3.3.1",
    "react-native-video": "6.0.0-alpha.3",
    "react-native-walkthrough-tooltip": "^1.4.0",
    "react-navigation-shared-element": "^3.1.3",
    "react-redux": "^8.0.5",
    "styled-components": "^5.3.6",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@types/i18n-js": "^3.8.3",
    "@types/react": "~18.0.24",
    "@types/react-native": "~0.70.6",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/react-native-video": "^5.0.14",
    "@types/styled-components-react-native": "^5.2.1",
    "@typescript-eslint/eslint-plugin": "^5.44.0",
    "@typescript-eslint/parser": "^5.44.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.28.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-no-inline-styles": "^1.0.5",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.8.0",
    "react-native-dotenv": "^3.4.2",
    "react-native-svg-transformer": "^1.0.0",
    "tsconfig-paths": "^4.1.0",
    "typescript": "^4.6.3"
  },

Steps to reproduce

1. Install @next version
2. Try to run the app on Android

Snack or a link to a repository

I can't provide now. I'm sorry.

Reanimated version

3.0.0-rc.10

React Native version

0.70.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

None

Device

Real device

Device model

Samsung A22

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tomekzaw]

Hey @yepMad, thanks for reporting the issue. Can you please run yarn start --reset-cache and see if it helps?

[yepMad]

Hey @yepMad, thanks for reporting the issue. Can you please run yarn start --reset-cache and see if it helps?

Thanks for the quick response! Unfortunately it didn't solve it. Do you have another opinion about it?

[tomekzaw]

It will be difficult without a repro, 3.0.0-rc.10 works fine for us.

[yepMad]

It will be difficult without a repro, 3.0.0-rc.10 works fine for us.

I'll try to get some things done on my end and send a repro as soon as possible. Thanks!

[yepMad]

@tomekzaw I switched from hermes to jsc and got a more readable error: TypeError: undefined is not an object (evaluating '_reactNativeReanimated.Transitioning.View').

I understand the source of the error. In a component I used import { Transitioning, Transition, TransitioningView } from 'react-native-reanimated'; at one point in my app - and of course <Transitioning.View>. Removing this line/implementation the error solved.

Keeping the issue open because I don't know if this is expected or not.

Does this help anything?

[tomekzaw]

Thanks, it makes more sense now. Transitioning, Transition and TransitioningView come from Reanimated 1 API. Reanimated 3 removes all Reanimated 1 API, see Announcing Reanimated 3 blog post. So this is unfortunately expected.

[yepMad]

@tomekzaw Thanks! I know this is not the purpose of the issue, but if you could enlighten me: how to replace Transitioning with the new API? I mean, I used Transitioning to expand/collapse a View when its content changed. I can't understand how I can do this in the current API without needing to know the size of the next View.

If it's not make sense, please let me try to explain again.

[tomekzaw]

@yepMad Not sure if I understand your use-case correctly but please check if Layout Transitions sound like a solution for you: https://docs.swmansion.com/react-native-reanimated/docs/api/LayoutAnimations/layoutTransitions Basically, it allows you to animate the component each the layout (i.e. position or size) of the component changes.

[yepMad]

I believe that's it! Thank you for that. I'll be closing the issue as it's not a problem.