react-native: Modal make iOS app freeze when visible

I am also facing the same issue.

For now, the only work around I see here is, if platform is iOS then set modal’s visibility flag after some finite delay, say 1000ms, using setTimeout else simply set modal’s visibility without any delay.

In my use case, I am using react-navigation 4x, react-native-reanimated v1.x on react-native 0.64.x. I was trying to show modal as soon as my parent component is mounted based on some conditions and it was react-navigation’s transition animations conflicting the Modal animations causing my app to freeze.

Refer to the following code snippet and see if it helps.

const ModalWrapper = ({children}) => {
  const [isVisible, setVisible] = useState(false);
  useEffect(() => {
    setTimeout(() => {
      setVisible(true);
    }, Platform.OS === 'ios' ? 1000 : 0);
  }, []);
  return (
    <Modal visible={isVisible}>
      {children}
      <TouchableOpacity onPress={() => setVisible(false)}>
        <Text>Press me to dismiss</Text>
      </TouchableOpacity>
    </Modal>
  );
};

PS: I know this is a dirty workaround, if anybody found/finds a solution please quote a reply with it.

I have experienced this issue as well with react-native@0.66.2 and react-native-reanimated@1.9.0. Unfortunately, upgrading to react-native-reanimated@2.2.3 did not resolve the issue for me.

From my testing, my particular issue comes from usage of LayoutAnimation within my code. Related to https://github.com/facebook/react-native/issues/16182#issuecomment-333814201 and https://github.com/facebook/react-native/issues/16895, if a LayoutAnimation is not consumed, then it can cause RN modals to remain invisibly open even after closing one: https://github.com/facebook/react-native/issues/32329. I have been able to resolve some of the frozen modals within my app by limiting when LayoutAnimation is used in the app to avoid multiples LayoutAnimation.configureNext invocations occurring at the same time.

I am unsure why upgrading RN from 0.64 to 0.66 caused the invisible modal issue to become more prominent for my app.

1.- downgrading react-native-reanimated to 2.2.3 2.- cd ios && pod deintegrate 3.- pod install

this solved my problem

i faced this issue on expo SDK 47 while using Modal from ‘react-native’ (0.70.2), sadly nothing above has worked for me, i ended up using presentationStyle="fullScreen". Not the solution i wished to fined 😦

<Modal
    ....
    presentationStyle="fullScreen"
>

Just trying to solve this ourselves and see other related issues that aren’t linked here yet for the curious:

• https://github.com/facebook/react-native/issues/32329
• https://github.com/facebook/react-native/pull/32450

It took me several hours for me to realise that. Thanks god I’m not the only one 😃

Still an issue on “react-native-reanimated”: “2.2.4” and “react-native”: “0.66.3”

Temporarily fix for me was to change Reanimated 2.3.0@beta_1 to Reanimated 2.2.4. Further reading with similar problem (crash instead of freeze): https://githubmemory.com/repo/react-native-modal/react-native-modal/issues/615. I noticed that if i used react natives Modal component it crashed, and when i used the react-native-modal packgage it freezed the screen after close.

My dependencies: “react-native”: “0.66.0”, “react-native-modal”: “^13.0.0”,