diff --git a/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx b/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx index 0a2c5f7e61..a419aa22cf 100644 --- a/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx +++ b/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/index.tsx @@ -13,11 +13,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, diff --git a/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts b/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts index ea728237ce..0bf2471311 100644 --- a/packages/react-native-gesture-handler/src/handlers/gestures/GestureDetector/utils.ts +++ b/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 React, { useCallback, useRef, useState } from 'react'; +import { useCallback, useRef, useState } from 'react'; import { Reanimated } from '../reanimatedWrapper'; import { onGestureHandlerEvent } from '../eventReceiver'; import { WebEventHandler } from './types'; @@ -185,21 +185,3 @@ 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; diff --git a/packages/react-native-gesture-handler/src/useIsomorphicLayoutEffect.tsx b/packages/react-native-gesture-handler/src/useIsomorphicLayoutEffect.tsx new file mode 100644 index 0000000000..0c22bca83b --- /dev/null +++ b/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;