Estoy usando la biblioteca moti para la animación de imágenes en reaccionar nativo, este error me aparece.
ERROR TypeError: indefinido no es un objeto (evaluando '_$$_REQUIRE(_dependencyMap[3], "moti").MotiImage')
Aquí está mi archivo de código
import { StyleSheet, Text, View, Image } from "react-native"; import React from "react"; import { SIZES, images } from "../../constants"; import {MotiImage} from 'moti'; const Walkthrough2 = ({ animate }) => { console.log("Moti Images",MotiImage); return ( <View style={{flex:1, overflow:'hidden'}} > <Text>Walkthrough2:</Text> </View> ); }; export default Walkthrough2; const styles = StyleSheet.create({ image: { position: "absolute", width: 86, height: 102, zIndex: 0, borderRadius: SIZES.radius, }, });Aquí está mi archivo package.json
{ "name": "MargaretEcommerceApp", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "@react-navigation/native": "^6.0.8", "@react-navigation/stack": "^6.1.1", "moti": "^0.17.1", "react": "17.0.2", "react-native": "0.67.3", "react-native-gesture-handler": "^2.1.1", "react-native-reanimated": "^2.4.1", "react-native-safe-area-context": "^4.0.1", "react-native-screens": "^3.12.0" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "eslint": "7.14.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.66.2", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } }por favor ayudenme a resolverlo gracias
También me encontré con el mismo problema. ¿Lo has resuelto?
Motivo del problema
La dependencia reanimada "react-native-reanimated": "^2.0.0", como se indica en la documentación oficial, requiere algunas configuraciones adicionales, incluidas babel, Hermes y MainApplication.java para funcionar correctamente con React Native.
Supongo que Reanimated ^ 2.0.0 aún no es compatible con React Native ^ 0.64.0 Solución NOTA:
Después de realizar los cambios, asegúrese de borrar los cachés de gradle e yarn. Se deben realizar tres cambios.
1. Agregue el complemento babel de Reanimated a su babel.config.js
module.exports = { ... complementos: [ ... 'react-native-reanimated/plugin', ], };
2. Encienda el motor Hermes editando android/app/build.gradle
project.ext.react = [ enableHermes: true // <- aquí | limpiar y reconstruir si cambia]
3. Enchufe reanimado en MainApplication.java
importar com.facebook.react.bridge.JSIModulePackage; // <- añadir
importar com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- añadir...
privado final ReactNativeHost mReactNativeHost = nuevo ReactNativeHost (esto) {
...
@Override protected String getJSMainModuleName() {
devolver "índice";
}
@Override protected JSIModulePackage getJSIModulePackage() {
devolver nuevo ReanimatedJSIModulePackage(); // <- añadir
}
};
//que hacer
Lo intenté pero sigo recibiendo este error: no se puede leer la propiedad 'useRef' de nulo
para resolver el problema de useRef, simplemente elimine node_modules y el archivo package-lock.json e instale el módulo de node usando npm i --legacy-peer-deps y ejecute su aplicación nuevamente