nativescript-camera-plus icon indicating copy to clipboard operation
nativescript-camera-plus copied to clipboard

Published 20 hours ago • verified publisher icon nstudio

(iOS - Angular) Camera View is Shifted

Open ShawnPavel opened this issue 5 years ago • 5 comments

I upgraded to 2.1.7 and have an issue with the camera view not displaying properly. It seems like the camera view is being shifted by a value equivalent to however much the root CameraPlus component is offset from the edge of the screen.

I modified the angular example to show what I'm talking about. Simply add style="background-color: rgba(0, 128, 0, 0.392);" to the <CameraPlus> tag and add style="background-color:rgba(255, 0, 0, 0.42);" to the row 2 group of buttons. It produces the image below: Screen Shot 2019-05-02 at 3 35 13 PM

You can see that the camera view is shifted down into the pink row of buttons and the green background is exposed. This happens in landscape mode as well: Screen Shot 2019-05-02 at 3 35 28 PM In this case not only is it shifted down, but it's also shifted to the right. It seems to possible be caused by the header/safe zones on ios that is the amount they are shifted.

Here's what it looks like on an iPhone 7. The thing to notice here is that the shift is equivalent to the smaller header, and in landscape it isn't shifted horizontally. Screen Shot 2019-05-02 at 3 50 34 PM Screen Shot 2019-05-02 at 3 50 44 PM

If the CameraPlus component appears after something else in the view, it is shifted by the total amount from the edge of screen. In the screenshot below I positioned it below the buttons (pink). It still has the green background, but notice the actual camera view (black) is below the green background it should be within. Screen Shot 2019-05-02 at 4 01 48 PM

@NathanWalker @bradmartin I know we didn't have this problem when we were developing the plugin. But I'm in the process of updating the LiveShopper app to NativeScript 5 for the first time and this is the last piece preventing me from finishing the release. Any help would be much appreciated.

ShawnPavel avatar May 02 '19 20:05 ShawnPavel

Dear @ShawnPavel Did you have any chance to fix this issue? Did it work well on Android also? I tested it on android but didn't work. My plugin version is 2.1.7. Please let me know

mashinokatsumi avatar May 08 '19 05:05 mashinokatsumi

@SweetMei25 Android seems to work well. But I don't know how to fix it. @NathanWalker, @bradmartin, @NathanaelA, or someone with more knowledge will need to take a look at it.

ShawnPavel avatar May 08 '19 14:05 ShawnPavel

I see. On Android, I was able to make it work well, but I didn't test it on iOS yet and I will need iOS version... so please professionals, kindly help us to fix this issue.

mashinokatsumi avatar May 08 '19 15:05 mashinokatsumi

@ShawnPavel, may I see your code?

mashinokatsumi avatar May 08 '19 15:05 mashinokatsumi

I provided the code required to reproduce the error above using the demo project supplied within the plugin.

ShawnPavel avatar May 08 '19 15:05 ShawnPavel