1

I am trying to implement Animated Layout in my expo project. My dependencies

"dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/datetimepicker": "6.2.0",
    "@react-native-masked-view/masked-view": "0.2.7",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.4",
    "axios": "^1.1.3",
    "date-fns": "^2.29.3",
    "expo": "^46.0.0",
    "expo-device": "~4.3.0",
    "expo-font": "~10.2.0",
    "expo-linear-gradient": "~11.4.0",
    "expo-local-authentication": "~12.3.0",
    "expo-notifications": "~0.16.1",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.0",
    "expo-updates": "~0.14.6",
    "jwt-decode": "^3.1.2",
    "native-base": "3.4.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-hook-form": "^7.39.1",
    "react-native": "0.69.6",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-mask-input": "^1.2.2",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-svg": "12.3.0",
    "react-native-web": "~0.18.7",
    "rxjs": "^7.5.7"
  },

Babel.config

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

On top of App.tsx

import 'react-native-gesture-handler';

The problem is when ever I implement this

import Animated, { BounceIn, BounceOut } from "react-native-reanimated"
const TestScreen: React.FC = () => {
 return (
        <React.Fragment>
            <Animated.View entering={BounceIn.delay(600)} exiting={BounceOut} >
               <Text>Bounce In</Text>
            </Animated.View>
        </React.Fragment>
    )
}
export default TestScreen;

I get the following error, but when I remove the animated.view the error disapears

 ERROR  Error: Requiring module "node_modules\react-native-reanimated\src\index.ts", which threw an exception: Error: Exception in HostFunction: java.lang.IllegalArgumentException: Could not find @ReactModule annotation in com.swmansion.gesturehandler.react.RNGestureHandlerModule
 ERROR  Error: Requiring module "node_modules\react-native-reanimated\src\index.ts", which threw an exception: Error: Exception in HostFunction: java.lang.IllegalArgumentException: Could not find @ReactModule annotation in com.swmansion.gesturehandler.react.RNGestureHandlerModule

Please what should I do?

Sirjiskit
  • 431
  • 5
  • 16

0 Answers0