RadSideDrawer iOS bug

[hitmacreed]

When i run the iOS version RadSideDrawer i have the fallowing bug :

JavaScript error:
file:///node_modules/nativescript-ui-sidedrawer/ui-sidedrawer.js:211:0 JS ERROR TypeError: undefined is not an object (evaluating '_this.mainContent.layout')
NativeScript caught signal 11.
Native Stack:
1   0x10385a84f sig_handler(int)
2   0x109e26b5d _sigtramp
3   0x432f656d69746e75
4   0x109d6cb4d libunwind::UnwindCursor<libunwind::LocalAddressSpace, libunwind::Registers_x86_64>::step()
5   0x109d70e4c _Unwind_RaiseException
6   0x1099494aa __cxa_throw
7   0x108360bfa _objc_exception_destructor(void*)
8   0x103815d58 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
9   0x10384db60 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
10  0x1041eedd6 ffi_closure_unix64_inner
11  0x1041ef7fa ffi_closure_unix64
12  0x1094745b4 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__
13  0x1094741c2 __CFRunLoopDoTimer
14  0x109473a2a __CFRunLoopDoTimers
15  0x10946e0cc __CFRunLoopRun
16  0x10946d4d2 CFRunLoopRunSpecific
17  0x10f28b2fe GSEventRunModal
18  0x10a956fc2 UIApplicationMain
19  0x1041ef63d ffi_call_unix64
20  0x121a38480

my html

<!-- SIDE DRAWER -->
<RadSideDrawer  class="nav-drawer">

    <!--DRWER ITEMS-->
    <GridLayout tkDrawerContent class="sideStackLayout" >

            <ScrollView row="1">

                <StackLayout class="sideStackLayout" padding="10">

                    <RL:Ripple  [nsRouterLink]="['../default']">
                    <FlexboxLayout padding="10" class="drawer-item" >
                        <Image src="res://discount" class="imgIcons" ></Image>
                        <Label text="Campanhas" padding="10" ></Label>
                    </FlexboxLayout>
                    </RL:Ripple>

                    <!--[nsRouterLink]="['../fornecedores']"-->
                    <RL:Ripple  [nsRouterLink]="['../fornecedores'] ">
                    <FlexboxLayout  padding="10" class="drawer-item" >
                        <Image src="res://shop_white" class="imgIcons" ></Image>
                        <Label text="Fornecedores" padding="10" class="drawer-item-bt" ></Label>
                    </FlexboxLayout>
                </RL:Ripple>

                    <RL:Ripple  [nsRouterLink]="['../produtos']"> 
                    <FlexboxLayout  padding="10" class="drawer-item">
                            <Image src="res://box" class="imgIcons" ></Image>
                            <Label text="Produtos" padding="10"></Label>
                    </FlexboxLayout>
                    </RL:Ripple>

                    <RL:Ripple [nsRouterLink]="['../carrinho']">
                    <FlexboxLayout  padding="10" class="drawer-item">
                            <Image src="res://shopping" class="imgIcons" ></Image>
                            <Label text="Carrinho" padding="10"></Label>
                    </FlexboxLayout>
                    </RL:Ripple>

                    <RL:Ripple [nsRouterLink]="['../vouchers']">
                    <FlexboxLayout  padding="10" class="drawer-item">
                            <Image src="res://coupon" class="imgIcons" ></Image>
                            <Label text="Voucher" padding="10"></Label>
                    </FlexboxLayout>
                    </RL:Ripple>

                    <RL:Ripple [nsRouterLink]="['../encomendas']">
                    <FlexboxLayout  padding="10" class="drawer-item">
                            <Image src="res://shopping_bag" class="imgIcons" ></Image>
                            <Label text="Encomendas" padding="10"></Label>
                    </FlexboxLayout>
                    </RL:Ripple>

                    <RL:Ripple  [nsRouterLink]="['../campanhas-locais']">
                    <FlexboxLayout  padding="10" class="drawer-item">
                            <Image src="res://pin" class="imgIcons" ></Image>
                            <Label text="Campanhas Locais" padding="10"></Label>
                    </FlexboxLayout>
                    </RL:Ripple>

                </StackLayout>

          </ScrollView>

    </GridLayout>
    <!--DRWER ITEMS-->

    <!--ACTION BAR-->
    <ActionBar tkMainContent class="action-bar roboto-regular" >
            <NavigationButton icon="res://menu"  (tap)="openDrawer()" ></NavigationButton>
    </ActionBar>
    <!--ACTION BAR-->

</RadSideDrawer>
<!-- SIDE DRAWER -->
...
</RadSideDrawer>

my component.ts

 @Component({
  selector: "ns-market-place-drawer",
  templateUrl: "./market-place-drawer.component.html",
  styleUrls: ["./market-place-drawer.component.css"],
  moduleId: module.id
})

export class MarketPlaceDrawerComponent  implements AfterViewInit, OnInit  {

 // tslint:disable-next-line: max-line-length
  constructor(private _changeDetectionRef: ChangeDetectorRef, private routerExtensions: RouterExtensions, private location: Location) {
  }

  get mainContentText() {
        return this._mainContentText;
  }

  set mainContentText(value: string) {
        this._mainContentText = value;
  }

  // tslint:disable-next-line: member-ordering
  @ViewChild(RadSideDrawerComponent, { static: false }) drawerComponent: RadSideDrawerComponent;

  //ACTIONBAR TITLE
  @Input() acbtitle:string;

  private _mainContentText: string;

  // tslint:disable-next-line: member-ordering
  private drawer: RadSideDrawer;

  ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

  // tslint:disable-next-line: no-empty
  ngOnInit() {
  }

  openDrawer() {
    this.drawer.showDrawer();
  }

  onCloseDrawerTap() {
    this.drawer.closeDrawer();
  }

  goBack() {
    this.location.back();
  }
}

2 component where i call the drawer

<StackLayout orientation="vertical" class="page-content page-market-place">

    <ns-market-place-drawer acbtitle="teste"></ns-market-place-drawer>  

    <label text="Campanhas" class="home-title"></label>

</StackLayout>

[VladimirAmiorkov]

Make sure that you have correctly set the tkMainContent inline directive to an element in the html declaration. Example cam be found here.

Side note: the tkExampleTitle and tkToggleNavButton are custom inline directives that are implemented in the demo app in order to easily showcase the current example title and show a back button. Those are not required and you should not need to copy paste them if you do not want to actually created such directives.

[VladimirAmiorkov]

Closing the issue as I am not able to reproduce it on our side using this demo application: https://github.com/NativeScript/nativescript-ui-samples-angular/tree/master/sidedrawer

if you continue to experience this issue let us know and reopen the issue by providing additional information in the form of a runnable sample project or a playground demo app.

[VladimirAmiorkov]

Hi @hitmacreed ,

The RadSideDrawer requires you to place your "Page" content to its mainContent property as states here the RadSideDrawer can have only two child elements.

Please follow this getting started article.: https://docs.nativescript.org/angular/ui/professional-ui-components/ng-SideDrawer/getting-started#initialization