Extracted useIsomorphicLayoutEffect to a separate file (#3766)

## Description

In
#3752
I placed useIsomorphicLayoutEffect in utils, but we reached a conclusion
that it is better to extract it to its own file.

## Test plan

`yarn lint-check`

Author: akwasniewski

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

@@ -9,11 +9,12 @@ import { useAnimatedGesture } from './useAnimatedGesture';
 import { attachHandlers } from './attachHandlers';
 import { needsToReattach } from './needsToReattach';
 import { dropHandlers } from './dropHandlers';
-import { useIsomorphicLayoutEffect, useWebEventHandlers } from './utils';
+import { useWebEventHandlers } from './utils';
 import { Wrap, AnimatedWrap } from './Wrap';
 import { useDetectorUpdater } from './useDetectorUpdater';
 import { useViewRefHandler } from './useViewRefHandler';
 import { useMountReactions } from './useMountReactions';
+import { useIsomorphicLayoutEffect } from '../../../useIsomorphicLayoutEffect';
 
 function propagateDetectorConfig(
   props: GestureDetectorProps,

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

@@ -15,7 +15,7 @@ import { hoverGestureHandlerProps } from '../hoverGesture';
 import { nativeViewGestureHandlerProps } from '../../NativeViewGestureHandler';
 import { baseGestureHandlerWithDetectorProps } from '../../gestureHandlerCommon';
 import { RNRenderer } from '../../../RNRenderer';
-import React, { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Reanimated } from '../reanimatedWrapper';
 import { onGestureHandlerEvent } from '../eventReceiver';
 import {
@@ -186,21 +186,3 @@ export function useWebEventHandlers() {
     },
   });
 }
-
-// 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;

packages/react-native-gesture-handler/src/useIsomorphicLayoutEffect.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+// 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;