79107250

Date: 2024-10-20 14:10:30
Score: 2
Natty:
Report link
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.
Reasons:
  • Blacklisted phrase (1): here is the link
  • Whitelisted phrase (-2): i solved
  • RegEx Blacklisted phrase (1): I am also facing the same error
  • Long answer (-1):
  • Has code block (-0.5):
  • Me too answer (2.5): I am also facing the same error
  • Low reputation (1):
Posted by: Raman Malviya