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?