I am also facing the same error and this is how i solved this error I'll guide you guy's step by step
Step 1: Add Reanimated's babel plugin
Add react-native-reanimated/plugin plugin to your babel.config.js.
module.exports = {
presets: [
... // don't add it here :)
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
Step 2: Wrap metro config with reanimated wrapper (recommended)
Wrap your existing Metro configuration in the metro.config.js file with the wrapWithReanimatedMetroConfig function.
like this:
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');
Step 3: Clear Metro bundler cache (recommended)
npm start -- --reset-cache
these step are mandatory and also you can consider their official documentation here is the link:
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-3-wrap-metro-config-with-reanimated-wrapper-recommended
After that you can check these things also that config or not in your project..
react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.kt or MainActivity.java file which is located under android/app/src/main/java/<your package name>/.
Add the highlighted code to the body of MainActivity class:
class MainActivity: ReactActivity() {
// ...
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(null)
}
// ...
}
and make sure to add the following import statement at the top of this file below your package statement:
import android.os.Bundle;
Step 4: Create Two Files in the Root of Your Project Directory
To finalize the installation of react-native-gesture-handler, we need to conditionally import it. To do this, create 2 files:
1. gesture-handler.native.js
// Only import react-native-gesture-handler on native platforms
import 'react-native-gesture-handler';
2. gesture-handler.js
Leave this file empty
Now, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:
import './gesture-handler';
To resolve this error, I recommend consulting the React Navigation documentation. By carefully following each step, you can likely avoid encountering the same issue. I faced a similar challenge, but after creating a new React Native project and successfully implementing drawer navigation by thoroughly studying the documentation, everything started working perfectly.
