useLayoutEffect error on the terminal

[deouws]

Description

λ ERROR Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.%s
GestureDetector (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector/index.js:76:47)
DraggableBox (app/index.tsx:14:35)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
onScroll (node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js:57:23)
ScrollView (node_modules/react-native-web/dist/exports/ScrollView/index.js:33:4)
Route (node_modules/expo-router/build/Route.js:52:17)
route (node_modules/expo-router/build/useScreens.js:128:4)
StaticContainer (node_modules/@react-navigation/core/lib/commonjs/StaticContainer.js:14:15)
EnsureSingleNavigator (node_modules/@react-navigation/core/lib/commonjs/EnsureSingleNavigator.js:19:2)
SceneView (node_modules/@react-navigation/core/lib/commonjs/SceneView.js:20:2)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
AnimatedHeaderHeightProvider (node_modules/@react-navigation/native-stack/lib/commonjs/views/NativeStackView.js:117:2)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
(node_modules/react-native-web/dist/vendor/react-native/Animated/createAnimatedComponent.js:25:44)
Background (node_modules/@react-navigation/elements/lib/commonjs/Background.js:14:2)
Screen (node_modules/@react-navigation/elements/lib/commonjs/Screen.js:19:69)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
SafeAreaProviderCompat (node_modules/@react-navigation/elements/lib/commonjs/SafeAreaProviderCompat.js:36:2)
NativeStackView (node_modules/@react-navigation/native-stack/lib/commonjs/views/NativeStackView.js:17:2)
PreventRemoveProvider (node_modules/@react-navigation/core/lib/commonjs/PreventRemoveProvider.js:38:2)
NavigationContent (node_modules/@react-navigation/core/lib/commonjs/useComponent.js:12:2)
children (node_modules/@react-navigation/core/lib/commonjs/useComponent.js:28:4)
NativeStackNavigator (node_modules/@react-navigation/native-stack/lib/commonjs/navigators/createNativeStackNavigator.js:14:2)
userDefinedChildren (node_modules/expo-router/build/layouts/withLayoutContext.js:75:62)
Route (node_modules/expo-router/build/Route.js:52:17)
route (node_modules/expo-router/build/useScreens.js:128:4)
hrefAttrs (node_modules/react-native-web/dist/exports/View/index.js:35:24)
NativeSafeAreaProvider (node_modules/react-native-safe-area-context/lib/commonjs/NativeSafeAreaProvider.web.js:29:2)
SafeAreaProvider (node_modules/react-native-safe-area-context/lib/commonjs/SafeAreaContext.js:28:2)
Html (node_modules/expo-router/build/static/html.js:23:16)
wrapper (node_modules/expo-router/build/static/renderStaticContent.js:66:24)
wrapper (node_modules/expo-router/build/ExpoRoot.js:53:23)
ThemeProvider (node_modules/@react-navigation/core/lib/commonjs/theming/ThemeProvider.js:13:2)
EnsureSingleNavigator (node_modules/@react-navigation/core/lib/commonjs/EnsureSingleNavigator.js:19:2)
BaseNavigationContainer (node_modules/@react-navigation/core/lib/commonjs/BaseNavigationContainer.js:79:2)
NavigationContainerInner (node_modules/expo-router/build/fork/NavigationContainer.js:32:36)
ContextNavigator (node_modules/expo-router/build/ExpoRoot.js:73:28)
ExpoRoot (node_modules/expo-router/build/ExpoRoot.js:47:29)
AppContainer (../shim:react-native-web/dist/exports/AppRegistry/AppContainer.js:4:24)
ServerContainer (node_modules/@react-navigation/native/lib/commonjs/ServerContainer.js:21:2)
λ Bundled 628ms node_modules/expo-router/node/render.js (874 modules)
Web Bundled 1268ms node_modules/expo-router/entry.js (983 modules)
Web Bundled 265ms node_modules/expo-router/entry.js (933 modules)
LOG [web] Logs will appear in the browser console

Steps to reproduce

https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/simple/draggable/index.tsx

The above code was used in react-native app

Snack or a link to a repository

https://github.com/deouws/testGesture.git

Gesture Handler version

2.21.2

React Native version

0.76.2

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[deouws]

https://snack.expo.dev/@deouws/frowning-yellow-bananas

[deouws]

Please have a look at the below repository
https://github.com/deouws/testGesture.git

[latekvo]

Hey, please let me know if this PR fixes this issue for you

[deouws]

Hello , what should be the step to test the fixes on https://github.com/deouws/testGesture.git. ?

Thank you