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

Isaccobosio · 2022-01-12T09:49:38Z

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:

Should works as example

Thanks <3

The text was updated successfully, but these errors were encountered:

tarikko · 2022-01-12T10:01:52Z

add this to your package.json

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

and use yarn.

Isaccobosio · 2022-01-12T11:22:38Z

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 · 2022-01-12T12:02:04Z

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/animated-tabbar@2.1.1

good luck

pnthach95 · 2022-01-21T03:26:21Z

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 · 2022-01-21T20:30:06Z

This project is so underrated :(

Amnesthesia · 2022-01-29T10:45:10Z

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

nikitonskii · 2022-02-08T16:06:28Z

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

Humberd · 2022-03-23T19:21:34Z

What helped me was:

Installing hardcoded version @gorhom/animated-tabbar@2.1.1
```
 yarn add @gorhom/animated-tabbar@2.1.1
```
Hardcoding react-native-redash in package.json to 16.2.3
```
"resolutions": {
  "react-native-redash": "16.2.3"
},
```

briantanabe · 2022-04-11T23:54:30Z

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 · 2022-11-13T14:20:06Z

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 · 2022-11-15T17:25:28Z

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 · 2022-12-15T16:11:36Z

@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 · 2022-12-15T16:23:32Z

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

indranilduttapwc · 2023-07-19T15:11:12Z

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.

Isaccobosio added the bug Something isn't working label Jan 12, 2022

nikitonskii mentioned this issue Feb 8, 2022

react-native-reanimated/src/derived/interpolate could not be found within the project #110

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Isaccobosio commented Jan 12, 2022 •

edited

tarikko commented Jan 12, 2022

Isaccobosio commented Jan 12, 2022 •

edited

tarikko commented Jan 12, 2022

pnthach95 commented Jan 21, 2022 •

edited

tarikko commented Jan 21, 2022

Amnesthesia commented Jan 29, 2022

nikitonskii commented Feb 8, 2022

Humberd commented Mar 23, 2022 •

edited

briantanabe commented Apr 11, 2022 •

edited

Codedrainer commented Nov 13, 2022

zalwicker2 commented Nov 15, 2022

hugoh59 commented Dec 15, 2022

hugoh59 commented Dec 15, 2022

indranilduttapwc commented Jul 19, 2023

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

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

Comments

Isaccobosio commented Jan 12, 2022 • edited

Bug

Screenshot

Environment info

Steps To Reproduce

HomeSVG.js

MyTabBar.js

Thanks <3

tarikko commented Jan 12, 2022

Isaccobosio commented Jan 12, 2022 • edited

tarikko commented Jan 12, 2022

pnthach95 commented Jan 21, 2022 • edited

tarikko commented Jan 21, 2022

Amnesthesia commented Jan 29, 2022

nikitonskii commented Feb 8, 2022

Humberd commented Mar 23, 2022 • edited

briantanabe commented Apr 11, 2022 • edited

Codedrainer commented Nov 13, 2022

zalwicker2 commented Nov 15, 2022

hugoh59 commented Dec 15, 2022

hugoh59 commented Dec 15, 2022

indranilduttapwc commented Jul 19, 2023

Isaccobosio commented Jan 12, 2022 •

edited

Isaccobosio commented Jan 12, 2022 •

edited

pnthach95 commented Jan 21, 2022 •

edited

Humberd commented Mar 23, 2022 •

edited

briantanabe commented Apr 11, 2022 •

edited