React-native: Modal: Refresh (via dev menu) does not tear down

[pstanton]

Is this a bug report?

yes

Have you read the Contributing Guidelines?

kind of

Environment

Environment:
OS: Windows 10
Node: 9.0.0
Yarn: 1.3.2
npm: 5.5.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4408382

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.0 => 0.53.0

Target Platform: Android 7.0 on Samsung Galaxy S5

Steps to Reproduce

1. create app and launch with react-native run-android
2. trigger state which causes a modal to show
3. launch the dev menu (via shake or keycode)
4. select refresh

Expected Behavior

The app closes the modal and refreshes

Actual Behavior

The app presumably refreshes, but the modal stays on top and cannot be closed

Reproducible Demo

import React, { Component } from 'react';
import { Text, View, Button, Modal, StyleSheet } from 'react-native';

export default class MyComponent extends Component {
  state = {
    modalVisible: false,
  };

  openModal() {
    this.setState({modalVisible:true});
  }

  closeModal() {
    this.setState({modalVisible:false});
  }

  render() {
    return (
        <View style={styles.container}>
          <Modal
              visible={this.state.modalVisible}
              animationType={'slide'}
              onRequestClose={() => this.closeModal()}
          >
            <View style={styles.modalContainer}>
              <View style={styles.innerContainer}>
                <Text>This is content inside of modal component</Text>
                <Button
                    onPress={() => this.closeModal()}
                    title="Close modal"
                >
                </Button>
              </View>
            </View>
          </Modal>
          <Button
              onPress={() => this.openModal()}
              title="Open modal"
          />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'grey',
  },
  innerContainer: {
    alignItems: 'center',
  },
});

[allpwrfulroot]

Seeing in iOS as well. Adding a state change to take the modal down in componentWillUnmount does nothing

[scottmas]

I can confirm this is happening on both Android and iOS on RN 54

[MrLoh]

Is there any workaround? This also affects programmatic restarting on codepush updates for example.

[hanselsen]

I too wish there was a solution for this

[react-native-bot]

It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

[pstanton]

still an issue in react-native 0.55.4

[ilovett]

This is pretty awful for developing against, but it is still possible to use the modal, so long as you close it before you reload the app.

This means you must have a way of closing the modal from the modal itself (IE: a close button), and you must close it before the app reloads... you should also disable live reload and hot reload.

[micalm]

Can confirm this still happens on 0.55.4, both on a physical Xiaomi Redmi Note 4 (Android 7.0/MIUI Global 9.5) and an emulated API 23 device.

[jamesone]

Can confirm this is happening on Android and iOS using react-native 0.55.4

[theapache64]

"react-native": "0.55.4" contains this bug. CONFIRMED!

[lefrankleal]

@jjercx not working for me :/

[victorvhpg]

