Modal.showController shows component multiple times

[rowellx68]

react-native-controllers v2.0.2

In one of my components, I have the following code

_stateChange (val) {
  if (val === 'inactive') {
    Modal.showController('myapp.Controller.Locked', 'slide-up');
  }
}

componentDidMount () {
  AppState.addEventListener('change', this._stateChange);
}

Everytime the AppSate is inactive, the modal gets shown even if the myapp.Controller.Locked is already showing on screen.

Maybe the Controllers could keep track of the shown component and not show it again?

// var _currentModal;

showController: function(appKey, animationType = 'slide-up', passProps = {}) {
  var controller = _controllerRegistry[appKey];
  if (controller === undefined) return;

  if (_currentModal === appKey) return;
  _currentModal = appKey;

  var layout = controller.render();
  _validateDrawerProps(layout);
  RCCManager.showController(layout, animationType, passProps);
}

[rowellx68]

EDIT: This causes a noticeable flicker on an actual device and it could even result on the modal to be dismissed.

Forked the project and modified it to be like the one above: https://github.com/rowellx68/react-native-controllers/commit/11201351bc923000a68e80b48a0e9be4ed6867a2

---

Found a workaround.

_stateChange (val) {
  if (val === 'inactive') {
    Modal.dismissController('none');
    setTimeout(() => {
      Modal.showController('myapp.Controller.Locked', 'none');
    }, 10);
  }
}

I dismiss the current modal first, then show it again after a timeout. Not particularly elegant.

[drorbiran]

This issue will be addressed to in react-native-navigation #247