Gesture handler is already enabled for a parent view

[johsan32]

[GESTURE HANDLER] Gesture handler is already enabled for a parent view

"react-native-gesture-handler": "^3.0.1",
"react-native-reanimated": "^4.4.1",
"react-native-reanimated-carousel": "^4.0.3",
"react-native-worklets": "^0.9.2",

Describe the bug
A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• react: v0.0.0
• react-native: v0.0.0
• react-native-reanimated: v0.0.0
• react-native-reanimated-carousel: v0.0.0
• react-native-gesture-handler: v0.0.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[dosubot]

Hi @johsan32! I'm Dosu and I'm helping the Caspian's Workspace team.

This warning occurs because react-native-reanimated-carousel internally wraps its content with a GestureHandlerRootView [1]. When your app also has a GestureHandlerRootView at a higher level (as recommended by the react-native-gesture-handler docs), you end up with nested instances, which triggers the warning.

The component hierarchy looks like:

Your App
  └─ GestureHandlerRootView (your app root)
       └─ Carousel
            └─ GestureHandlerRootView (carousel's internal wrapper) ← causes the warning
                 └─ gesture handlers

Workarounds:

1. Accept the warning – it appears to be cosmetic and shouldn't affect carousel functionality in most cases.
2. Remove the outer GestureHandlerRootView – only if the carousel is the sole component in that tree relying on gesture handling (not usually practical for full apps).

There's currently no conditional logic in the carousel to skip its internal GestureHandlerRootView when one already exists in a parent. This could be a potential improvement for the library.

Could you confirm whether the warning is causing any actual functional issues (e.g., gestures not working, crashes), or is it just a console warning?

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[johsan32]

@dosu
export default function App() {

return (
<GestureHandlerRootView style={{ flex: 1 }}>








); import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import { useSharedValue } from 'react-native-reanimated';
import Carousel from 'react-native-reanimated-carousel';
import { useWindowDimensions } from 'react-native';

const DATA = [
{ id: '1', title: 'Slide One', color: '#FF6B6B' },
{ id: '2', title: 'Slide Two', color: '#4ECDC4' },
{ id: '3', title: 'Slide Three', color: '#45B6FE' },
];

export default function WordCarousel() {
const progress = useSharedValue(0);
const { width, height } = useWindowDimensions();
const renderItem = ({ item }) => {
return (
<View
style={{
flex: 1,
backgroundColor: item.color,
borderRadius: 16,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 22, fontWeight: 'bold' }}>
{item.title}


);
};

return (
<>
<Carousel
key={width}
autoPlayInterval={2000}
data={DATA}
loop={true}
pagingEnabled={true}
snapEnabled={true}
width={width}
height={400}
mode="parallax"
modeConfig={{
parallaxScrollingScale: 0.9,
parallaxScrollingOffset: 50,
}}
onProgressChange={(offsetProgress, absoluteProgress) => {
progress.value = absoluteProgress;
}}
renderItem={renderItem}
/>
</>
);
}
Hi,

I'm experiencing an issue with react-native-reanimated-carousel in parallax mode.

When I navigate to a screen containing the carousel for the first time, the carousel appears correctly but cannot be swiped. The parallax animation is not working and the carousel feels "frozen".

At the same moment, I see the following log:

[GESTURE HANDLER] Initialize gesture handler for root view com.facebook.react.runtime.ReactSurfaceView{...}

[GESTURE HANDLER] Gesture handler is already enabled for a parent view

Interestingly, if I leave the screen and come back (or trigger a remount), the carousel starts working normally.

Environment
"react-native": "0.86.0",
"react-native-gesture-handler": "^3.0.1",
"react-native-reanimated-carousel": "^4.0.3",
"react-native-reanimated": "^4.4.1",
"react-native-worklets": "^0.9.2",
and babl.config module.exports = {
presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
plugins: ['react-native-worklets/plugin'],
};
Additional Notes
GestureHandlerRootView is already placed at the app root.
The warning appears only when entering the screen.
After navigating away and returning, the carousel works correctly.
Other screens and gestures work normally.
The issue seems related to the initial mount or gesture initialization.

Is this a known issue with parallax mode or gesture initialization on first render?

Thanks.

[dosubot]

Hi @johsan32, this is a documented issue related to how the carousel initializes gestures and layout when navigating to a screen for the first time — particularly with navigation libraries that use screen freezing (freezeOnBlur). The carousel depends on onLayout events for dimension calculations, and these can fail to fire properly on initial mount in some navigation setups [1].

The most effective workaround is to conditionally render the carousel using useFocusEffect, which forces it to mount fresh each time the screen gains focus:

import { useFocusEffect } from '@react-navigation/native';
import { useState, useCallback } from 'react';

export default function WordCarousel() {
  const [isCarouselVisible, setIsCarouselVisible] = useState(false);
  const { width } = useWindowDimensions();

  useFocusEffect(
    useCallback(() => {
      setIsCarouselVisible(true);
      return () => setIsCarouselVisible(false);
    }, [])
  );

  if (!isCarouselVisible) return null;

  return (
    <Carousel
      // ...your props
      width={width}
      height={400}
      mode="parallax"
      // etc.
    />
  );
}

This was confirmed to resolve the frozen carousel issue [1] [2].

Additionally, you might want to consider upgrading to v5.0.0-beta of react-native-reanimated-carousel, which includes fixes for Reanimated v4 compatibility and navigation-related initialization problems [1].

Regarding the nested GestureHandlerRootView warning — since you already have it at your app root, the carousel's own internal GestureHandlerRootView creates a duplicate. This warning is likely cosmetic, but the gesture initialization timing on first mount is the real culprit behind the frozen behavior.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[johsan32]

@dosu I wanted to share a workaround that resolved the issue on my side.

I was using @react-navigation/native-stack (^7.17.3) and the carousel became completely frozen: swiping did not work, next() calls had no effect, and onSnapToItem always stayed at index 0.

After replacing Native Stack with the regular Stack Navigator (@react-navigation/stack ^7.10.5), the problem disappeared and the carousel started working normally again.

Current versions:

{
"@react-navigation/native-stack": "^7.17.3",
"@react-navigation/stack": "^7.10.5",
"react-native-reanimated-carousel": "^4.0.3",
"react-native-reanimated": "^4.4.1",
"react-native-gesture-handler": "^3.0.2"
}

This may indicate an interaction issue between react-native-reanimated-carousel and @react-navigation/native-stack in my setup. Switching to @react-navigation/stack resolved the frozen carousel behavior.

[dosubot]

Thanks for sharing this workaround, @johsan32! This is helpful context for others encountering the same issue.

The difference between @react-navigation/native-stack and @react-navigation/stack is relevant here — native-stack uses native navigation primitives (like UINavigationController on iOS and Fragment on Android), which handle screen lifecycle and transitions differently. Notably, native-stack uses freezeOnBlur by default, which can prevent onLayout events from firing correctly when screens are mounted or refocused. This interferes with the carousel's gesture and dimension initialization [1].

The regular @react-navigation/stack uses a JS-based navigation approach that doesn't freeze screens in the same way, which is why the carousel initializes correctly there.

If you'd prefer to keep using native-stack, the useFocusEffect workaround from my earlier comment (conditionally rendering the carousel on screen focus) should also work without requiring a navigator change. But switching to @react-navigation/stack is a perfectly valid solution too — thanks for confirming it resolves the issue!

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.