"react-native": "0.55.4"
this is happening here :(

[Montaguti]

Still presenting this behavior on "react-native": "0.55.4"

[MarcelZOI]

same here.
react-native: "0.55.4"
any news?
it is really annoying to always pay attention before reloading that all modals are closed

[Thyoity]

Yes, this is annoying... Same thing happening here...

[PiotrKujawa]

I guess here's the fix https://github.com/facebook/react-native/commit/e5c2a66 and will be available in 0.56

[gwidener]

That fix is also in 0.55.4, and the problem remains (Android emulation at least). It's a blocker for hot/live reloading, therefore for any decent development environment. Can't use this package until it's fixed.

[gwidener]

The above workaround doesn't work. The only workaround I've found is to auto-close the Modal in the dev build after 7 seconds, otherwise it's too easy to hang it. Once it was hung so bad that I had to cold-boot the emulator. This is a must-fix! Note it affects all Modals based on the RN Modal.

[chadhobson]

So.... what's the workaround here? This issue is 6 months old and its still happening on 56.0.

[george-steel]

I can also confirm this still happens on 0.56.

[sunnylqm]

ping @mdvacca @kelset

[emech-en]

I have the same problem.

"react-native": "0.56.0"

[itbeauregard]

Our project just updated from RN 0.50 to 0.56. I can confirm that this has become a frustrating new issue for our app.

[ayoubgdah]

Still occurring in 0.56

[mjmasn]

Still occurring in 0.57.0

  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
      CPU: x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
      Memory: 204.00 MB / 15.54 GB
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 8.11.0 - ~/.nvm/versions/node/v8.11.0/bin/node
      Yarn: 1.9.4 - /usr/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
        API Levels: 16, 19, 22, 23, 26, 27, 28
    IDEs:
      Android Studio: 3.1 AI-173.4907809
    npmPackages:
      react: ^16.5.0 => 16.5.1 
      react-native: 0.57.0 => 0.57.0 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[devpro9219]

I have confirmed .54, .55 , .56.
Still has this issues.

[gaguirre]

I think this issue is more likely related to the Modal itself than the Dev Menu, so the solution should be addressed in the former.

However, what was really pissing me off right now was the Dev Menu so I've managed to workaround that specific issue touching some lines.
It's not a solution by any means and it works in iOS only, but may be helpful for someone else.

In the RCTDevMenu.m file, change the toggle method to

- (void)toggle
{
  UIViewController* presentedViewController = RCTPresentedViewController();
  if (_actionSheet) {
    [_actionSheet dismissViewControllerAnimated:YES completion:^(void){}];
    _actionSheet = nil;
  } else if ([presentedViewController class] == NSClassFromString(@"RCTModalHostViewController")) {
    [a dismissViewControllerAnimated:false completion:^{
      [self show];
    }];
  } else {
    [self show];
  }
}

This way, if a modal is present, it will be closed before opening the Dev Menu.

[barghi]

I have this issue in react native 0.57.2

[khuramdogar]

I also have this issue in 0.57.2. What should we use as alternative

[george-steel]

@khuramdogar I'm using react-native-navigation, which implements modals as well as a few other forms of navigation. It does not have this problem since it has its own native implementation. I started using it due to this specific bug.

[SiSa68]

Still have this issue in RN 0.57.4
Why?!!

[khuramdogar]

No Issue is resolved thanks for asking

On Tue, 6 Nov 2018 at 5:23 PM, Siyamak Fazleelahi [e-mail]
wrote:

Still have this issue in RN 0.57.4
Why?!!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/17986#issuecomment-436234077,
or mute the thread
https://github.com/notifications/unsubscribe-auth/API8yb4jsFVHHdOB001pbw3cjaAjpoJoks5usX9bgaJpZM4SGTWt
.

[solkaz]

I am still seeing this issue as of 0.57.1 (Android only, iOS will tears it down properly)

[ericwooley]

I wrote this and it solves my issue on android, haven't tried on ios yet.

import React from 'react'
import { Modal } from 'react-native'
type ExtractProps<
  TComponentOrTProps
> = TComponentOrTProps extends React.Component<infer TProps, any>
  ? TProps
  : TComponentOrTProps

export class UnMountingModal extends React.PureComponent<
  ExtractProps<Modal>,
  { mounted: boolean }
> {
  public state = { mounted: false }
  public componentDidMount() {
    this.setState({ mounted: true })
  }
  public componentWillUnmount() {
    this.setState({ mounted: false })
  }
  public render() {
    return (
      <Modal {...this.props} visible={this.state.mounted && this.props.visible}>
        {this.props.children}
      </Modal>
    )
  }
}

EDIT: this actually only appears to work on hot reaload, which is how i dev.

[tmswartz12]

Still having this issue! has anyone seen a solution?

[choo737]

Still having this issue here, RN0.55.4

[sunnylqm]

@PiotrKujawa Actually the pr you mentioned is not the fix, but the cause!

The root cause is the removal of this line

  public void onHostPause() {     
-    // We dismiss the dialog and reconstitute it onHostResume
-    dismiss(); 
  }

When we do reload, actually we do a pause, so the dismiss() in onHostPause() can be triggered. But since this pr merged into 0.53, there was no dismiss anymore. This bug emerged since then.

After adding that line back, now the modal can tear down normally

@mdvacca Could you recall why you removed this line? I could not see how that was related to Modal not disappearing when navigating to another activity? Do you expect the modal should persist when navigation to another activity?

[sunnylqm]

TL;DR

No easy fix right now cause there is no proper mechanism to manage modals. And basically not worth the work to refactor the architecture only for this issue.

---

Ideally, modal should be notified when ReactContext was tear down. The current flow only deal with main rootviews and pure native modules, but modal was a non typical rootview, neither recorded in ReactInstanceManager nor in NativeModuleRegistry, so it is forgotten in the between.
Actually some other native modules also forgot to handle instance destroyed event, like Alert(DialogModule). If you enable live reload and fire an alert action, then modify the source code, you can see the Alert window also hang on the screen after reload. (It is a pure native module and can override on react instance destroyed event but it forgot)
@shergin Curious that has the new architecture considered these situations? IMHO,

1. the react instance events should be notified to viewmanagers as well, or,
2. there should be another list to manage special views outside of main rootviews in instance manager

[sunnylqm]

For now, I suggest using a js modal like react-native-root-modal instead of this one as a workaround.

[rogueturnip]

This bug has persisted through multiple RN releases. Is there anything being done to address it? It's a major problem for apps that use hot reloading for JS updates (ie MS Codepush).

[noahtallen]

Confirming this is still an issue on the latest release, 0.57.8. Though the issue is very apparent when hot-reloading, it's also still an issue with any sort of reload while the modal is open.

[LRNZ09]

I'm also confirming this is still an issue on 0.57.8

[Brad19]

I'm confirming it as well on 0.57.8. Could someone pls advise as our App is likely to get this issue soon and might impact customers once one of the features for the modal goes live.

[rogueturnip]

I'm baffled why this is still an issue. Anyone have a work around as our app ends up frozen if we do a bundle update and a modal is open.

[george-steel]

@rogueturnip I'm using react-native-navigation for this is it replaces the native initialization and teardown routines with ones that handle modals correctly.

[rogueturnip]

@george-steel Thanks for this!

[NahaseanNjenga]

Does anyone have a concrete solution for this? Am using RN 0.58.3

[rafaelfndev]

Still an issue on react-native 0.59.3

[cdesch]

(The issue is present in Expo SDK v32.0.0 which is based on RN 0.57)

[nishantWM]

still facing this issue. Any updates ?

[saddacracker]

On emulator refresh, it appears it rendering a duplicate modal. I have to close the app in the emulator and relaunch to work around this.

[HVCode]

On emulator refresh, it appears it rendering a duplicate modal. I have to close the app in the emulator and relaunch to work around this.

same here, "react-native": "0.59.8",

[Normence]

Still exists now!

[xXFracXx]

Still an issue.

[nishantWM]

@PiotrKujawa Actually the pr you mentioned is not the fix, but the cause!

The root cause is the removal of this line

  public void onHostPause() {   
-    // We dismiss the dialog and reconstitute it onHostResume
-    dismiss();   
  }

When we do reload, actually we do a pause, so the dismiss() in onHostPause() can be triggered. But since this pr merged into 0.53, there was no dismiss anymore. This bug emerged since then.

@mdvacca Could you recall why you removed this line? I could not see how that was related to Modal not disappearing when navigating to another activity? Do you expect the modal should persist when navigation to another activity?

Adding this line helps. Any ideas why this is required?

[rajatgng]

please then somwone tell how to fix it

[AmruthPillai]

Is there no way to fix this? Still an issue :(

[Inovassist-dev]

Are you guys kidding that, after so many RN versions and month since this issue was open, nobody made a fix?

[EhsanSarshar]

you can set the visibility of modal to false in component life cycle methods

[xydian]

@EhsanSarshar its not that easy unfortunately, read the entire thread for details

[malvinder]

Confirming, still an issue in RN 0.60.4

[abdrmdn]

Confirming, still an issue in RN 0.60.4

[syntax-e]

We're running into this issue as well.

[acoutts]

I just upgraded to 0.61.2 and the new fast refresh feature doesn't have this issue. Curious if anyone else can confirm as well.

Nevermind it's definitely still an issue even with fast refresh.

[danielkv]

No solution for this yet?

[jedashford]

This is also an issue for those of us using codepush. When the app refreshes the js bundle, the previous state modal still shows and completely locks the app.

[vjsingh]

Very frustrating, even more so if you don't know what's causing it. Appears to happen when I have nested Modals. Closing the first modal without closing the second (nested) modal also makes the simulator freeze.

[hongdung6992]

Confirming, still an issue in RN 0.61.5
23/12/2019

[sunnylqm]

@hongdung6992 The fix will land on 0.62-rc1

[finntenzor]

A compatibility way to fix this problem if you have to use RN 0.60~0.61.(At least work for me)

Extend the ReactModalHostView and override the onHostPause method. Then use the new class instead of origin one. You may have to copy many Java files and js files from source code.

// Fix the ReactModalHostView
public class ReactModalHostFixedView extends ReactModalHostView {
    private Method dismissMethod;

    public ReactModalHostFixedView(Context context) {
        super(context);
    }

    @Override
    public void onHostPause() {
        super.onHostPause();
        Method dismiss = this.getDismissMethod();
        try {
            dismiss.invoke(this);
        } catch (InvocationTargetException e) {
            Log.e("Demo", "Cant invoke dismiss(InvocationTargetException )");
        } catch (IllegalAccessException e) {
            Log.e("Demo", "Cant invoke dismiss(IllegalAccessException )");
        }
    }

    protected Method getDismissMethod() {
        if (dismissMethod == null) {
            try {
                Method dismiss = ReactModalHostView.class.getDeclaredMethod("dismiss");
                dismiss.setAccessible(true);
                dismissMethod = dismiss;
            } catch (NoSuchMethodException e) {
                Log.e("Demo", "No dismiss method");
            }
        }
        return dismissMethod;
    }
}

// Fix the ReactModalHostManager 
public class ReactModalHostFixedManager extends ReactModalHostManager {
    public static final String REACT_CLASS = "RCTModalHostFixedView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    protected ReactModalHostView createViewInstance(ThemedReactContext reactContext) {
        return new ReactModalHostFixedView(reactContext);
    }
}

// Create you own package and register it in "MainApplication.java"
// See https://facebook.github.io/react-native/docs/native-components-android
public class ReactModalHostFixedPackage implements  ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext)
    {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext)
    {
        List<ViewManager> managers = new ArrayList<>();
        managers.add(new ReactModalHostFixedManager());
        return managers;
    }
}

