iOS > Cannot read property 'frame' of null at DropDown.initNativeView

[justintoth]

Lately, when running on a real iOS device this nativescript dropdown picker has been throwing this error and crashing the app:

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'frame' of null
at
initNativeView(file: src/webpack:/MyApp/node_modules/nativescript-drop-down/drop-down.ios.js:16:0)
at setNativeView(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:615:0)
at _setupUI(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:593:0)
at (file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:600:0)
at eachChildView(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
at eachChild(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view/view-common.js:759:0)
at _setupUI(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:599:0)
at (file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:600:0)
at eachChildView(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
at eachChild(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view/view-common.js:759:0)
at _setupUI(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:599:0)
at (file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:600:0)
at eachChildView(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
at eachChild(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view/view-common.js:759:0)
at _setupUI(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:599:0)
at (file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:600:0)
at eachChildView(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/content-view/index.js:65:0)
at eachChildView(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/page/page-common.js:106:0)
at eachChild(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view/view-common.js:759:0)
at _setupUI(file: src/webpack:/MyApp/node_modules/@nativescript/core/ui/core/view-base/index.js:599:0)
at _add<\M-b\M^@\M-&>

It doesn't happen on iOS simulators. I'm using the latest version of the plugin and the latest version of NS, on iOS 15.2.

[PeterStaev]

Hey @justintoth , need more info on this since I'm not sure how this error can happen. I'm using the drop down in a production app and don't have any problems with latest iOS. What NS flavor is this (Plain, Angular, Vue, etc.), what version of NS? If you can create a reproducible sample that would be great :)

Also when you say you are using the latest version of the plugin - are you using the ProPlugins one or the public one? The public version hasn't been thoroughly tested on latest NS version.

[justintoth]

@PeterStaev I'm using the Angular flavor and NS version 8.1.5. I'm using the public one, I can certainly subscribe to the ProPlugins if you think that will resolve this issue. Let me work on a repro project...

[justintoth]

Repro project attached, which is simply the demo-ng code in this repo...
MyApp.zip

I'm running on iOS 15.3 (beta), however real users have logged this crash in production on iOS 15.1 and 15.2.

[PeterStaev]

@justintoth , I cannot simulate any problem with the attached app running on an iPhone 12 Pro Max and iOS 15.2.1.

[justintoth]

@PeterStaev Just to confirm because you used the word "simulate", you're using a real iPhone 12 Pro Max, not not a simulator, correct?

[PeterStaev]

@justintoth that is correct. I'm testing on a real device, not on the simulators.

[Ederagp]

The same thing happens to me under the same version NS that indicates @justintoth and i`m testing on real device iOS 15.2

[justintoth]

@PeterStaev Where there's smoke, there's fire. I know it's hard to fix an issue when you can't reproduce it yourself, but me and @Ederagp are both seeing it (even using your demo code), and a few real users of our prod app are experiencing it as well.

Here is the relevant code:

public initNativeView() {
        super.initNativeView();
        const applicationFrame = UIApplication.sharedApplication.keyWindow.frame;
        this._toolbar = UIToolbar.alloc().initWithFrame(CGRectMake(0, 0, applicationFrame.size.width, TOOLBAR_HEIGHT));
    }

Clearly UIApplication.sharedApplicaiton.keyWindow is null. It looks like the applicationFrame is only being used to determine the width of the toolbar. Is there another way to calculate this width? Or could we pass it in as a workaround?

[PeterStaev]

@justintoth I'm not saying there isn't. I know where the error happens but I don't see how that can happen, nor I was able to simulate this so I can trace why the keyWindow is null.

Feel free to submit a PR how you think should work in the case when the keyWindow is null. Since I cannot simulate it on my end, no way to test and confirm the fix will look good on the UI.

[HamoBoker]

i have the same error, im using:

@nativescript/core: 8.1.5
@nativescript/ios: 8.1.0
@nativescript/android: 8.1.1
nativescript-vue: 2.9.0
nativescript-drop-down: 6.0.0
...

Device : iPhone 7 with IOS 15.2.1

[justintoth]

@PeterStaev I created a PR to fix the crash, although I've never worked on a NS plugin before so let me know if anything looks wrong.

PR: #259

Just wondering, how do you bundle up your plugin into a release build? I tried the "npm run package" command and it copied files over to bin/dist, however it didn't generate a .tgz file so I don't know how I would be able to add the plugin into my app.

[PeterStaev]

Hey @justintoth , thanks for your contribution! I've pushed your changes to NPM.

As for locally testing - you compile the plugin using grunt compile and then you can install it directly from the bin/dist folder using npm install <folder path> in your app. Or if you want a tgz generated, you can issue npm pack command in the bin/dist folder and it will generate the tgz.

[justintoth]

@PeterStaev Thanks for merging that so quickly! Now that I've tested it in my actual app, the app doesn't crash anymore but there is another issue where the height of the picker dialog is too small so you can't even see the picker options. I'm guessing it's unrelated, as the applicationFrame code that I changed was only determining the width of the toolbar. I'll take a look when I get a chance...

[justintoth]

@PeterStaev Nothing stands out in the drop-down.ios.ts that would control the height of the container that houses the picker, but on iOS 15 and only on real devices is it really short where you can't even see the picker. I'm willing to fix it, but I could use some help getting pointed in the right direction of where in the code it controls the height of that "tray" container.

[PeterStaev]

@justintoth , I think the height of the picker is controlled from the OS/Runtime itself. I'm not doing any sizing in the code of the plugin (like you already noticed). I suggest you open a new issue and provide more details/screenshot of how the picker looks like so there is more info.