Nativescript-ui-feedback: Error in back navigation event from a page not registered in the SideDrawer

[NickIliev]

_From @alexmeia on November 24, 2017 11:39_

Hello,
I needed a subsection of the main navigation and created o folder inside the _browse_ folder with its page, controller and model. The section is intended to show a detail page for the element in the main section, following the pattern implemented in Master Detail Template.
The navigation to the detail page works fine using the topmost.navigate() method, but when I try to go back to the main section using topmost.goBack(); or the Android back button I receive this error:

System.err: java.lang.ClassCastException: android.view.AbsSavedState$1 cannot be cast to com.telerik.android.primitives.widget.sidedrawer.SideDrawerState
System.err:     at com.telerik.android.primitives.widget.sidedrawer.RadSideDrawer.onRestoreInstanceState(RadSideDrawer.java:784)
System.err:     at android.view.View.dispatchRestoreInstanceState(View.java:17445)
System.err:     at android.view.ViewGroup.dispatchRestoreInstanceState(ViewGroup.java:3693)
System.err:     at android.view.ViewGroup.dispatchRestoreInstanceState(ViewGroup.java:3699)
System.err:     at android.view.View.restoreHierarchyState(View.java:17423)
System.err:     at android.app.Fragment.restoreViewState(Fragment.java:653)
System.err:     at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1299)
System.err:     at android.app.FragmentManagerImpl.moveFragmentToExpectedState(FragmentManager.java:1547)
System.err:     at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1609)
System.err:     at android.app.BackStackRecord.executePopOps(BackStackRecord.java:865)
System.err:     at android.app.FragmentManagerImpl.executeOps(FragmentManager.java:2389)
System.err:     at android.app.FragmentManagerImpl.executeOpsTogether(FragmentManager.java:2187)
System.err:     at android.app.FragmentManagerImpl.removeRedundantOperationsAndExecute(FragmentManager.java:2140)
System.err:     at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:2047)
System.err:     at android.app.FragmentManagerImpl$1.run(FragmentManager.java:718)
System.err:     at android.os.Handler.handleCallback(Handler.java:769)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:98)
System.err:     at android.os.Looper.loop(Looper.java:164)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6540)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

The same error occurs in all Android devices and emulators that I have tested (Nexus 5, Nexus 6P, Huawei P10).
TNS Core Modules and NativeScript Pro UI are both at version 3.2.0.

_Copied from original issue: NativeScript/template-drawer-navigation-ts#52_

[NickIliev]

_From @alexmeia on November 30, 2017 11:41_

Actually, the problem is not directly related to this template or to RadSideDrawer component.
It seems a compatibility issue between RadSideDrawer and nativescript-google-maps-sdk plugin. The problem occurs only in the pages where this plugin is used.
I published this basic app to highlight the issue: https://github.com/alexmeia/nativescritp-sidedrawer-and-googlemaps

[tsonevn]

Hi @alexmeia,
Thank you for the sample project.
I reviewed this case and indeed this is a real issue while making back navigation to the page, where RadSideDrawer and google maps are used.
As a workaround at this time, I would suggest using navigate method with clear history option:

var navigationEntry = {
    moduleName: "main-page",
    clearHistory: true
};
topmost.navigate(navigationEntry);

[alexmeia]

Hi @tsonevn,
thank you for the suggestion. I found a good workaround for my case by forcing the initialization of the SideDrawer component before the page with the map was loaded. In the example app that I published, if you use the SideDrawer to navigate to another page _before_ opening the map and the related detail page, you will find that the exception will not be thrown. It seems that there is a Java library conflict here (different versions of the same library, maybe).
If the Map component initialize first the class involved, than, when the same class is needed by SideDrawer, it doesn't find the right version and the exception is thrown.
If the SideDrawer initialize first the class involved, the problem doesn't occur, maybe because the Map doesn't really need the class.

[TimHawkHodg]

Any progress on this? I have tried @alexmeia suggestion of forcing the rendering of the SideDrawer prior to map component (SideDrawer now added to the app.component.html instead of inside map.component.html) and it did not work. If there is an earlier iteration of nativescript-pro-ui that is compatible with then I will glady roll back. REALLY need some insight on this

[alexmeia]

@TimHawkHodg I use typescript without Angular. My trick to force the rendering of the SideDrawer prior to map component was to simulate a navigation event on the onNavigatingTo event of the first controller. Something like this:

if (isAndroid && homePageViewModel.instance.firstAccessToHome) {
    homePageViewModel.instance.firstAccessToHome = false;
    topmost().navigate({
        moduleName: "home/home-page"
    });
}

So, I navigate again to home page at first access to home page, and this workaround is working for me. If you test my sample app (the one intended to show the issue, without this workaround), you will notice that if you click in a SideDrawer navigation item before displaying the map, the error does not occur.
Anyway, if your app must display a map in the very first page, I think this will not work for you. Maybe the only consistent solution could be edit the dependencies of the google-maps plugin (or of the SideDrawer) so that the jars versions are the same.

[TimHawkHodg]

I tried re-routing to my map component in my ngOnInit using both topmost() and angular router but am still getting the same error.

ngOnInit() {
     if(this.firstVisit)
     {
            this.firstVisit = false;
            topmost().navigate({
                moduleName: "map"
            });
            //this.routerExtensions.navigate(['/map']);
     }
}

[yencolon]

Any solution for this? I'm facing the same problem right now

[shiv19]

You can try if my workaround helps
https://shiv19.com/how-to-fix-nativescript-google-maps-sdk-map-view-crash-inside-scroll-view/

[merigold]

My workaround, angular + ts:
HomeComponent is my start page, I create Child component Map then in home route:
const routes: Routes = [ { path: "", component: HomeComponent, canActivate:[AuthGuard], children: [ { path: "map", component: MapComponent} ]}, ];

next in homeComponent:
ngAfterViewInit(): void {
this.router.navigate(['/home/map']);
}

And last in AppComponent (is app entry component) I created event on back btn pressed
from doc: [)](https://docs.nativescript.org/angular/core-concepts/application-lifecycle#android-activity-events in constructor:

import {Frame} from "tns-core-modules/ui/frame";
android.on(AndroidApplication.activityBackPressedEvent, (args: AndroidActivityBackPressedEventData) => {
                args.cancel = true;
                if (this.frame.backStack.length < 2) {
this.router.navigate(['/home/map']);
                }
                else {
                    this.router.backToPreviousPage();
                }

Error occurred only when I back to first Page, so I detect it.