Estoy aprendiendo react-native actualmente.

Estoy en este proyecto que utiliza principalmente: react-navgation , FlatList y react-native-magnus para la interfaz de usuario.
Toma una matriz de objetos y usa FlatList para devolver una lista de tarjetas (de la interfaz de usuario de Magnus) para cada uno de los elementos de la matriz.

La estructura de navegación es así → Enlace a la imagen

Para una mejor accesibilidad, adjunto mi proyecto, espero que ayude → https://wetransfer.com/downloads/4b8af09bde680e8e17bcc05a662e4ef820210604152955/6b3f64

En mi código, estoy atascado en este 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

Estos son los principales archivos JS del proyecto ↓, pero también mencioné un enlace a todo el proyecto arriba ↑

CÓDIGO 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', }, });

CÓDIGO cajón.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);

CÓDIGO 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;

CÓDIGO 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, } })