Adding a BIG UIView with addUIView makes layout unresponsive once navigating away

[Emanuele-Fortunati]

Make sure to check the demo app(s) for sample usage

Done.

Make sure to check the existing issues in this repository

Done.

If the demo apps cannot help and there is no issue for your problem, tell us about it

Which platform(s) does your issue occur on?

• iOS
• iOS 13.2.3
• emulator or device. What type of device? iPhone Xr (couldn't test on other devices)

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it): 6.2.1
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project): 6.2.1
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project): tns-ios 6.2.0
• Plugin(s): (look for the version numbers in the package.json file of your
  project and paste your dependencies and devDependencies here)
  "dependencies": {
  "@angular/animations": "~8.2.0",
  "@angular/common": "~8.2.0",
  "@angular/compiler": "~8.2.0",
  "@angular/core": "~8.2.0",
  "@angular/forms": "~8.2.0",
  "@angular/http": "8.0.0-beta.10",
  "@angular/platform-browser": "~8.2.0",
  "@angular/platform-browser-dynamic": "~8.2.0",
  "@angular/router": "~8.2.0",
  "nativescript-angular": "^8.20.3",
  "nativescript-ar": "^1.1.0",
  "nativescript-carousel": "^6.1.0",
  "nativescript-feedback": "^1.3.9",
  "nativescript-localstorage": "^2.0.0",
  "nativescript-lottie": "^4.0.1",
  "nativescript-mapbox": "^4.4.1",
  "nativescript-ng-shadow": "^2.1.0",
  "nativescript-platform-css": "^1.6.9",
  "nativescript-plugin-firebase": "^10.2.1",
  "nativescript-social-share": "^1.5.2",
  "nativescript-theme-core": "~2.0.2",
  "nativescript-ui-gauge": "^6.0.0",
  "nativescript-ui-sidedrawer": "7.0.0",
  "nativescript-videoplayer": "^4.2.1",
  "reflect-metadata": "~0.1.12",
  "rxjs": "^6.4.0",
  "tns-core-modules": "~6.2.0",
  "zone.js": "^0.9.1",
  "~app-config": "file:tools/~app-config"
  },
  "devDependencies": {
  "@angular/compiler-cli": "~8.2.0",
  "@nativescript/schematics": "~0.6.0",
  "@ngtools/webpack": "~8.2.0",
  "nativescript-dev-webpack": "^1.3.0",
  "node-sass": "4.12.0",
  "typescript": "~3.5.3"
  },

Please, tell us how to recreate the issue in as much detail as possible.

In a similar way to the app provided in the examples:

1. Create APP in angular, using the sidedrawer template
2. Create 2 Components: component 1 is the view loaded by default, and it contains 1 Button that on tap navigate to component 2
3. In Component 2 add the directive and underneath an <AbsoluteLayout id="bigView" background="red> (to make things easy) with width and height both equal to 4000 (or just the whole screen size, but make sure to use a fixed number not a percentage). Add also a button to navigate back to component 1.
4. Add any image as reference for tracking images, and once the event "trackingImageDetected" is fired, use args.imageTrackingActions.addUIView({view: page.getViewById("bigView"), position: positionVariable}) to add the view to the AR Scene.
5. Use the button to navigate back to component 1.
6. You will notice the button in component 1 is no any longer tappable: this happens because the we added to the AR Scene is still in some way present and overlaying the whole view. I'm sure about it because if I use a smaller <AbsoluteLayout id="bigView> that takes half of the screen, once navigating back just half of the screen is unresponsive.

I've tried to programmatically remove the bigView BEFORE navigating back, both using NativeScript way and ios way directly, but although I see the view disappearing, the issue persists.

I've also tried to use the layoutSubview and needLayout way, but doesn't seem to work either, or at least I'm unable to use it correctly.

One thing I've noticed is: when I lock my screen after the bug happening, it seems the view repaint, and some parts of it becomes responsive again, but not all.

The problem is I can't see a way to remove this bigView layout / view / layer as the app keeps drawing it after it has been added to the AR Scene. In fact, if you do the same procedure WITHOUT calling imageTrackingActions.addUIView, there is no issue. So the bug must happen in there somehow.

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

I think the above is pretty well detailed and the examples already present in the plugin can be used, just using VERY BIG view to be added to the AR Scene. Unfortunately, I can't share the original code as the app is under NDR.

I'm happy to provide further informations if that can help.

Thanks,

Emanuele

[EddyVerbruggen]

Hi!

Interesting issue.

Can you share a sample app on Github which I can clone that demonstrates the issue? It could be a fork of this repo of course.

[Emanuele-Fortunati]

Hi @EddyVerbruggen sure thing, I've recreated what shown above in this Demo AR App.
I've stripped out all from my original app, except the AR plugin. I've tested it on my iPhone Xr, iOS 13.2.3.

To do some extra test, you can also try:

1. using width and height 400 for the bigView and the bug should still be there, however only half of the screen will be unresponsive, other half will work ok
2. Uncommenting lines 50-53 in ar.component.ts (explanation on why is commented in the code)

Please let me know if you can reproduce it too and if there's anything else I can do. In the meanwhile I'm still debugging too, if I find a solution I'll post it here :)