Cannot destructure property 'interpolate' of 'Animated_default' as it is undefined.

[bandhavya]

I had added react-native-reanimated 2.8.0 version and everything works fine in expo android, ios, apk, ipa installed on mobile. But issue is only when we install on web.

My package.json
"axios": "~0.21.1", "expo": "45.0.1", "@expo/vector-icons": "~13.0.0", "expo-font": "~10.1.0", "expo-camera": "~12.2.0", "expo-av": "~11.2.3", "expo-barcode-scanner": "~11.3.0", "expo-web-browser": "~10.2.0", "expo-device": "^4.2.0", "expo-network": "~4.2.0", "expo-location": "~14.2.2", "expo-contacts": "~10.2.0", "expo-calendar": "~10.2.0", "expo-splash-screen": "~0.15.1", "expo-document-picker": "~10.2.1", "hermes-engine": "0.11.0", "react": "17.0.2", "react-dom": "17.0.2", "react-native": "0.68.2", "react-native-web": "0.17.7", "@react-native-async-storage/async-storage": "~1.17.3", "react-native-gesture-handler": "~2.2.1", "react-native-reanimated": "~2.8.0", "react-native-bundle-splitter": "^2.1.0", "react-native-safe-area-context": "3.3.2", "@react-native-community/datetimepicker": "^6.1.2", "@react-native-community/slider": "^4.2.1", "@react-native-picker/picker": "^2.4.0", "react-native-circular-progress": "^1.3.7", "@react-native-masked-view/masked-view": "^0.2.6", "react-native-snap-carousel": "^3.9.1", "react-native-svg": "^12.3.0", "@react-navigation/native": "^6.0.10", "react-native-pager-view": "^5.4.15", "react-native-vector-icons": "~8.1.0", "@react-navigation/drawer": "^6.4.1", "react-native-screens": "~3.11.1", "expo-battery": "6.2.0", "@unimodules/react-native-adapter": "6.3.9"

Expo cli- 5.4.4
ReactNative - 0.68.2
React- 17.0.2
node- 14.15.1
npm- 7.20.1

Im using esbuild to build the react native app. Any ideas how to resolve this issue ?
I dont see this error anywhere on other discussion forums.

[ayozebarrera]

You need to replace interpolate to interpolateNode like this

const scale = Animated.interpolateNode(drawerProgress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

I faced the same problem, here is more info from the docs:

Be aware that interpolate was renamed to interpolateNode in Reanimated v2 and should not be confused with interpolate from the new API. When using interpolate imported directly from react-native-reanimated v1, in v2 you should use interpolateNode instead. If you were using a class member method AnimatedValue.interpolate, no change is necessary.

https://docs.swmansion.com/react-native-reanimated/docs/api/miscellaneous/interpolate/ (check the blue square)