Undefined is not a function (near '...interpolate...')

[Isaccobosio]

Bug

BUG: Even if I copied and pasted the example I facing Undefined is not a function (near '...interpolate...')

Screenshot

Environment info

Library	Version
@gorhom/animated-tabbar	^2.1.2
react-native	0.66.4
react-native-reanimated	^2.3.1
react-native-gesture-handler	^2.1.0
react-native-svg	^12.1.1

Steps To Reproduce

HomeSVG.js

import * as React from 'react';
import Animated from 'react-native-reanimated';
import Svg, { Path } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(
  Path
);

Animated.addWhitelistedNativeProps({
  stroke: true,
});

const HomeSVG = ({ color, size }) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 24 24">
      <AnimatedPath
        d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
        stroke={color}
        strokeWidth={2}
        fill="none"
        fillRule="evenodd"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
};

export default HomeSVG;

MyTabBar.js

const tabs = {
    Home: {
      labelStyle: {
        color: '#5B37B7',
      },
      icon: {
        component: HomeSVG,
        activeColor: 'rgba(91,55,183,1)',
        inactiveColor: 'rgba(0,0,0,1)',
      },
      background: {
        activeColor: 'rgba(223,215,243,1)',
        inactiveColor: 'rgba(223,215,243,0)',
      },
    },
    Likes: {
      labelStyle: {
        color: '#C9379D',
      },
      icon: {
        component: HomeSVG,
        activeColor: 'rgba(201,55,157,1)',
        inactiveColor: 'rgba(0,0,0,1)',
      },
      background: {
        activeColor: 'rgba(247,215,243,1)',
        inactiveColor: 'rgba(247,215,243,0)',
      },
    },
  };

  return (
    <View style={
      tabBarIsVisible
        ? Platform.select({
          'ios': styles.containerTabiOS,
          'android': styles.containerTabAndroid
        })
        : styles.hideTabBar}>
      <AnimatedTabBarView
        preset="bubble"
        tabs={tabs}
        itemOuterSpace={{
          horizontal: 6,
          vertical: 12,
        }}
        itemInnerSpace={12}
        iconSize={20}
        style={styles.tabBarContainer}
        index={activeTab}
        onIndexChange={onTabSelected}
        // onLongPress={handleLongPress}
      />
    </View>
  );

Describe what you expected to happen:

1. Should works as example

Thanks <3

[tarikko]

add this to your package.json

"resolutions": {
    "react-native-redash": "16.1.1"
  },

and use yarn.

[Isaccobosio]

add this to your package.json

"resolutions": {
    "react-native-redash": "16.1.1"
  },

and use yarn.

Thanks for the answer. But it does not seems to work. Any other suggestions? I tried also to downgrade from "react-native-reanimated": "^2.3.1", to "react-native-reanimated": "^2.2.0"

EDIT With "react-native-reanimated": "^2.1.0", works but facing a lot of warnings like interpolate() is now interpolateNode(). Maybe need to change @gorhom/animated-tabbar version?

[tarikko]

don't downgrade react-native-reanimated, delete the node modules folder, like this

rm -rf node_modules/

and downgrade @gorhom/animated-tabbar to 2.1.1 like this

yarn add @gorhom/[email protected]

good luck

[pnthach95]

add this to your package.json

"resolutions": {
    "react-native-redash": "16.1.1"
  },

and use yarn.

Thanks for the answer. But it does not seems to work. Any other suggestions? I tried also to downgrade from "react-native-reanimated": "^2.3.1", to "react-native-reanimated": "^2.2.0"

EDIT With "react-native-reanimated": "^2.1.0", works but facing a lot of warnings like interpolate() is now interpolateNode(). Maybe need to change @gorhom/animated-tabbar version?

From Redash document, you have to find and add /lib/module/v1 after 'react-native-redash' in node_modules\@gorhom\animated-tabbar\src.

Or you can use my patch-package file (file name is @gorhom+animated-tabbar+2.1.2.patch):

diff --git a/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx b/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx
index 661b121..ed0f7fa 100644
--- a/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBar.tsx
@@ -14,7 +14,7 @@ import Animated, {
   call,
   onChange,
 } from 'react-native-reanimated';
