在 React-Native 中获取“TypeError: interpolate is not a function”

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

Maybe 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 .

If possible share your package.json code.

Answer 2

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 3

Possibly it's a bug which causing this error. You can install ( react-native-reanimated@1.13.1 ) and then expo start --clear

Answer 4

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

Answer 5

1)Open the Drawer.js file found in /node_modules/react-navigation-drawer/lib/module/views/Drawer.js 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 6

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 7

I also faced this issue and you don't have to downgrade your react-native-reanimated. In the latest versions of reanimated, interpolate was changed to interpolateNode. So all you have to do is to open the Drawer.js file found in:

node_modules\react-navigation-drawer\lib\module\views and replace interpolate with interpolateNode . It is in two places , so make sure you change both of them.

This should fix the issue.

Answer 8

Use Animated.interpolateNode

import * as React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Animated from 'react-native-reanimated';
import { createStackNavigator } from '@react-navigation/stack';

function MyTabBar({ state, descriptors, navigation, position }) {
  console.log("hi")
  return (
    <View style={{ flexDirection: 'row', paddingTop: 20 }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };
        // modify inputRange for custom behavior
        const inputRange = state.routes.map((_, i) => i);
        const opacity = Animated.interpolateNode(position, {
          inputRange,
          outputRange: inputRange.map((i) => (i === index ? 1 : 0)),
        });

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}>
            <Animated.Text style={{ opacity }}>{label}</Animated.Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile!</Text>
    </View>
  );
}

const Stack = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
     {/* <Stack.Navigator>*/}
      <Stack.Navigator tabBar={(props) => <MyTabBar {...props} />}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}