CODEWITHSUNDEEP
javascriptreactjsreact-nativedependenciesreact-navigation
Jędrzej Dąbrowski
Jędrzej Dąbrowski

Reputation: 11

interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead

I have some problem with dependencies tree in my expo project. Every time when I use navigation I get warning like this: interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead

I try to fix this by changing the version of react-native-reanimated to the version 1:

npm install react-native-reanimated@1

But then I get error when I start my app like this

Some dependencies are incompatible with the installed expo package version: react-native-reanimated - expected version: ~2.1.0 - actual version installed: 1.13.3. Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo install [package-name ...]

When I go back to version ~2.1.0 app start correctly but I get this warning again

I attach a snippet of code with dependencies:

    "dependencies": {
"@react-native-async-storage/async-storage": "^1.13.0",
"@react-navigation/drawer": "^5.12.5",
"expo": "~41.0.1",
"expo-app-loading": "^1.0.3",
"expo-font": "^9.1.0",
"expo-linear-gradient": "^9.1.0",
"expo-status-bar": "~1.0.4",
"moment": "^2.29.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.1.0",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-header-buttons": "^7.0.1",
"react-navigation-stack": "^2.10.4",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0"},

Greatings,

Jędrek

Upvotes: 1

Views: 3677

Answers (2)

Anupam Hayat Shawon
Anupam Hayat Shawon

Reputation: 153

In Reanimated 2 interpolate was renamed to interpolateNode. So I did the change my code like

...

const scale = Animated.interpolateNode(props.progress, {
 inputRange: [0, 1],
 outputRange: [1, 0.8],
 extrapolate: Extrapolate.CLAMP,
})
const borderRadius = Animated.interpolateNode(props.progress, {
 inputRange: [0, 1],
 outputRange: [0, 26],
 extrapolate: Extrapolate.CLAMP,
})
...

It works for me.

Note: import Animated, { Extrapolate } from "react-native-reanimated"

Upvotes: 0

Fixticks
Fixticks

Reputation: 51

Newer versions of Expo do not support v1.* of Reanimated. You need to edit your animations to fit in with the changes to reanimated v2*
https://docs.swmansion.com/react-native-reanimated/docs/migration/#renamed-methods

Check through your apps code for the use of interpolation.

Upvotes: 1

Related Questions