-import { useValue } from 'react-native-redash';
+import { useValue } from 'react-native-redash/lib/module/v1';
 
 interface Route {
   name: string;
diff --git a/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBarView.tsx b/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBarView.tsx
index 56fd371..3042e3b 100644
--- a/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBarView.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/AnimatedTabBarView.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useEffect, useRef } from 'react';
 import Animated from 'react-native-reanimated';
-import { useValue } from 'react-native-redash';
+import { useValue } from 'react-native-redash/lib/module/v1';
 import Presets, { PresetEnum } from './presets';
 import type { AnimatedTabBarViewProps } from './types';
 
diff --git a/node_modules/@gorhom/animated-tabbar/src/components/rawButton/RawButton.tsx b/node_modules/@gorhom/animated-tabbar/src/components/rawButton/RawButton.tsx
index 4a2f575..5bb3a7b 100644
--- a/node_modules/@gorhom/animated-tabbar/src/components/rawButton/RawButton.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/components/rawButton/RawButton.tsx
@@ -11,7 +11,7 @@ import {
   TapGestureHandler,
   LongPressGestureHandler,
 } from 'react-native-gesture-handler';
-import { useValue, useGestureHandler } from 'react-native-redash';
+import { useValue, useGestureHandler } from 'react-native-redash/lib/module/v1';
 import { useStableCallback } from '../../hooks';
 
 const { useCode, cond, onChange, eq } = Animated;
diff --git a/node_modules/@gorhom/animated-tabbar/src/hooks/useTabBarVisibility.ts b/node_modules/@gorhom/animated-tabbar/src/hooks/useTabBarVisibility.ts
index 95a80a3..b909ba5 100644
--- a/node_modules/@gorhom/animated-tabbar/src/hooks/useTabBarVisibility.ts
+++ b/node_modules/@gorhom/animated-tabbar/src/hooks/useTabBarVisibility.ts
@@ -11,7 +11,7 @@ import Animated, {
   startClock,
   timing,
 } from 'react-native-reanimated';
