chore: configure reanimated 2

example/babel.config.js

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

packages/drawer/src/types.tsx

@@ -40,7 +40,11 @@ export type DrawerNavigationConfig = {
    * The new implementation based on Reanimated 2 will perform better,
    * but you need additional configuration and need to use Hermes with Flipper to debug.
    *
-   * Defaults to `false` if Reanimated 2 is configured in the project, otherwise `true`.
+   * 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)
+   *
+   * Otherwise, it defaults to `false`
    */
   useLegacyImplementation?: boolean;
 };

packages/drawer/src/views/DrawerView.tsx

@@ -77,8 +77,12 @@ function DrawerViewBase({
     <DrawerContent {...props} />
   ),
   detachInactiveScreens = true,
-  // @ts-expect-error: the type definitions are incomplete
-  useLegacyImplementation = !Animated.isConfigured?.(),
+  // Running in chrome debugger
+  // @ts-expect-error
+  useLegacyImplementation = !global.nativeCallSyncHook ||
+    // Reanimated 2 is not configured
+    // @ts-expect-error: the type definitions are incomplete
+    !Animated.isConfigured?.(),
 }: Props) {
   const Drawer: React.ComponentType<DrawerProps> = useLegacyImplementation
     ? require('./legacy/Drawer').default