React-native-tab-view: 'EasingNode' is not exported from 'react-native-reanimated'

[Pra3t0r5]

I'm getting this error:

Failed to compile
/home/praetors/Projects/node/proyectoSembrar/node_modules/react-native-tab-view/lib/module/TabBarIndicator.js
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.
This error occurred during the build time and cannot be dismissed.

{
    "name": "commons",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "@react-native-community/async-storage": "^1.11.0",
        "@react-native-community/masked-view": "^0.1.10",
        "@react-navigation/bottom-tabs": "^5.8.0",
        "@react-navigation/drawer": "^5.9.0",
        "@react-navigation/material-bottom-tabs": "^5.2.16",
        "@react-navigation/native": "^5.7.3",
        "@react-navigation/stack": "^5.9.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "react": "16.13.1",
        "react-art": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-native": "0.63.2",
        "react-native-appearance": "~0.3.3",
        "react-native-gesture-handler": "^1.7.0",
        "react-native-paper": "^4.0.1",
        "react-native-reanimated": "^1.13.0",
        "react-native-tab-view": "^2.13.1",
        "react-native-vector-icons": "^7.0.0",
        "react-native-web": "^0.13.7",
        "react-scripts": "3.4.3"
    },
    "resolutions": {
        "react-navigation-tabs/react-native-tab-view": "2.11.0"
    },
    "devDependencies": {
        "@babel/core": "^7.11.1",
        "@babel/runtime": "^7.11.2",
        "@react-native-community/eslint-config": "^2.0.0",
        "babel-plugin-react-native-web": "^0.13.7",
        "eslint": "^7.6.0",
        "jest": "^26.3.0",
        "metro-react-native-babel-preset": "^0.62.0",
        "react-app-rewired": "^2.1.6",
        "react-test-renderer": "16.13.1"
    }
}

[github-actions[bot]]

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

• ``

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-tab-view (found: 2.13.1, latest: 2.15.1)

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

[mo-patel]

Can confirm this still occurs in 2.15.1

[dcangulo]

@Pra3t0r5 @mo-patel

Have you found any workaround?

It works fine on a snack.expo example but I am encountering the said error when using vanilla react native project.

[dalcib]

It was introduced in fix: make lib compatible with reanimated2 #1023:

import Animated, {
  Easing as OldEasing,
  // @ts-ignore
  EasingNode,
} from 'react-native-reanimated';

const Easing = EasingNode || OldEasing;

react-native-animated v1 only exports easing and the v2 only exports easingNode.

Maybe this fix works in metro with typescript because of the // @ts-ignore, but in other environments, the transpiler will complain about the missing export in the javascript Commonjs module (node_modules\react-native-reanimated\lib\commonjs\Animated.js) .

[dehypnosis]

a workaround as after install

(() => {
  const filePath = require.resolve("react-native-reanimated/lib/module/Animated.js");
  const code = fs.readFileSync(filePath).toString();
  fs.writeFileSync(
    filePath,
    code.replace(`export { Easing,`, `export { Easing as EasingNode, Easing,`),
  );
})();

[DevAhmedRagab]

Any update ?!

[will123195]

A workaround:

expo install [email protected]

[KalumDog]

It still occurs in [email protected]

[Florianer]

Hey,
updated to

    "react-native-reanimated": "~1.13.1",
    "react-native-tab-view": "^2.15.2",
    "react-native-web": "^0.14.4",

still bringing after expo build:web --no-pwa the error message

 web  Compiled with warnings.

node_modules/react-native-tab-view/lib/module/TabBarIndicator.js
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.

node_modules/react-native-tab-view/lib/module/Pager.js
Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'.

[MohammadAzimi]

It was introduced in fix: make lib compatible with reanimated2 #1023:

import Animated, {
  Easing as OldEasing,
  // @ts-ignore
  EasingNode,
} from 'react-native-reanimated';

const Easing = EasingNode || OldEasing;

react-native-animated v1 only exports easing and the v2 only exports easingNode.

Maybe this fix works in metro with typescript because of the // @ts-ignore, but in other environments, the transpiler will complain about the missing export in the javascript Commonjs module (node_modules\react-native-reanimated\lib\commonjs\Animated.js) .

@dalcib
I've seen that you mentioned this issue in other issues too.
So any solution or workaround for it??

[dcangulo]

What worked for me (using CRA):

1. npx create-react-app testapp
2. cd testapp
3. yarn add react-native-reanimated react-native-gesture-handler react-native-tab-view react-native react-native-web
4. yarn add react-app-rewired --dev
5. In your src/index.js. Add import 'react-native-gesture-handler'; above import React from 'react';.
6. In your root directory create config-overrides.js file and put the following content:

const webpack = require('webpack');

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [
        ['module:metro-react-native-babel-preset'],
        [
          require.resolve('babel-preset-react-app/dependencies'),
          { helpers: true }
        ]
      ],
      plugins: [
        ['@babel/plugin-transform-flow-strip-types'],
        ['@babel/plugin-proposal-class-properties']
      ],
    }
  });

  config.plugins.push(new webpack.DefinePlugin({
    __DEV__: process.env,
  }));

  return config;
};

1. In your package.json.

Replace:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

With:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

1. In your src/App.js replace all code with the following:

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