-import { useClock, useValue } from 'react-native-redash';
+import { useClock, useValue } from 'react-native-redash/lib/module/v1';
 import { Easing } from '../utilities';
 
 export const useTabBarVisibility = (shouldShowTabBar: boolean) => {
diff --git a/node_modules/@gorhom/animated-tabbar/src/presets/bubble/item/BubbleTabBarItem.tsx b/node_modules/@gorhom/animated-tabbar/src/presets/bubble/item/BubbleTabBarItem.tsx
index adf44cb..945a3ce 100644
--- a/node_modules/@gorhom/animated-tabbar/src/presets/bubble/item/BubbleTabBarItem.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/presets/bubble/item/BubbleTabBarItem.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, memo } from 'react';
 import { View, Text, LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { interpolateColor, useValue } from 'react-native-redash';
+import { interpolateColor, useValue } from 'react-native-redash/lib/module/v1';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
 import { interpolate } from '../../../utilities';
diff --git a/node_modules/@gorhom/animated-tabbar/src/presets/flashy/item/FlashyTabBarItem.tsx b/node_modules/@gorhom/animated-tabbar/src/presets/flashy/item/FlashyTabBarItem.tsx
index 3fc3a65..a0bf44a 100644
--- a/node_modules/@gorhom/animated-tabbar/src/presets/flashy/item/FlashyTabBarItem.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/presets/flashy/item/FlashyTabBarItem.tsx
@@ -4,7 +4,7 @@ import Animated from 'react-native-reanimated';
 // @ts-ignore 😞
 import MaskedView from '@react-native-community/masked-view';
 import { Svg, Circle, SvgProps, CircleProps } from 'react-native-svg';
-import { useValues, transformOrigin, toRad } from 'react-native-redash';
+import { useValues, transformOrigin, toRad } from 'react-native-redash/lib/module/v1';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
 import {
diff --git a/node_modules/@gorhom/animated-tabbar/src/presets/material/item/MaterialTabBarItem.tsx b/node_modules/@gorhom/animated-tabbar/src/presets/material/item/MaterialTabBarItem.tsx
index 33544c6..98dcbcd 100644
--- a/node_modules/@gorhom/animated-tabbar/src/presets/material/item/MaterialTabBarItem.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/presets/material/item/MaterialTabBarItem.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, memo, useCallback } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { transformOrigin, useValue } from 'react-native-redash';
+import { transformOrigin, useValue } from 'react-native-redash/lib/module/v1';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
 import { useStableCallback } from '../../../hooks';
diff --git a/node_modules/@gorhom/animated-tabbar/src/presets/material/ripple/MaterialTabBarRipple.tsx b/node_modules/@gorhom/animated-tabbar/src/presets/material/ripple/MaterialTabBarRipple.tsx
index 7dab024..ed75710 100644
--- a/node_modules/@gorhom/animated-tabbar/src/presets/material/ripple/MaterialTabBarRipple.tsx
+++ b/node_modules/@gorhom/animated-tabbar/src/presets/material/ripple/MaterialTabBarRipple.tsx
@@ -16,7 +16,7 @@ import Animated, {
 } from 'react-native-reanimated';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
-import { useValues, get, useValue } from 'react-native-redash';
+import { useValues, get, useValue } from 'react-native-redash/lib/module/v1';
 import { interpolate } from '../../../utilities';
 import type { MaterialTabBarItemConfig } from '../types';
 import { styles } from './styles';

[tarikko]

This project is so underrated :(

[Amnesthesia]

This project is not very usable alongside the @gorhom Bottom Drawer now that the dependencies are kinda far apart :(

[nikitonskii]

faced with the same issue when trying to update react-native version from 0.64.2 to 0.66.0 :(

[Humberd]

What helped me was:

1. Installing hardcoded version @gorhom/[email protected]

    yarn add @gorhom/[email protected]
   

2. Hardcoding react-native-redash in package.json to 16.2.3

   "resolutions": {
     "react-native-redash": "16.2.3"
   },
   

[briantanabe]

I managed to fix this with by replacing Animated.interpolate with Animated.interpolateNode in node_modules/react-native-redash/lib/module/Colors.js... I'll give Humberd's solution a shot once I get this working on Android

[Codedrainer]

After spending 2 days in that error finally, i have found a solution. You just need to include these two libraries in you package.json with exact versions mentioned below.

"dependencies": {
   "@gorhom/animated-tabbar": "^2.1.2", // latest version of this library
   "react-native-reanimated": "1.13.1", 
}

@tarikko @Isaccobosio Try this Nothing worked for me except this configuration, i hope this might help someone Good Luck

[zalwicker2]

Solution that worked for me was modifying the react-native-redash library and updating a few values for reanimated v2. This is with version 14.2.4 of react-native-redash. In react-native-redash/lib/module/Colors.js change interpolate=Animated.interpolate to interpolate=Animated.interpolateNode In react-native-redash/src/Colors.ts replace all instances of the interpolate method (including in the import) to interpolateNode.

I don't believe it's ideal as you'll have to change it every time the code moves machines, but it's a quick band-aid fix. Other versions of redash I attempted using had various compatibility issues so I assume a more permanent solution can be found by finding a functional version of redash that works with reanimated v2 that doesn't break existing functionality

[hugoh59]

@Codedrainer what version of RN are you using ? When downgrading reanimated I get issues on Android:

* What went wrong:
A problem occurred evaluating project ':react-native-reanimated'.
> Plugin with id 'maven' not found.
A problem occurred configuring project ':react-native-reanimated'.
> compileSdkVersion is not specified. Please add it to build.gradle

[hugoh59]

@zalwicker2 thank yo very much, your solution worked for me on RN 0.70.6!

[indranilduttapwc]

Solution that worked for me was modifying the react-native-redash library and updating a few values for reanimated v2. This is with version 14.2.4 of react-native-redash. In react-native-redash/lib/module/Colors.js change interpolate=Animated.interpolate to interpolate=Animated.interpolateNode In react-native-redash/src/Colors.ts replace all instances of the interpolate method (including in the import) to interpolateNode.

I don't believe it's ideal as you'll have to change it every time the code moves machines, but it's a quick band-aid fix. Other versions of redash I attempted using had various compatibility issues so I assume a more permanent solution can be found by finding a functional version of redash that works with reanimated v2 that doesn't break existing functionality

This is the correct answer.