React Native app mysteriously freezes after dismissing a modal or action sheet

Question

I'm experiencing an issue where every time I dismiss a modal, action sheet, or Alert in our React Native app, the app completely freezes and can't be interacted with.

Navigating to a new stack or clicking buttons doesn't repro.

I have to kill the app and restart to interact again. Reloading the app via the packager does not help.

We have code that automatically shows a new modal when one is dismissed and that actually works - the modal is interactable. So it seems that only underlying content is frozen, as if there's still a modal over the top but it's invisible.

The crazy thing is that this is reproing in previous known good branches. So something must have changed with local config/cache, but I can't figure out what. I've re-cloned the repo, cleared the watchman/packager/yarn caches, wiped the simulator of all data. Nothing is fixing the issue.

There are also no logs in the packager, xcode, or Flipper indicating what might be going wrong.

Using react-native-modal, @expo/react-native-action-sheet, and built-in React Native Alert (not using general Expo framework though). I've upgraded these libraries to the latest version.

Running out of ideas. Where else can I look here?

---

Update: Super-minimal code repros. This modal auto-shows, auto-dismisses, and then the button is unpressable. Removing the modal from the code makes the button pressable.

function TestApp() {
  const [isVisible, setVisible] = useState(true);
  return (
    <>
      <TouchableOpacity style={{ padding: 80 }} delayPressIn={0}>
        <Text>Touch</Text>
      </TouchableOpacity>
      <Modal isVisible={isVisible} onShow={() => setVisible(false)}>
        <Text>Foo</Text>
      </Modal>
    </>
  );
}

The same happens if I add a minimal alert call instead of a modal. In this case I show another alert after 5 seconds which is interactable. Only popovers are interactable - e.g. alerts and modals.

  useEffect(() => Alert.alert("alert"), []);
  useEffect(() => {
    setTimeout(() => Alert.alert("5s alert"), 5000);
  }, []);

Update #2

It looks like each new "popover" style UI makes any previous UI un-interactable.

If I dismiss the first Alert as above, then I can't interact with the underlying TouchableOpacity, but I can interact with the second (5-second) Alert.

However if I do not dismiss the first Alert and the second Alert pops over, I can only dismiss the second alert and not interact with the first alert which remains frozen.

Answer 1

For me the freezing happens only when Flipper layout plugin is active for my app. Disabled the layout plugin, restarted Flipper, restarted my app and the freezing problem was gone.