// You should copy the RCTModalHostViewNativeComponent.js to your project
// from node_modules/react-native/Libraries/Modal/RCTModalHostViewNativeComponent.js

// The preceding codes were omitted
// Notice you have to rewrite the import statements

// Use fixed view if the platform is android
const Platform = require('react-native/Utilities/Platform');
const paperComponentName =
  Platform.OS === 'android' ? 'RCTModalHostFixedView' : 'RCTModalHostView';

// export the fixed view
// NOTICE: for RN 0.61.5
export default (codegenNativeComponent<NativeProps>('ModalHostView', {
  interfaceOnly: true,
  paperComponentName,
}): NativeComponentType<NativeProps>);

// You should copy the RCTModalHostViewNativeComponent.js to your project
// from node_modules/react-native/Libraries/Modal/RCTModalHostViewNativeComponent.js

// The preceding codes were omitted
// Notice you have to rewrite the import statements

// Use fixed view if the platform is android
const Platform = require('react-native/Utilities/Platform');
const paperComponentName =
  Platform.OS === 'android' ? 'RCTModalHostFixedView' : 'RCTModalHostView';

// export the fixed view
// NOTICE: for RN 0.60.5
module.exports = ((requireNativeComponent(
  paperComponentName,
): any): RCTModalHostViewNativeType);

