Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Isaccobosio opened this issue Jan 12, 2022 · 14 comments
Open

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

Isaccobosio opened this issue Jan 12, 2022 · 14 comments
Labels
bug Something isn't working

Comments

@Isaccobosio
Copy link

Isaccobosio commented Jan 12, 2022

Bug

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

Screenshot

image

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

@Isaccobosio Isaccobosio added the bug Something isn't working label Jan 12, 2022
@tarikko
Copy link

tarikko commented Jan 12, 2022

add this to your package.json

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

and use yarn.

@Isaccobosio
Copy link
Author

Isaccobosio commented Jan 12, 2022

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
Copy link

tarikko commented Jan 12, 2022

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
Copy link

pnthach95 commented Jan 21, 2022

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
Copy link

tarikko commented Jan 21, 2022

This project is so underrated :(

@Amnesthesia
Copy link

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

@nikitonskii
Copy link

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

@Humberd
Copy link

Humberd commented Mar 23, 2022

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
Copy link

briantanabe commented Apr 11, 2022

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
Copy link

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
Copy link

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
Copy link

hugoh59 commented Dec 15, 2022

@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
Copy link

hugoh59 commented Dec 15, 2022

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

@indranilduttapwc
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests