[v3] iOS SIGABRT crash: RNGestureHandlerRegistry tries to attach already-dropped handler during pager-view teardown (Fabric / New Architecture)

[petrikjan]

Description

When navigating back from a screen that contains react-native-pager-view (via @react-navigation/material-top-tabs) with gesture handlers registered by child components (e.g. react-native-draggable-flatlist), the app crashes with SIGABRT on iOS.

The crash occurs in RNGestureHandlerRegistry.m inside attachHandlerWithTag:toView:withActionType:withHostDetector:. During the pager-view teardown, UIKit reshuffles the view hierarchy, which triggers RNGestureHandlerDetector.willMoveToWindow:. When the detector's view is temporarily re-added to a window during teardown, the willMoveToWindow: handler tries to re-attach gesture handlers that have already been dropped from the registry, resulting in a crash.

In RNGH v2 this code path did not exist — RNGestureHandlerDetector is new in v3.

Exception Type:  EXC_CRASH (SIGABRT)
Exception Codes: 0x0000000000000000, 0x0000000000000000
Termination Reason: SIGNAL 6 Abort trap: 6

Thread 0 Crashed:
...
4  RNGestureHandler  -[RNGestureHandlerRegistry attachHandlerWithTag:toView:withActionType:withHostDetector:]
                     (RNGestureHandlerRegistry.m:41)
5  RNGestureHandler  -[RNGestureHandlerDetector attachHandlers:actionType:viewTag:attachedHandlers:]
6  RNGestureHandler  -[RNGestureHandlerDetector willMoveToWindow:]
7  UIKitCore          -[UIView(Hierarchy) _willMoveToWindow:withAncestorView:]
...
13 PagerView         -[RCTPagerViewComponentView unmountChildComponentView:index:]
14 PagerView         -[RCTPagerViewComponentView goTo:animated:]
15 PagerView         -[RCTPagerViewComponentView setPagerViewControllers]

Root cause analysis
In RNGestureHandlerDetector.mm, the willMoveToWindow: method (line ~46) is called when UIKit moves views between windows during teardown. When newWindow != nil (view temporarily re-entering a window), the detector calls attachHandlers:actionType:viewTag:attachedHandlers:, which calls RNGestureHandlerRegistry.attachHandlerWithTag:toView:withActionType:withHostDetector:.

At this point, the gesture handlers referenced by props.handlerTags have already been dropped from the _handlers dictionary via dropHandlerWithTag:, so the lookup returns nil. In the original code, this triggered an RCTAssert that caused the SIGABRT.

Note: PR #3247 fixed a similar issue in RNGestureHandlerManager.mm for the dispatch_after retry path (StrictMode), but did not fix this separate code path in RNGestureHandlerRegistry.m / RNGestureHandlerDetector.mm.

Workaround
Replace the RCTAssert in RNGestureHandlerRegistry.m attachHandlerWithTag:toView:withActionType:withHostDetector: with a nil-check + early return:

- (void)attachHandlerWithTag:(NSNumber *)handlerTag
                      toView:(RNGHUIView *)view
              withActionType:(RNGestureHandlerActionType)actionType
            withHostDetector:(nullable RNGHUIView *)hostDetector
{
  RNGestureHandler *handler = _handlers[handlerTag];
  if (handler == nil) {
    return;  // Handler was already dropped — safe to skip
  }
  // ... rest of method
}

Steps to reproduce

1. Create a screen using createMaterialTopTabNavigator (backed by react-native-pager-view)
2. In one of the tab screens, use a component that registers gesture handlers (e.g. react-native-draggable-flatlist or any GestureDetector)
3. Navigate to this screen
4. Press back / navigate away from the screen
5. App crashes with SIGABRT

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

Gesture Handler version

3.0.0-beta.2

React Native version

0.84.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug. section.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[m-bert]

Hi @petrikjan! Could you provide reproducible example for this crash? I've used the code provided below, but it didn't crash as it supposed to (at least on main branch)

Test code

import React from 'react';
import { Text, StyleSheet, View, Pressable, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {
  GestureDetector,
  GestureHandlerRootView,
  usePanGesture,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';

const Stack = createNativeStackNavigator();
const Tab = createMaterialTopTabNavigator();

function DraggableItem({ label }: { label: string }) {
  const translateY = useSharedValue(0);
  const context = useSharedValue(0);

  const pan = usePanGesture({
    onActivate: () => {
      context.value = translateY.value;
    },
    onUpdate: (e) => {
      translateY.value = context.value + e.translationY;
    },
    onDeactivate: () => {
      translateY.value = withSpring(0);
    },
  });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.draggableItem, animatedStyle]}>
        <Text style={styles.itemText}>{label}</Text>
      </Animated.View>
    </GestureDetector>
  );
}

function TabWithGestures() {
  const data = Array.from({ length: 20 }, (_, i) => ({
    key: String(i),
    label: `Draggable Item ${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <DraggableItem label={item.label} />}
      contentContainerStyle={styles.listContent}
    />
  );
}

function TabPlain() {
  return (
    <View style={styles.tabContent}>
      <Text>Plain tab (no gestures)</Text>
    </View>
  );
}

function PagerScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Gestures" component={TabWithGestures} />
      <Tab.Screen name="Plain" component={TabPlain} />
    </Tab.Navigator>
  );
}

function HomeScreen({ navigation }: { navigation: any }) {
  return (
    <View style={styles.center}>
      <Text style={styles.instructions}>
        1. Tap the button to go to the Pager screen{'\n'}
        2. Scroll / drag items in the "Gestures" tab{'\n'}
        3. Navigate back{'\n'}
        4. App should crash with SIGABRT on iOS
      </Text>
      <Pressable
        style={styles.button}
        onPress={() => navigation.navigate('Pager')}>
        <Text style={styles.buttonText}>Go to Pager Screen</Text>
      </Pressable>
    </View>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Pager" component={PagerScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  instructions: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 30,
    lineHeight: 24,
  },
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 24,
    paddingVertical: 14,
    borderRadius: 8,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  tabContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  listContent: {
    padding: 16,
  },
  draggableItem: {
    backgroundColor: '#e0e0e0',
    padding: 16,
    marginVertical: 4,
    borderRadius: 8,
  },
  itemText: {
    fontSize: 16,
  },
});