title: Getting 'TypeError: interpolate is not a function' in React-Native
body: <p>I am <strong>learning <code>react-native</code></strong> currently.</p>
  <p>I'm on this Project that <strong>uses mainly - <code>react-navgation</code>,<code>FlatList</code></strong> and <strong><code>react-native-magnus</code></strong> for UI.<br />
  It <strong>takes in
  an Array of Objects, and uses FlatList to return a list of Cards(from Magnus UI) for each of the Array Item.</strong></p>
  <p>The Navigaton Structure is like this →
  <a href="https://i.stack.imgur.com/Wyg6K.png" rel="noreferrer">Link to Image</a></p>
  <p>For Better Accessibility, I'm attaching my project along, hope it helps →
  <a href="https://wetransfer.com/downloads/4b8af09bde680e8e17bcc05a662e4ef820210604152955/6b3f64" rel="noreferrer">https://wetransfer.com/downloads/4b8af09bde680e8e17bcc05a662e4ef820210604152955/6b3f64</a></p>
  <p><strong>In my Code, I'm stuck at this error</strong> →</p>
  <pre class="lang-sh prettyprint-override"><code>TypeError: interpolate is not a function. (In 'interpolate(this.progress, {
                inputRange: [PROGRESS_EPSILON, 1],
                outputRange: [0, 1]
              })', 'interpolate' is undefined)
  
  This error is located at:
      in NavigationContainer (at App.js:13)
      in App (created by ExpoRoot)
      in ExpoRoot (at renderApplication.js:45)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:106)
      in RCTView (at View.js:34)
      in View (at AppContainer.js:132)
      in AppContainer (at renderApplication.js:39)
  
  Stack trace:
    node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
    node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
    node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
    node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
    node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
    node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
    node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
    node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
    node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
    node_modules\regenerator-runtime\runtime.js:293:29 in invoke
    node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
    node_modules\regenerator-runtime\runtime.js:154:27 in invoke
    node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
    node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
    node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
    node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
    node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
    node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
    node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
    node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
    node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
    node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
    [native code]:null in flushedQueue
    [native code]:null in invokeCallbackAndReturnFlushedQueue
  </code></pre>
  <h5>These are the major JS files of the project ↓, but I've also mentioned a link to the entire project above ↑ </h5>
  <p><strong>CODE</strong>
  <em>App.js</em></p>
  <pre class="lang-js prettyprint-override"><code>
  import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  
  import Navigator from './routes/drawer';
  
  //Test Screens //
  // import MagnusCard from './magnus/magnusCard'
  
  export default function App() {
    return (
  
      &lt;Navigator /&gt; //&lt;&lt;
  
      //Test Screens //
      // &lt;MagnusCard /&gt;
  
    )
  }
  
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  </code></pre>
  <p><strong>CODE</strong>
  <em>drawer.js</em></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { View, Text } from 'react-native';
  
  import { createAppContainer } from 'react-navigation';
  import { createDrawerNavigator } from 'react-navigation-drawer';
  
  // stacks
  import HomeStack from './homeStack';
  import AboutStack from './aboutStack';
  
  // drawer navigation options
  const RootDrawerNavigator = createDrawerNavigator({
      Home: {
          screen: HomeStack,
      },
      About: {
          screen: AboutStack,
      },
  });
  
  export default createAppContainer(RootDrawerNavigator);
  </code></pre>
  <p><strong>CODE</strong>
  <em>homeStack.js</em></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { View, Text } from 'react-native';
  
  import { createAppContainer } from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  
  import Home from '../screens/homeStack/home'
  import ReviewDetails from '../screens/homeStack/reviewDetails'
  
  //Shared Components
  import Header from '../shared/header';
  
  const screens = {
      Home: {
          screen: Home,
          navigationOptions: ({ navigation }) =&gt; {
              return {
                  headerTitle: () =&gt; &lt;Header title=&quot;Home&quot; navigation={navigation} /&gt;
              }
          }
  
      },
      ReviewDetails: {
          screen: ReviewDetails,
          navigationOptions: {
              title: &quot;Review Details&quot;
          }
      },
  }
  
  const HomeStack = createStackNavigator(screens);
  
  export default HomeStack;
  </code></pre>
  <p><strong>CODE</strong>
  <em>home.js</em></p>
  <pre class="lang-js prettyprint-override"><code>import { StatusBar } from 'expo-status-bar';
  import React, { useState } from 'react';
  import { StyleSheet, Text, View, Button, FlatList, TouchableOpacity } from 'react-native';
  
  // Shared Components
  import MagnusCard from '../../magnus/magnusCard';
  
  export default function Home({ navigation }) {
  
      const [reviews, setReviews] = useState([
          { title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
          { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
          { title: 'Not So &quot;Final&quot; Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
      ]);
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;View style={styles.topBox}&gt;
                  &lt;Button
                      onPress={() =&gt; { navigation.navigate('ReviewDetails') }}
                      title=&quot;Details&quot; style={styles.btnToRevDetails} /&gt;
                  &lt;Text style={styles.explainerText}&gt;←Click here to view Review Screen&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.listOfItems}&gt;
  
                  &lt;FlatList data={reviews} renderItem={({ item }) =&gt; (
                      &lt;TouchableOpacity&gt;
                          {/* onPress={() =&gt; navigation.navigate('ReviewDetails', item)} */}
  
                          &lt;MagnusCard /&gt;
                      &lt;/TouchableOpacity&gt;
                  )} /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          flexDirection: 'column',
      },
      topBox: {
          flexDirection: 'row',
          margin: 4, padding: 10, alignItems: 'center'
      },
      listOfItems: { margin: 10, padding: 4 },
      btnToRevDetails: {
          flex: 3
      },
      explainerText: {
          flex: 7,
          fontSize: 16,
      }
  })
  </code></pre>