Fix SSR error with useLayoutEffect (#3752)

## Description
Using `useLayoutEffect` in combination with SSR results in a warning.
This PR adds
[isomorphicLayoutEffect](https://github.com/reduxjs/react-redux/blob/7e2fdd4ee2021e4282e12ba9fc722f09124e30cd/src/utils/useIsomorphicLayoutEffect.ts#L36),
which acts as a `useEffect` when running on server and as
`useLayoutEffect` everywhere else. This fixes
#3375.

Note: This may cause #2920 to happen when running SSR, however as we
couldn't replicate the issue on main, probably due to same changes to
view recycling within react native, I think it would even be ok to
simply revert
#2925,
and simply only `useEffect`, so it shouldn't be an issue.

I decided to use `isomorphicLayoutEffect` instead of reverting to ensure
correctness.

## Test plan

See that there is no warning mentioned in #3375

Author: akwasniewski

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx

@@ -1,11 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
-import React, {
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { Platform } from 'react-native';
 import findNodeHandle from '../../../findNodeHandle';
 import { GestureType } from '../gesture';
@@ -19,7 +13,7 @@ import { useAnimatedGesture } from './useAnimatedGesture';
 import { attachHandlers } from './attachHandlers';
 import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
-import { useWebEventHandlers } from './utils';
+import { useIsomorphicLayoutEffect, useWebEventHandlers } from './utils';
 import { Wrap, AnimatedWrap } from './Wrap';
 import { useDetectorUpdater } from './useDetectorUpdater';
 import { useViewRefHandler } from './useViewRefHandler';
@@ -149,7 +143,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
 
   useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const viewTag = findNodeHandle(state.viewRef) as number;
     preparedGesture.isMounted = true;
 

packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts

@@ -19,7 +19,7 @@ import {
 } from '../../gestureHandlerCommon';
 import { isNewWebImplementationEnabled } from '../../../EnableNewWebImplementation';
 import { RNRenderer } from '../../../RNRenderer';
-import { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Reanimated } from '../reanimatedWrapper';
 import { onGestureHandlerEvent } from '../eventReceiver';
 import { WebEventHandler } from './types';
@@ -179,3 +179,21 @@ export function useWebEventHandlers() {
       : undefined,
   });
 }
+
+// code below is modified version of the code found in:
+// https://github.com/reduxjs/react-redux/blob/7e2fdd4ee2021e4282e12ba9fc722f09124e30cd/src/utils/useIsomorphicLayoutEffect.ts#L36
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser.
+const isDOM = !!(
+  typeof window !== 'undefined' &&
+  typeof window.document !== 'undefined' &&
+  typeof window.document.createElement !== 'undefined'
+);
+
+// Under React Native, we know that we always want to use useLayoutEffect
+const isReactNative =
+  typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+
+export const useIsomorphicLayoutEffect =
+  isDOM || isReactNative ? React.useLayoutEffect : React.useEffect;