const FirstRoute = () => (
  <View style={{ height: 500, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ height: 500, backgroundColor: '#673ab7' }} />
);

export default function App() {
  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={{
        width: Dimensions.get('window').width
      }}
    />
  );
}

1. yarn start
2. Go to http://localhost:3000/
3. Output:
   

[yuta-hidaka]

I had same issue on Expo on Next.js.

Something new update?

[yuta-hidaka]

Hi Guys.

I create patch file for remove EasingNode.
Create folder in root project directory name is patches and create file name is react-native-tab-view+2.15.2.patch and paste the code below.
Path like <PJ root>/patches/react-native-tab-view+2.15.2.patch

And install node_modules yarn -D add patch-package
Description is see this https://github.com/ds300/patch-package#readme

Then run yarn install or npm install.

That is work for me Expo with Next.js.
But I don know it is correct way.

I hope that post save you guys time.

diff --git a/node_modules/react-native-tab-view/lib/module/Pager.js b/node_modules/react-native-tab-view/lib/module/Pager.js
index 406e30a..b320220 100644
--- a/node_modules/react-native-tab-view/lib/module/Pager.js
+++ b/node_modules/react-native-tab-view/lib/module/Pager.js
@@ -7,12 +7,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

 import * as React from 'react';
-import { StyleSheet, TextInput, Keyboard, I18nManager, InteractionManager } from 'react-native';
+import { I18nManager, InteractionManager, Keyboard, StyleSheet, TextInput } from 'react-native';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
-import Animated, { Easing as OldEasing // @ts-ignore
-, EasingNode } from 'react-native-reanimated';
+import Animated, {
+  Easing as OldEasing // @ts-ignore
+} from 'react-native-reanimated';
 import memoize from './memoize';
-const Easing = EasingNode || OldEasing;
+const Easing = OldEasing;
 const {
   Clock,
   Value,
diff --git a/node_modules/react-native-tab-view/lib/module/TabBarIndicator.js b/node_modules/react-native-tab-view/lib/module/TabBarIndicator.js
index 60004ed..95e84a8 100644
--- a/node_modules/react-native-tab-view/lib/module/TabBarIndicator.js
+++ b/node_modules/react-native-tab-view/lib/module/TabBarIndicator.js
@@ -1,11 +1,12 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

 import * as React from 'react';
-import { StyleSheet, I18nManager } from 'react-native';
-import Animated, { Easing as OldEasing // @ts-ignore
-, EasingNode } from 'react-native-reanimated';
+import { I18nManager, StyleSheet } from 'react-native';
+import Animated, {
+  Easing as OldEasing // @ts-ignore
+} from 'react-native-reanimated';
 import memoize from './memoize';
-const Easing = EasingNode || OldEasing;
+const Easing = OldEasing;
 const {
   multiply,
   Extrapolate

[erzailham]

Any update ?

[jackphuongvu]

What worked for me (using CRA):

1. npx create-react-app testapp
2. cd testapp
3. yarn add react-native-reanimated react-native-gesture-handler react-native-tab-view react-native react-native-web
4. yarn add react-app-rewired --dev
5. In your src/index.js. Add import 'react-native-gesture-handler'; above import React from 'react';.
6. In your root directory create config-overrides.js file and put the following content:

const webpack = require('webpack');

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [
        ['module:metro-react-native-babel-preset'],
        [
          require.resolve('babel-preset-react-app/dependencies'),
          { helpers: true }
        ]
      ],
      plugins: [
        ['@babel/plugin-transform-flow-strip-types'],
        ['@babel/plugin-proposal-class-properties']
      ],
    }
  });

  config.plugins.push(new webpack.DefinePlugin({
    __DEV__: process.env,
  }));

  return config;
};

1. In your package.json.

Replace:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

With:

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",

1. In your src/App.js replace all code with the following:

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

const FirstRoute = () => (
  <View style={{ height: 500, backgroundColor: '#ff4081' }} />
);

const SecondRoute = () => (
  <View style={{ height: 500, backgroundColor: '#673ab7' }} />
);

export default function App() {
  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={{
        width: Dimensions.get('window').width
      }}
    />
  );
}

1. yarn start
2. Go to http://localhost:3000/
3. Output:

What versions for each of these dependencies over here?

[dcangulo]

What versions for each of these dependencies over here?

@jackphuongvu I'm not sure if the project is initialized with CRA 3 or 4. But here is the package.json:

{
  "name": "testapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native": "^0.63.3",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-reanimated": "^1.13.1",
    "react-native-tab-view": "^2.15.2",
    "react-native-web": "^0.14.5",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-app-rewired": "^2.1.6"
  }
}

[jackphuongvu]

@dcangulo Can you share this demo repo as well?
I'm getting trouble with @react-navigation/material-top-tabs on web.

[Neyelson]

Is this ever going to be fixed? I just started this super basic project and already got this bug. Big letdown.

[AskMarvinV]

a workaround as after install

(() => {
  const filePath = require.resolve("react-native-reanimated/lib/module/Animated.js");
  const code = fs.readFileSync(filePath).toString();
  fs.writeFileSync(
    filePath,
    code.replace(`export { Easing,`, `export { Easing as EasingNode, Easing,`),
  );
})();

@dehypnosis where is this expected to be added?