NativeScript JavaScript modal dialog fails with ViewHierarchy error on iOS - nativescript

Question

I have a relatively simple modal dialog within a much larger NativeScript JavaScript app which when launched fails with the error message,
CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:166:30: ViewHierarchy: Parent is already presenting view controller. Close the current modal page before showing another one!
This works fine on Android but fails consistently on iOS. The code follows the sample at https://docs.nativescript.org/ui/modal-view. tns doctor shows no errors and all code up to date. What's stumping me here is figuring out what I can change, as this is the only modal dialog in the entire app.
I'd welcome any ideas.
Edit:
I tried a similar but older app and the same modal dialog works as expected there. But, it's running 4.2.0 versions of core modules and iOS.
✔ Component nativescript has 5.3.2 version and is up to date.
⚠ Update available for component tns-core-modules. Your current version is 4.2.0 and the latest available version is 5.3.1.
⚠ Update available for component tns-android. Your current version is 4.2.0 and the latest available version is 5.3.1.
⚠ Update available for component tns-ios. Your current version is 4.2.0 and the latest available version is 5.3.1.
Here's the modal dialog code in question:
/**
* Open Modal dialog to select phone number when multiple exist
* #param {object} page
* #param {object} contact - object returned from getContact
* #return {object} - Promise, result from selected contact, or null
*/
selectPhone = ((page, contact) => {
return new Promise((resolve, reject) => {
var modalPageModule = "views/phone-select-page";
var fullscreen = false;
var slept; // Promise for wait on iOS
// Wait briefly on iOS for contacts app to close (admittedly a hack)
if (page.ios) {
slept = myutils.sleep(50);
} else {
slept = Promise.resolve();
}
slept.then(() => {
page.showModal( // Ref: https://docs.nativescript.org/ui/modal-view
modalPageModule,
contact,
((response) => { // anonymous closeCallback function
if (response) {
resolve(response); // return promise with modified contact
} else { // (handle back button press on Android)
reject(response);
}
}), // end closeCallback function
fullscreen
); // end page.showModal
}); // end slept.then
}); // end return New Promise
}); // end selectPhone
Here's the modal dialog itself
<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally"
xmlns:dd="nativescript-drop-down">
<StackLayout class="modal-page">
<Label class="instructions" textWrap="true" text="Select the phone number to use" />
<dd:DropDown class="phones" items="{{ phones }}" selectedIndex="{{ phoneIndex }}" hint="Tap here to choose number" />
<StackLayout class="hr"/>
<GridLayout columns="*,*" rows="auto">
<Button class="btn navbtn" col="1" tap="onOkTap" text="OK"/>
</GridLayout>
</StackLayout>
</Page>
And here's the modal's .js file:
var observableModule = require("tns-core-modules/data/observable");
var closeCallback; // make modal closeCallback function global
exports.onShownModally = function (args) {
const page = args.object;
var model = new observableModule.fromObject(args.context);
page.bindingContext = model;
closeCallback = args.closeCallback;
}
exports.onOkTap = function (args) {
var page = args.object.page;
var response = page.bindingContext; // use input context object as response object
response.phone = response.phones[response.phoneIndex];
response.phone = response.phone.substr(response.phone.indexOf(":")).match(/\d/g).join("");
page.closeModal();
closeCallback(response);
}

Answer 1

The problem seems to be a timing issue returning from the Contacts app on iOS. That was the reason for this code:
// Wait briefly on iOS for contacts app to close (admittedly a hack)
if (page.ios) {
slept = myutils.sleep(50);
} else {
slept = Promise.resolve();
}
(Alas, I had dealt with this same problem last summer when I originally developed this code.) If I change the delay from 50ms to 750ms, the code works fine. I'm guessing this is due to changes in {N} 5. So, it's still a hack, but I can live with it for now.
edit 4/24/2020: I developed a fix for this and created a pull request (#84) for nativescript-contacts. See issue #75 for more info.