TypeError: interpolate is not a function after installing react-nativgation-drawer

Question

I am learning react native and during this i was trying to implement drawer navigation but as soon as i installed the react-navigation-drawer(2.2.0) this error pops up.

Behaviour : App crash on load

Reproduce : Just reload the app

Package.js

{
      "main": "node_modules/expo/AppEntry.js",
      "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
      },
      "dependencies": {
        "expo": "~42.0.1",
        "expo-app-loading": "^1.1.2",
        "expo-status-bar": "~1.0.4",
        "react": "16.13.1",
        "react-dom": "16.13.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
        "react-native-gesture-handler": "~1.10.2",
        "react-native-reanimated": "^2.1.0",
        "react-native-screens": "^3.4.0",
        "react-native-web": "~0.13.12",
        "react-navigation": "^4.4.4",
        "react-navigation-drawer": "^2.7.1",
        "react-navigation-stack": "^2.10.4"
      },
      "devDependencies": {
        "@babel/core": "^7.9.0"
      },
      "private": true
    } 

App.js

import React,{useState} from 'react';
import * as Font from 'expo-font';
import AppLoading  from 'expo-app-loading';
//import Navigator from './routes/homestack'
import Navigator from './routes/drawernav';




const loadFont = ()=>Font.loadAsync({
    'merrie-regular':require('./assets/fonts/Merriweather-Regular.ttf'),
    'merrie-bold':require('./assets/fonts/Merriweather-Bold.ttf')
  });

export default function App() {
  const [isFontLoaded,setFontLoaded] = useState(false);
  if(isFontLoaded){
    return (
      //initial changes again
       <Navigator/>
      
    );
  }else{ 
    return(
      
        <AppLoading
        startAsync = {loadFont}
        onFinish = {()=>setFontLoaded(true)}
        onError = {()=>alert('Error')}
        />
    );
  }
}

Error:

AppLoading threw an unexpected error when loading:
    TypeError: interpolate is not a function. (In 'interpolate(this.progress, {
                  inputRange: [PROGRESS_EPSILON, 1],
                  outputRange: [0, 1]
                })', 'interpolate' is undefined)     

**Already Tried:
1.Changing reanimated version
2.Uninstall and install reanimated version.
3.Uninstall and install drawer-navigation** 

Note: It's on both android and IOS simulators.

Answer 1

Your react-navigation-drawer version is conflicting with the version of react-native-reanimated. Try to run npm i --save react-native-reanimated@1.0.0.

Downgrade your react-native-reanimated to version 1.1.0 Run this command in terminal yarn add react-native-reanimated@1.0.0