Nativescript-angular: SEGFAULT on iOS when ListView not enclosed by layout

Created on 14 Apr 2016 · 15Comments · Source: NativeScript/nativescript-angular

I went through the guide (it is fantastic, even unfinished) and started to use it as a template for my own project. So I changed the list view and removed the outer GridLayout so it looks like

<ListView [items]="items" id="grocery-list" class="small-spacing">
  <template #item="item">
    <Label [text]="item.name" class="medium-spacing"></Label>
  </template>
</ListView>

on Android it works fine but in iOS I get a SEGFAULT

Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 1   0x134a10 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 2   0x7fbcd0 ffi_closure_inner
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 3   0x7fc622 ffi_closure_i386
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 4   0x33da059 -[NSObject performSelector:withObject:]
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 5   0x5aed096 -[CALayer layoutSublayers]
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 6   0x5ae08b6 CA::Layer::layout_if_needed(CA::Transaction*)
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 7   0x5ae071a CA::Layer::layout_and_display_if_needed(CA::Transaction*)
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 8   0x5ad2ee7 CA::Context::commit_transaction(CA::Transaction*)
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 9   0x5b07847 CA::Transaction::commit()
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 10  0x5b08108 CA::Transaction::observer_callback(__CFRunLoopObserver*, unsigned long, void*)
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 11  0x381d75e __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 12  0x381d6be __CFRunLoopDoObservers
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 13  0x381303c __CFRunLoopRun
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 14  0x3812846 CFRunLoopRunSpecific
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 15  0x381265b CFRunLoopRunInMode
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 16  0x5583664 GSEventRunModal
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 17  0x55834a1 GSEventRun
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 18  0x15b7eb9 UIApplicationMain
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: 19  0x7fc4e8 ffi_call_i386
Apr 12 10:20:34 MacBook-Pro picturesapp[7163]: file:///app/tns_modules/ui/content-view/content-view.js:37:91: JS ERROR Error: More than one layout child inside a ContentView
Apr 12 10:20:34 MacBook-Pro com.apple.CoreSimulator.SimDevice.0318C35B-B97F-4347-87AF-511D535BDD31.launchd_sim[5753] (UIKitApplication:org.nativescript.pictures[0xdf16][7163]): Service exited due to signal: Segmentation fault: 11

Source

jonnysamps

Most helpful comment

@OscarLopezArnaiz
@jonnysamps
@tjvantoll

How to resolve this issue

The best way to resolve this is by wrapping your content in a GridLayout like so:

<ActionBar title="Sandbox Title">
    <NavigationButton text="Back" android.systemIcon="ic_menu_back" (tap)="routerExtensions.back()"></NavigationButton>
    <ActionItem ios.position="right" text="Done"></ActionItem>
</ActionBar>

<GridLayout rows="*">
    <ListView row="0" [items]="images" (itemTap)="onItemTap($event)">
        <template let-item="item">
            <Image [imageSource]="item"></Image>
        </template>
    </ListView>
</GridLayout>

The rows="*" will stretch your layout vertically %100 of the screen.

roblav96 on 6 Sep 2016

👍3

All 15 comments

Thanks @jonnysamps! I’ve hit this too. For whatever reason it seems <ListView> can’t be top-level on iOS but it can be on Android.

tjvantoll on 14 Apr 2016

@jonnysamps @tjvantoll Unfortunately ListView cannot be placed directly to page (for both platforms), it should be wrapped by any layout control.
This is a known issue, but I cannot commit that it will be solved for the upcoming beta.

nsndeck on 15 Apr 2016

Some good news on that we've managed to fix it (both Android and iOS).

nsndeck on 18 Apr 2016

The fix will be available with version 0.0.42 and above.

nsndeck on 18 Apr 2016

@nsndeck any ETA on that release?

jonnysamps on 18 Apr 2016

@jonnysamps, I just published [email protected] to npm. It should contain the bugfix @nsndeck mentioned above.

hdeshev on 20 Apr 2016

Thanks!

On Tue, Apr 19, 2016 at 10:40 PM, Hristo Deshev [email protected]
wrote:

@jonnysamps https://github.com/jonnysamps, I just published
[email protected] to npm. It should contain the bugfix @nsndeck
https://github.com/nsndeck mentioned above.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/NativeScript/nativescript-angular/issues/181#issuecomment-212267594

Jonathan

jonnysamps on 20 Apr 2016

tldr

It gets reproduced when I put

<AbsoluteLayout modal-dialog-host></AbsoluteLayout>

at the very bottom of my component template.

I'm still having this issue:

