React-native-reanimated: TypeError: style is not an Object. (evaluating ''viewDescriptor' in style') / react-native-tab-view

[ifier]

Description

I have used react-native-tab-view with reanimated v1 previously and today I've updated reanimated to v2. After that (update) I got this error. When I downgraded reanimated from v2 to v1 - error gone.
Then I've updated reanimated again and tried to disconnect some screens/components and etc. Just trying to figure out where the error is and which module causing it. After disconnecting components where Tabs lives - everything become fine.
At my code sample, if I will return null;, error will gone.

Screenshots

Steps To Reproduce

I've created repo where you can reproduce
https://github.com/ifier/reanimated-tab-view-bug

Expected behavior

No errors

Actual behavior

Weird error :)

Snack or minimal code example

https://github.com/ifier/reanimated-tab-view-bug

What have you tried

Tried to search through issues and etc but got nothing. Tried to read documentation how to install reanimated v2 (I didn't install it like v1 and used it previously, just like dependency for your library) and react-native-tab-view
Tried to uninstall node_modules completely and install them again and pod install. Then npm start -- --reset-cache.

Package versions

{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start --port 8081",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "reinstall": "rm -rf node_modules/ && rm -rf ./ios/Pods/ && npm i && npx react-native link && cd ./ios && pod install && cd .. && npx jetify"
  },
  "dependencies": {
    "@expo/react-native-action-sheet": "^3.8.0",
    "@material-ui/core": "^4.10.2",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/push-notification-ios": "^1.4.1",
    "appcenter": "3.1.0",
    "appcenter-analytics": "3.1.0",
    "appcenter-crashes": "3.1.0",
    "axios": "^0.21.0",
    "card-validator": "^7.1.0",
    "country-data": "0.0.31",
    "i18n-js": "^3.8.0",
    "js-base64": "^3.6.0",
    "libphonenumber-js": "^1.8.5",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "react": "^17.0.1",
    "react-native": "^0.63.3",
    "react-native-camera": "^3.40.0",
    "react-native-config": "^1.4.0",
    "react-native-confirmation-code-field": "^6.5.1",
    "react-native-countdown-component": "^2.7.1",
    "react-native-fast-image": "^8.3.3",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-gesture-helper": "^1.2.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^1.4.3",
    "react-native-maps": "0.27.1",
    "react-native-modal": "^11.5.6",
    "react-native-navigation": "^7.2.0",
    "react-native-navigation-register-screens": "^1.3.0",
    "react-native-push-notification": "^5.0.1",
    "react-native-qrcode-svg": "^6.0.6",
    "react-native-reanimated": "^2.0.0-alpha.9",
    "react-native-svg": "^12.1.0",
    "react-native-tab-view": "^2.15.2",
    "react-native-text-input-mask": "^2.0.0",
    "react-native-vector-icons": "^7.1.0",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "remote-redux-devtools": "^0.5.16",
    "reselect": "^4.0.0",
    "tipsi-stripe": "8.0.0-beta.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/country-data": "0.0.2",
    "@types/i18n-js": "^3.0.3",
    "@types/jest": "^26.0.15",
    "@types/lodash": "^4.14.164",
    "@types/react-native": "^0.63.32",
    "@types/react-native-push-notification": "^5.0.5",
    "@types/react-native-text-input-mask": "^0.7.5",
    "@types/react-native-vector-icons": "^6.4.6",
    "@types/react-redux": "^7.1.11",
    "@types/react-test-renderer": "16.9.2",
    "@types/redux-logger": "^3.0.8",
    "@types/remote-redux-devtools": "^0.5.4",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "^4.0.0",
    "eslint": "^7.12.1",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.63.0",
    "prettier": "^2.1.2",
    "react-test-renderer": "17.0.1",
    "typescript": "^4.0.5"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

[Darkbladecr]

Having the exact same bug in my code as well, and I am using the createMaterialTopTabNavigator from react-navigation 5.

[ksitko]

This is a regression which occurs specifically specifically in 2.0.0-alpha.9. I was able to use a MaterialTopTabNavigator in 2.0.0-alpha.8 and can confirm that upgrading to alpha.9 causes error.

[Darkbladecr]

Thank you @ksitko I have downgraded to 2.0.0-alpha.8 and I can confirm that it also works.

[ifier]

Tried to downgrade to alpha.8 yesterday but got the same error :(
I'm not using createMaterialTopTabNavigator, just react-native-tab-view. Will try today again.

After upgrading react-native-reanimated to alpha I'm doing npm start -- --reset-cache.

[ifier]

@jakub-gonet
Thank you!

[ifier]

@jakub-gonet
I've reinstalled node_modules and pods and still getting this error (at my code example repo). What I need to do to get this fix?

[jakub-gonet]

After applying the #1446 patch? It should work OOTB, maybe you have to run metro with --reset-cache flag (yarn start --reset-cache)

[ifier]

@jakub-gonet
I've started. npm start -- --reset-cache, but still this error happens :(
My reinstall script:

"reinstall": "rm -rf node_modules/ && rm -rf ./ios/Pods/ && npm i && cd ./ios && pod install && cd .."

Still the same code, without yours fix :(

[ifier]

@jakub-gonet
This repo has actions and I can see that last build npm package was 6 hours ago... (#71)
And your fix was merged 1 hour ago. Is it possible that your fix is not available yet?

[ifier]

I can specify at package.json and then I will get your changes:

...
"react-native-reanimated": "git+https://github.com/software-mansion/react-native-reanimated.git",
...

I hope it will be available at npm packages soon as well :)

[jakub-gonet]

And your fix was merged 1 hour ago. Is it possible that your fix is not available yet?
Yeah, it's built every 24 hours.

We will try to publish alpha9.1 shortly, I already forwarded this issue to the Reanimated 2 team. Stay tuned 😄

[karol-bisztyga]

alpha.9.1 with that fix is out.