Getting 'TypeError: interpolate is not a function' in React-Native

Question

I am learning react-native currently.

I'm on this Project that uses mainly - react-navgation,FlatList and react-native-magnus for UI.
It takes in an Array of Objects, and uses FlatList to return a list of Cards(from Magnus UI) for each of the Array Item.

The Navigaton Structure is like this → Link to Image

For Better Accessibility, I'm attaching my project along, hope it helps → https://wetransfer.com/downloads/4b8af09bde680e8e17bcc05a662e4ef820210604152955/6b3f64

In my Code, I'm stuck at this error →

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

These are the major JS files of the project ↓, but I've also mentioned a link to the entire project above ↑

CODE App.js

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 (

    <Navigator /> //<<

    //Test Screens //
    // <MagnusCard />

  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

CODE drawer.js

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 homeStack.js

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 }) => {
            return {
                headerTitle: () => <Header title="Home" navigation={navigation} />
            }
        }

    },
    ReviewDetails: {
        screen: ReviewDetails,
        navigationOptions: {
            title: "Review Details"
        }
    },
}

const HomeStack = createStackNavigator(screens);

export default HomeStack;

CODE home.js

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 "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
    ]);

    return (
        <View style={styles.container}>
            <View style={styles.topBox}>
                <Button
                    onPress={() => { navigation.navigate('ReviewDetails') }}
                    title="Details" style={styles.btnToRevDetails} />
                <Text style={styles.explainerText}>←Click here to view Review Screen</Text>
            </View>
            <View style={styles.listOfItems}>

                <FlatList data={reviews} renderItem={({ item }) => (
                    <TouchableOpacity>
                        {/* onPress={() => navigation.navigate('ReviewDetails', item)} */}

                        <MagnusCard />
                    </TouchableOpacity>
                )} />
            </View>
        </View>
    )
}

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,
    }
})

Answer 1

I too faced this issue and broke my head for the last few weeks. This looks to be the version conflict between react-navigation-drawer package with react-native-reanimated. Just now got it fixed. interpolate() was renamed to interpolateNode() in react-native-reanimated@2+. No need to downgrade the react-native-reanimated package.

Simple way to fix for now is (I tried to submit a pull request on react-navigation-drawer library, however, it is made read only. So you can change this locally)

1. Open the Drawer.js file found in /node_modules/react-navigation-drawer/lib/module/views/ folder
2. You will find interpolate in two places, replace the interpolate with interpolateNode in those two places.

Rebuild your code. It should work.

Answer 2

interpolate() was renamed to interpolateNode() in Reanimated 2.

Answer 3

I meet this error and fixed it by downgrading react-native-reanimate to 2.1.0. try it but I think there is a bug because after deleting node_modules and installing again the issue was reproduced and solved it by uninstalling the package(react-native-reanimate) and installing it again with 2.1.0 version

Answer 4

Maybe your react-navigation-drawer version is conflicting with the version of react-native-reanimated. Try to run npm i --save [email protected].

If possible share your package.json code.