From 15717e7fd9a367e4b673953d47c7d45f5002ef44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Bert?=
 <63123542+m-bert@users.noreply.github.com>
Date: Mon, 4 Dec 2023 11:23:40 +0100
Subject: [PATCH] Fix calling `getBoundingClientRect` on `null` (#5462)

## Summary

In implementation of web layout animations I used
`getSnapshotBeforeUpdate` to get position of element before its
re-render. However, this function lacks checks for platform and whether
component is null or not.

## Test plan

Tested on provided repro

<details>
<summary> Code from issue </summary>

```jsx
import React, {useRef, useState} from 'react'
import {StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native'
import Animated from "react-native-reanimated"
import FastImage from "react-native-fast-image"

export const ReanimatedFastImage = Animated.createAnimatedComponent(FastImage)
const App = () => {

  const [value, setValue] = useState(false)
  const cardImageRef = useRef<any>(null)

  const onPress = () => {
    setValue(!value)
  }

  return (
    <View style={styles.container}>
      <ReanimatedFastImage ref={cardImageRef} />
      {value ? <View /> : null}
      <TouchableOpacity onPress={onPress} style={styles.buttonStyle}>
        <Text>Toggle Set State</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center'
  } as ViewStyle,
  buttonStyle: {
    backgroundColor: 'grey',
    width: 200,
    height: 50,
    marginVertical: 20,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App

```

</details>
---
 src/createAnimatedComponent/createAnimatedComponent.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/createAnimatedComponent/createAnimatedComponent.tsx b/src/createAnimatedComponent/createAnimatedComponent.tsx
index 66b4a26e0be..ebeaf6364bc 100644
--- a/src/createAnimatedComponent/createAnimatedComponent.tsx
+++ b/src/createAnimatedComponent/createAnimatedComponent.tsx
@@ -546,7 +546,8 @@ export function createAnimatedComponent(
     // and later on, in componentDidUpdate, calculate translation for layout transition.
     getSnapshotBeforeUpdate() {
       if (
-        (this._component as HTMLElement).getBoundingClientRect !== undefined
+        IS_WEB &&
+        (this._component as HTMLElement)?.getBoundingClientRect !== undefined
       ) {
         return (this._component as HTMLElement).getBoundingClientRect();
       }