Sep  2 22:14:05 Robs-MBP client[17288]: 16  0x10a76682d ffi_call_unix64
Sep  2 22:14:05 Robs-MBP client[17288]: 17  0x1237b3270
Sep  2 22:14:05 Robs-MBP client[17288]: file:///app/tns_modules/ui/content-view/content-view.js:37:91: JS ERROR Error: More than one layout child inside a ContentView
Sep  2 22:14:05 Robs-MBP com.apple.CoreSimulator.SimDevice.1BC393B7-E288-4E20-BB36-F73F9E920C34.launchd_sim[16586] (UIKitApplication:com.roblav96.whispers[0xc1ed][17288]): Service exited due to signal: Segmentation fault: 11

package.json:

        "@angular/common": "2.0.0-rc.5",
        "@angular/compiler": "2.0.0-rc.5",
        "@angular/core": "2.0.0-rc.5",
        "@angular/forms": "0.3.0",
        "@angular/http": "2.0.0-rc.5",
        "@angular/platform-browser": "2.0.0-rc.5",
        "@angular/platform-browser-dynamic": "2.0.0-rc.5",
        "@angular/platform-server": "2.0.0-rc.5",
        "@angular/router": "3.0.0-rc.1",
        "nativescript-angular": "0.4.0",
        "tns-core-modules": "2.2.1",

roblav96 on 3 Sep 2016

I'm having this issue too on iOS too.

<android>
    <ActionBar [title]="title"></ActionBar>
</android>
<AbsoluteLayout width="100%" height="100%" class="main-tab-view-wrapper">        </AbsoluteLayout>

It seems <android> can't be a top-level element. this works ok in Android but having the error in iOS.

Sep 6 09:54:42 Oscars-MacBook-Pro mobileapp[26054]: 19 0xadcee8 ffi_call_i386
Sep 6 09:54:42 Oscars-MacBook-Pro mobileapp[26054]: file:///app/tns_modules/ui/content-view/content-view.js:37:91: JS ERROR Error: More than one layout child inside a ContentView
Sep 6 09:54:42 Oscars-MacBook-Pro com.apple.CoreSimulator.SimDevice.A512CC7F-1D0C-42CA-86F7-42069606822F.launchd_sim1019: Service exited due to signal: Segmentation fault: 11

Package.json

"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/platform-server": "2.0.0-rc.4",
"@angular/router": "3.0.0-alpha.7",
"@angular/router-deprecated": "2.0.0-rc.2",
"rxjs": "5.0.0-beta.6",
"lodash": "^4.15.0",
"moment": "^2.14.1",
"nativescript-angular": "^0.3.1",
"nativescript-unit-test-runner": "^0.3.3",
"tns-core-modules": "^2.2.1"

Thanks

OscarLopezArnaiz on 6 Sep 2016

@OscarLopezArnaiz
@jonnysamps
@tjvantoll

How to resolve this issue

The best way to resolve this is by wrapping your content in a GridLayout like so:

<ActionBar title="Sandbox Title">
    <NavigationButton text="Back" android.systemIcon="ic_menu_back" (tap)="routerExtensions.back()"></NavigationButton>
    <ActionItem ios.position="right" text="Done"></ActionItem>
</ActionBar>

<GridLayout rows="*">
    <ListView row="0" [items]="images" (itemTap)="onItemTap($event)">
        <template let-item="item">
            <Image [imageSource]="item"></Image>
        </template>
    </ListView>
</GridLayout>

The rows="*" will stretch your layout vertically %100 of the screen.

roblav96 on 6 Sep 2016

👍3

I am still experiencing the issue when I add other components to the page, like the RadSideDrawer (wrapped in my component)

app.html:

<ActionBar title="demo"></ActionBar>    
 <StackLayout>
    <Label text="hello"></Label>
</StackLayout>
<side-menu></side-menu>

sideMenu.html

<RadSideDrawer #drawer>
    <DockLayout dock="left" tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideStackLayout">
            <Label text="Primary" class="sideLabel"></Label>
            <Label text="Social" class="sideLabel"></Label>
        </StackLayout>
    </DockLayout>
</RadSideDrawer>

I tried wrapping the RadSideDrawer with some layout, still doesn't work.

lukashlobil on 15 Sep 2016

Also seeing this with the RadSideDrawer component

JonnyHeavey on 16 Dec 2016

Following @roblav96 solution but also having this issue

shiamalon on 2 May 2017

+1 for SIdeDrawer

deepak4u2006 on 9 May 2017

I had this error only on iOS, since RadSideDrawer was working on Android. My error was that the tag was being put everywhere except inside the tag. For iOS to show this side drawer you must include it in there as an

Example:
`

<ActionItem text="Acerca De" ios.position="popup" android.position="popup" (tap)="aboutUs()"></ActionItem>
    <ActionItem>
        <RadSideDrawer showOverNavigation="true" tkExampleTitle tkToggleNavButton>
            <StackLayout tkDrawerContent class="sideStackLayout"
            </StackLayout>
        </RadSideDrawer>
    </ActionItem>

Good luck!