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

erkanarslan commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

The workaround is perfect! Thanks!

wontroba666 commented 3 years ago

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

mpht commented 3 years ago

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 commented 3 years ago

@mpht you are unknown superhero thx

erkanarslan commented 3 years ago

Thanks. I hope this is added to the library.

wontroba666 commented 3 years ago

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?

NativeScript / nativescript-camera