So i am using drawer-navigator (react-navigation). Everything was working fine until i upgraded the packages. Here is the new version of it and its dependencies;

"@react-navigation/drawer": "^6.3.1",
"react-native-gesture-handler": "^2.3.2",
"react-native-reanimated": "^2.4.1",

Now the problem is that, when i change screens, drawer is reopening and also sometimes backbutton also doesn't work properly as it just opens the drawer and doesn't take me to other screens. So i thought maybe reanimated 2 is needed.

So as per documentation, if we want to use reanimated 2, then, we need to do the setup for it as per these docs.

I simply followed the docs, cleaned the project and rebuild it, but the problem persisted.

Then i checked a prop in drawer navigation, useLegacyImplementation which is defined as;

Whether to use the legacy implementation based on Reanimated 1. The new implementation based on Reanimated 2 will perform better, but you need additional configuration and need to use Hermes with Flipper to debug.

This defaults to true in following cases:

Reanimated 2 is not configured App is connected to Chrome debugger (Reanimated 2 cannot be used with Chrome debugger) App is running on Web Otherwise, it defaults to false

I set this to true and the problem is gone.

Now i am confused why does this worked. And why was the problem there even when i didn't configured reanimated 2 as setting useLegacyImplementation: true just means to use reanimated 1 (please correct me if i am wrong).

So please explain the possible causes for the problem and how to solve it (though solved it but don't know how)