// You should copy the Modal.js to your project
// from node_modules/react-native/Libraries/Modal/Modal.js

// Use fixed view above
// The other codes were omitted
import RCTModalHostView from './RCTModalHostViewNativeComponent.js';

It works for me.(Only test on android simulator and my android phone for RN 0.61.5 and RN 0.60.5)

[alzalabany]

same problem still in 61.5, i solved it somehow by adding key prop to modal.

<Modal visible={modalVisible} key="authmodal">
</Modal>

you can use any string in key, this fixs duplicate problem in android both emulator and devices.

note: same problem also exists in release version android, not just during debug mode.

[DibPuelma]

@alzalabany this does not solves the issue in my case :(

Anyone with another workaround? I am using Code Push and the app is stuck whenever a modal is shown and the code is reloaded

[DibPuelma]

I found a workaround. Just don't use the modal when the Platform.OS === 'android'. It loses some functionalities like the animation, but you can program does manually if needed. Here is some code I'm using

style={{
elevation: 5,
zIndex: 10,
}}
disabled={!backdropAllowed}
onPress={backdropAllowed ? onClose : () => {}}>
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
}}>
{withSkip &&
width: '100%',
alignItems: 'flex-end',
position: 'relative',
top: 10,
right: 0,
}}>
onPress={handleSkip}>
fontWeight: 'bold',
color: colors.lightGray,
fontSize: fontSizes.h4
}}>
OMITIR



}
disabled={!backdropAllowed} onPress={() => {}} >
{children}

Hope it helps. If anyone needs more help or has any other ideas, just tag me.

[WouterFlorijn]

@sunnylqm do you know if it would be possible to merge this fix into 0.61 as well? And is there a time frame for a stable 0.62?

[sunnylqm]

@WouterFlorijn For release related questions, https://github.com/react-native-community/releases/issues

[TKY2048]

It's been almost another whole year and this hasn't been fixed!

[sunnylqm]

@TKY2048 It's fixed in 0.62

[Daniel-Griffiths]

For anyone else who is using Expo and is stuck on RN 0.61, this fixed this issue for me:

<Modal ...yourProps>
  <TouchableWithoutFeedback onPressOut={(e) => {
    if (e.nativeEvent.locationY < 0) {
      handleModal(false)
    }}
  >
    <View>
      ...modal content
    </View>
  </TouchableWithoutFeedback>
</Modal>

The TouchableWithoutFeedback fixes the problem.