TypeError: style is not an Object. (evaluating ''viewDescriptor' in style') / react-native-reanimated v2 (alpha)

ifier commented 3 years ago

Current behaviour

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.

Expected behaviour

Without errors.

Code sample

import * as React from 'react';
import { View, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => <View />;

const SecondRoute = () => <View />;

const initialLayout = { width: Dimensions.get('window').width };

export function Tabs() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' }
  ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute
  });

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

Screenshots (if applicable)

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.

Your Environment

software	version
ios or android	ios 13.6
expo	no
react-native	0.63.3
react-native-tab-view	2.15.2
react-native-gesture-handler	1.8.0
react-native-reanimated	2.0.0-alpha.9
node	14.4.0
npm or yarn	6.14.8

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '~components': './src/components',
          '~navigation': './src/navigation',
          '~services': './src/services',
          '~store': './src/store',
          '~screens': './src/screens',
          '~config': './src/config'
        }
      }
    ],
    'react-native-reanimated/plugin'
  ]
};

package.json

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

github-actions[bot] commented 3 years ago

Couldn't find version numbers for the following packages in the issue:

expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

react-native-reanimated (found: 2.0.0-alpha.9, latest: 1.13.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

satya164 commented 3 years ago

Can you open a bug report in Reanimated repo? This sounds like a bug in their code.

ifier commented 3 years ago

Can you open a bug report in Reanimated repo? This sounds like a bug in their code.

Okay. Will create there as well. I have added repo where you can reproduce this issue - https://github.com/ifier/reanimated-tab-view-bug Still, if I will return null, not <TabView> - everything is fine.

ifier commented 3 years ago

@satya164 https://github.com/software-mansion/react-native-reanimated/issues/1443