[Bug] Carousel gestures permanently stop working after parent view toggles display: 'none'

[pepperboy-proground]

Describe the bug

When a Carousel is mounted inside a parent view that toggles between display: 'none' and display: 'flex' (e.g., tab-based navigation), the carousel's pan gesture becomes permanently unresponsive after the parent is hidden and shown again.

This is a regression introduced in 5.0.0-beta.3. The same setup works correctly in 5.0.0-beta.0.

Environment

• react-native-reanimated-carousel: 5.0.0-beta.3 (works on 5.0.0-beta.0)
• react-native-reanimated: 4.2.1
• react-native-gesture-handler: ^2.28.0
• react-native: 0.78
• Platform: iOS & Android

To Reproduce

1. Place a <Carousel> inside a view that toggles visibility via display: 'none' / display: 'flex'
2. Swipe the carousel — it works normally
3. Toggle the parent view to display: 'none' (e.g., switch to another tab)
4. Toggle it back to display: 'flex'
5. Try to swipe the carousel — gestures are completely unresponsive

Minimal reproduction

function TabScreen() {
  const [tab, setTab] = useState<'carousel' | 'other'>('carousel');

  return (
    <View>
      <Button title="Switch Tab" onPress={() => setTab(t => t === 'carousel' ? 'other' : 'carousel')} />

      {/* Carousel tab */}
      <View style={{ display: tab === 'carousel' ? 'flex' : 'none' }}>
        <Carousel
          width={screenWidth}
          height={200}
          data={items}
          renderItem={({ item }) => <Card item={item} />}
        />
      </View>

      {/* Other tab */}
      <View style={{ display: tab === 'other' ? 'flex' : 'none' }}>
        <Text>Other content</Text>
      </View>
    </View>
  );
}

Root Cause Analysis

The issue is in ScrollViewGesture.tsx. The sizeReady derived value and resolvedSize shared value are used as guards in all gesture callbacks (onGestureStart, onGestureUpdate, onGestureEnd, onGestureFinalize):

// ScrollViewGesture.tsx - line 82-85
const sizeReady = useDerivedValue(() => {
  const currentSize = resolvedSize.value ?? 0;
  return sizePhase.value === "ready" && currentSize > 0;
}, [resolvedSize, sizePhase]);

// ScrollViewGesture.tsx - line 306-314
const onGestureStart = useCallback((_) => {
  "worklet";
  const currentSize = resolvedSize.value ?? 0;
  if (!sizeReady.value || currentSize <= 0) {
    return; // <-- Gesture silently rejected!
  }
  // ...
}, [...]);

When display: 'none' is set on the parent:

1. The onLayout callback (line 495-518) fires with zero dimensions
2. However, when sizeExplicit is true (i.e., width prop is set), onLayout does NOT update resolvedSize (guarded at line 503)
3. Despite this, the underlying native GestureDetector gets detached from the gesture system when the view hierarchy is hidden

When display is set back to 'flex':
4. The GestureDetector's native handler may not properly re-attach to the gesture system
5. The measure(containerRef) call in getLimit() (line 94) may return null or zero dimensions because the native view's layout measurement is stale
6. All gesture events are silently dropped by the sizeReady / currentSize <= 0 guards

This did not happen in 5.0.0-beta.0 because the sizeReady / resolvedSize guard mechanism was added (or significantly changed) in beta.3.

Expected behavior

The carousel should resume responding to swipe gestures after its parent view becomes visible again (display: 'flex').

Workaround

Switching from display: 'none' to conditional rendering ({isVisible && <Carousel ... />}) resolves the issue, but this forces the carousel to unmount/remount on every tab switch, losing scroll position and triggering re-renders.

Another workaround is downgrading to 5.0.0-beta.0.

[dosubot]

Hi @pepperboy-proground! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

This is a confirmed regression in 5.0.0-beta.3, caused by new guards in the gesture logic that rely on internal size state (sizeReady and resolvedSize). When the parent view is hidden with display: 'none', the native gesture handler detaches and the layout reports zero size. If you use explicit width/height, the internal size state doesn't update on layout changes, so when the view is shown again, gestures remain blocked because the guards never reset—this matches your analysis and is supported by the current code and changelog.

There’s no programmatic way to force the carousel to recover gestures after toggling display; the only reliable workarounds are to unmount/remount the carousel (e.g., with conditional rendering) or downgrade to 5.0.0-beta.0. Both have trade-offs: unmounting loses scroll position and triggers re-renders, while downgrading loses recent fixes. This is a known architectural limitation with the current guard logic—no official fix or recommended pattern exists for toggling visibility with display: 'none' in this version.

If you need to preserve scroll position and avoid remounts, consider managing visibility at the navigation or screen level, or watch for future releases that may address this.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[dohooo]

Hi @pepperboy-proground, thanks for the detailed report.

I just released the latest version yesterday, react-native-reanimated-carousel@5.0.0-beta.4 (Feb 9, 2026). Could you please upgrade and test this issue again?

I couldn't reproduce this issue.

[dohooo]

I tried Android again, but I couldn't reproduce the issue on either platform, whether it's beta-0 or beta-3/4. I'm going to close this issue for now. If you can provide a stable repo to reproduce it, I'd be more than happy to help! Thank you.