From ce3c1f99195eafd9e8ac5dbad5f90d6d29e11f7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20=C5=81opaci=C5=84ski?=
 <lop.mateusz.2001@gmail.com>
Date: Wed, 21 Aug 2024 17:02:03 +0200
Subject: [PATCH] fix: Chrome debugger crash caused by incorrect viewTag
 (#6437)

## Summary

The problem was reported in
[this](https://github.com/software-mansion/react-native-reanimated/issues/6432)
issue and
[this](https://github.com/software-mansion/react-native-reanimated/discussions/6359)
discussion seems to report the same problem.

In short, the crash was caused by incorrect check in `_getViewInfo` in
`createAnimatedComponent` which assigned the `_component` to the
`viewTag` only for web but not for chrome debugger. I replaced `IS_WEB`
check with `shouldBeUseWeb`, which also checks whether the current
environment is a chrome debugger.

## Test plan

- I created a bare app with `npx @react-native-community/cli init
ReactNativeDebugger --version 0.75.1`
- Installed latest reanimated and downloaded
[react-native-debugger](https://github.com/jhen0409/react-native-debugger?tab=readme-ov-file)
mentioned in
[this](https://github.com/software-mansion/react-native-reanimated/issues/6432)
issue
- Launched `react-native-debugger` and enabled remote debugging with js,
- When I tried to animate component with animated style, I saw the
reported crash
---
 .../src/createAnimatedComponent/createAnimatedComponent.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
index bcc8c8d7604..cd010b24728 100644
--- a/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
+++ b/packages/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
@@ -55,6 +55,7 @@ import type { ReanimatedHTMLElement } from '../js-reanimated';
 
 const IS_WEB = isWeb();
 const IS_JEST = isJest();
+const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 
 if (IS_WEB) {
   configureWebLayoutAnimations();
@@ -289,7 +290,7 @@ export function createAnimatedComponent(
         ? (this._component as AnimatedComponentRef).getAnimatableRef?.()
         : this;
 
-      if (IS_WEB) {
+      if (SHOULD_BE_USE_WEB) {
         // At this point I assume that `_setComponentRef` was already called and `_component` is set.
         // `this._component` on web represents HTMLElement of our component, that's why we use casting
         viewTag = this._component as HTMLElement;
@@ -501,7 +502,7 @@ export function createAnimatedComponent(
           (layout || entering || exiting || sharedTransitionTag) &&
           tag != null
         ) {
-          if (!shouldBeUseWeb()) {
+          if (!SHOULD_BE_USE_WEB) {
             enableLayoutAnimations(true, false);
           }