Camera stays behind page content if opened in nested page-router-outlet

[erkanarslan]

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

Please, ensure your title is less than 63 characters long and starts with a capital letter.

I have a nested page-router-outlet configuration in my app. Root component template has a page-router-outlet. Child page has the following template:

<grid-layout rows="*, auto">
    <page-router-outlet row="0"></page-router-outlet>
    <stack-layout row="1" style="height:50;background-color:red;"></stack-layout>
</grid-layout>

I load a child page inside the page-router-outlet shown inside the template above. If I open the camera inside that child component, stack-layout component in the template above stays above the camera and blocks the camera buttons.

If I use a router-outlet inside the template above, I still have the same problem.

Which platform(s) does your issue occur on?

• iOS (didn't test on Android)
• iOS 6.1.1
• emulator or device. What type of device? Both. iPhone 7.

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

• CLI: 6.1.2
• Cross-platform modules: 6.1.2
• Android Runtime: 6.1.2
• iOS Runtime: 6.1.1
• Plugin(s): unrelated
• NativeScript-Angular: 8.0.2
• Angular: 8.0.0
• nativescript-camera: 4.5.0

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

Explained above.

Is there any code involved?

If you want, I will send my whole project to your mail address.

[mpht]

Hey guys! I have stumbled upon the same problem.

I also encountered something very similar about a month ago: https://github.com/alexziskind1/nativescript-oauth2/issues/116

basically the problem is frame.topmost()

the topmost method from the tns-core-modules/ui/frame module. The method returns the last navigated Frame instance ...

To get it working I just check if there are some parents

Workaround

You can create the following patch for camera.ios.js and apply it using a hook. Please feel free to give input to that patch.

Here is the patch file content:

--- node_modules/nativescript-camera/camera.ios.js	1985-10-26 09:15:00.000000000 +0100
+++ node_modules/nativescript-camera/camera.ios.js	2020-06-29 15:00:28.000000000 +0200
@@ -150,8 +150,11 @@
         imagePickerController.modalPresentationStyle = 3;
         var frame = require("tns-core-modules/ui/frame");
         var topMostFrame = frame.topmost();
+        while(topMostFrame.parent) {
+            topMostFrame = topMostFrame.parent;
+        }
         if (topMostFrame) {
-            var viewController = topMostFrame.currentPage && topMostFrame.currentPage.ios;
+            var viewController = topMostFrame.viewController ? topMostFrame.viewController : (topMostFrame.currentPage && topMostFrame.currentPage.ios);
             if (viewController) {
                 while (viewController.parentViewController) {
                     viewController = viewController.parentViewController;
@@ -160,7 +163,11 @@
                     viewController = viewController.presentedViewController;
                 }
                 viewController.presentViewControllerAnimatedCompletion(imagePickerController, true, null);
+            } else {
+                console.log('NO VIEWCONTROLLER');
             }
+        } else {
+            console.log('NO TOPMOST FOUND')
         }
     });
 };

Sidenotes:

It looks like there should be some "parent search" active - but its not working in this case.

while (viewController.parentViewController)

[mrzanirato]

The workaround is perfect! Thanks!

[wontroba666]

hello can you explain how to add this patch / hook ?

[mpht]

1. add a patch in your project for example ../projects/your_project_name/patches/camera.ios.patch

see code from my previous post (https://github.com/NativeScript/nativescript-camera/issues/234#issuecomment-651114330)

2. Apply the patch using hooks create the following 2 hooks

hook 1 ../projects/your_project_name/hooks/after-prepare/patch-camera.js

with this code

module.exports = require("../before-livesync/patch-camera");

hook 2 ../projects/your_project_name/hooks/before-livesync/patch-camera.js

with this code

const exec = require("child_process").exec;

// Lets see what other people think about our fix/workaround https://github.com/NativeScript/nativescript-camera/issues/234

module.exports = function(logger) {

    logger.info("Patch Camera for IOs");

    return new Promise((resolve, reject) => { 
        exec( 'patch -p0 -l -f -i patches/camera.ios.patch', () => {
            resolve();
        });
    });
};

3. tns run ios - and stuff should get patched

edit: whoops: fixed some copy paste errors

[wontroba666]

@mpht you are unknown superhero thx

[erkanarslan]

Thanks. I hope this is added to the library.

[wontroba666]

unfortunately they didn't on the NS 7 version it still hasn't been fixed .... is there any chance for a path for the nativescript 7 version?