fix: Don't pass uninitialized ref to dispatchCommand, add warnings (#8327)

## Summary

This PR adds warnings shown when the `scrollTo` or the `dispatchCommand`
function is called with an uninitialized ref. It also early returns from
the `dispatchCommand` function when the ref is uninitialized (has `null`
value) and doesn't pass it to the native `dispatchCommand` method call.

I added this PR as I feel that the #8245 issue is caused by the invalid
use of the animated ref.

Author: MatiPl01

packages/react-native-reanimated/src/platformFunctions/dispatchCommand.ts

@@ -38,8 +38,21 @@ function dispatchCommandNative(
     return;
   }
 
-  const shadowNodeWrapper = animatedRef() as ShadowNodeWrapper;
-  global._dispatchCommand!(shadowNodeWrapper, commandName, args);
+  const shadowNodeWrapper = animatedRef();
+
+  // This prevents crashes if ref has not been set yet
+  if (!shadowNodeWrapper) {
+    logger.warn(
+      `Tried to dispatch command "${commandName}" with an uninitialized ref. Make sure to pass the animated ref to the component before using it.`
+    );
+    return;
+  }
+
+  global._dispatchCommand!(
+    shadowNodeWrapper as ShadowNodeWrapper,
+    commandName,
+    args
+  );
 }
 
 function dispatchCommandJest() {

packages/react-native-reanimated/src/platformFunctions/scrollTo.web.ts

@@ -2,6 +2,7 @@
 import type { ComponentRef } from 'react';
 import type { ScrollView } from 'react-native';
 
+import { logger } from '../common';
 import type { InternalHostInstance } from '../commonTypes';
 import type { AnimatedRef } from '../hook/commonTypes';
 
@@ -14,9 +15,14 @@ export function scrollTo<TRef extends InternalHostInstance>(
   const element = animatedRef();
 
   // This prevents crashes if ref has not been set yet
-  if (element) {
-    // By ScrollView we mean any scrollable component
-    const scrollView = element as unknown as ComponentRef<typeof ScrollView>;
-    scrollView?.scrollTo({ x, y, animated });
+  if (!element) {
+    logger.warn(
+      'Called scrollTo() with an uninitialized ref. Make sure to pass the animated ref to the scrollable component before calling scrollTo().'
+    );
+    return;
   }
+
+  // By ScrollView we mean any scrollable component
+  const scrollView = element as unknown as ComponentRef<typeof ScrollView>;
+  scrollView?.scrollTo({ x, y, animated });
 }