[iOS][Fabric] Crash in YogaLayoutableShadowNode / RNSScreenShadowNode when visible content changes after closing overlay

[admcodemize]

Current behavior

On iOS with Fabric / New Architecture enabled, the app crashes with a native SIGABRT when a visible piece of UI inside a screen managed by react-native-screens re-renders after closing a custom overlay/dropdown.

The native crash consistently points to:

• facebook::react::YogaLayoutableShadowNode::layout(...)
• facebook::react::RNSScreenShadowNode::layout(...)

This does not look like a JS exception or business-logic issue. It appears to be a native layout crash triggered by a dynamic content update inside a screen.

Reproduction pattern

I was able to isolate the behavior quite a bit:

• A single-select dropdown works fine.
• A multi-select dropdown closes fine as long as no visible trigger content changes afterwards.
• If the trigger button updates a visible count/text after closing the dropdown, the app crashes.
• If I only update invisible internal data, the app does not crash.
• If I move the count from local state to parent props, it still crashes.
• Even Fast Refresh / editing the button component can trigger the same crash if the visible content changes.

So the key trigger is not the selection logic itself, but a visible re-render/layout change of the trigger inside a screen tree after closing the dropdown.

Environment

• Expo: 55.0.6
• React Native: 0.83.2
• React: 19.2.0
• react-native-screens: 4.23.0
• Hermes: enabled
• Architecture: Fabric / New Architecture
• Platform: iOS Simulator

Crash stack

The crash consistently includes frames like:

• facebook::react::YogaLayoutableShadowNode::layout(...)
• facebook::react::RNSScreenShadowNode::layout(...)
• facebook::react::UIManager::completeSurface(...)

Example:

Exception Type: EXC_CRASH (SIGABRT)
Triggered by Thread: com.facebook.react.runtime.JavaScript

facebook::react::YogaLayoutableShadowNode::layout(...)
facebook::react::RNSScreenShadowNode::layout(...) (RNSScreenShadowNode.cpp:122)
facebook::react::UIManager::completeSurface(...)

What I tested
I tried all of the following:

removing animations
using plain Text instead of animated text
delaying the state update
moving the state from local state to parent props
updating only internal item state
closing the dropdown without updating visible content
Result:

close() only: stable
visible content update after close: crash
local state vs props: same outcome
Why I think this belongs here
This seems very similar to other Fabric + iOS + react-native-screens dynamic layout issues, especially around re-renders and layout updates inside screen trees.

It feels like the trigger is:

close overlay/dropdown
visible content inside screen changes
Fabric layout commit runs
native crash in Yoga / RNSScreenShadowNode layout
Minimal conceptual repro
I don't have a public repro yet, but the minimal pattern is roughly:

screen managed by react-native-screens
custom overlay/dropdown rendered above screen content
closing overlay
immediately or shortly after, a visible child inside the trigger button changes text/count
native crash in YogaLayoutableShadowNode / RNSScreenShadowNode
If needed, I can try to build a reduced repro.

[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?

[github-actions]

Hey! 👋

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

Please complete Description, Steps to reproduce, Snack or a link to a repository, Screens version, React Native version and Platforms sections.

[kligarski]

Hi, @admcodemize. Thank you for reporting the issue. Unfortunately, with limited information about when the bug happens and without a minimal reproduction example we won't be able to help.

I tried this example based on your description but the issue is not reproducible.

Tested app

import React, { useState, useCallback, useRef } from 'react';
import { View, Text, TouchableOpacity, Modal, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
const OPTIONS = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];

function MultiSelect() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState<string[]>([]);
  const pending = useRef<string[]>([]);

  const handleOpen = useCallback(() => {
    pending.current = [...selected];
    setOpen(true);
  }, [selected]);

  const toggleItem = useCallback((item: string) => {
    const cur = pending.current;
    pending.current = cur.includes(item)
      ? cur.filter(i => i !== item)
      : [...cur, item];
  }, []);

  const handleDone = useCallback(() => {
    setSelected(pending.current);
    setOpen(false);
  }, []);

  return (
    <View style={{ alignItems: 'center', marginTop: 40 }}>
      <TouchableOpacity
        onPress={handleOpen}
        style={{ padding: 16, backgroundColor: '#007AFF', borderRadius: 8 }}>
        <Text style={{ color: '#fff', fontSize: 16 }}>
          Selected: {selected.length}
        </Text>
      </TouchableOpacity>

      <Modal visible={open} transparent animationType="none">
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0,0,0,0.3)',
          }}>
          <View
            style={{
              backgroundColor: '#fff',
              borderRadius: 8,
              padding: 16,
              width: 240,
            }}>
            <FlatList
              data={OPTIONS}
              keyExtractor={i => i}
              renderItem={({ item }) => (
                <TouchableOpacity
                  onPress={() => toggleItem(item)}
                  style={{ paddingVertical: 10 }}>
                  <Text>{item}</Text>
                </TouchableOpacity>
              )}
            />
            <TouchableOpacity
              onPress={handleDone}
              style={{
                marginTop: 8,
                padding: 12,
                backgroundColor: '#007AFF',
                borderRadius: 6,
                alignItems: 'center',
              }}>
              <Text style={{ color: '#fff' }}>Done</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

function HomeScreen() {
  return <MultiSelect />;
}

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

Please provide a minimal reproduction example so that we can investigate the issue. Additionally, we would appreciate if you can provide a video of the bug and full crash logs.