Description
When you remove children from a Clickable component a crash will occur. This is the exact error:
Thread 1: "Attempt to unmount a view which has a different index. (parent: <RNGestureHandlerButton: 0x102199150; baseClass = UIControl; frame = (0 0; 393 34); layer = <CALayer: 0x600000dd7ea0>>, child: <RCTParagraphComponentView: 0x101909a60; frame = (0 34; 393 17); opaque = NO; tag = 42; layer = <CALayer: 0x600000dfc150>; attributedText = New child{\n EventEmitter = {length = 8, bytes = 0x1800720300600000};\n NSBackgroundColor = \"UIExtendedSRGBColorSpace 0 0 0 0\";\n NSColor = \"UIExtendedSRGBColorSpace 0 0 0 1\";\n NSFont = \"<UICTFont: 0x101add050> font-family: \\\".SFUI-Regular\\\"; font-weight: normal; font-style: normal; font-size: 14.00pt\";\n}>, index: 2, actual index: 1, tag at index: 14)"
Steps to reproduce
First add some children to the Clickable, then remove them. It will instantly cause a crash:
const [children, setChildren] = useState<React.ReactNode[]>([]);
return (
<View style={[styles.container, { marginTop: safeAreaInsets.top }]}>
<Clickable>
<Text>
Clickable
</Text>
{children.map((child, index) => (
<View key={index}>
{child}
</View>
))}
</Clickable>
<Pressable onPress={() => setChildren([...children, <Text key={children.length}>New child</Text>])}>
<Text>
Add child to Clickable
</Text>
</Pressable>
<Pressable onPress={() => setChildren(children.slice(0, -1))}>
<Text>
Remove child from Clickable
</Text>
</Pressable>
</View>
);
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://github.com/LeonDvlpmnt/ClickableReproducer
Gesture Handler version
3.0.0-nightly-20260403-d21f1dd91
React Native version
0.84.1
Platforms
iOS
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
New Architecture (Fabric)
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes
Description
When you remove children from a Clickable component a crash will occur. This is the exact error:
Thread 1: "Attempt to unmount a view which has a different index. (parent: <RNGestureHandlerButton: 0x102199150; baseClass = UIControl; frame = (0 0; 393 34); layer = <CALayer: 0x600000dd7ea0>>, child: <RCTParagraphComponentView: 0x101909a60; frame = (0 34; 393 17); opaque = NO; tag = 42; layer = <CALayer: 0x600000dfc150>; attributedText = New child{\n EventEmitter = {length = 8, bytes = 0x1800720300600000};\n NSBackgroundColor = \"UIExtendedSRGBColorSpace 0 0 0 0\";\n NSColor = \"UIExtendedSRGBColorSpace 0 0 0 1\";\n NSFont = \"<UICTFont: 0x101add050> font-family: \\\".SFUI-Regular\\\"; font-weight: normal; font-style: normal; font-size: 14.00pt\";\n}>, index: 2, actual index: 1, tag at index: 14)"Steps to reproduce
First add some children to the Clickable, then remove them. It will instantly cause a crash:
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://github.com/LeonDvlpmnt/ClickableReproducer
Gesture Handler version
3.0.0-nightly-20260403-d21f1dd91
React Native version
0.84.1
Platforms
iOS
JavaScript runtime
Hermes
Workflow
React Native (without Expo)
Architecture
New Architecture (Fabric)
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes