tkMainContent is re-created while navigating back

7 posts, 0 answers
  1. Manojkumar
    Manojkumar avatar
    4 posts
    Member since:
    May 2017

    Posted 11 May Link to this post

    When opening a detail page and navigating back to master (SideDrawer), tkMainContent is re-created. A similar issue is already discussed here and the solution mentioned didn't work or was not clear enough. If anyone has a solution, it's much appreciated. Thanks in advance.

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 11 May Link to this post

    Hello,
    First of all, thank you for your interest in UI for NativeScript.

    I reviewed the discussion in the attached link, however, it would help if you could give us some more info about the problem you are facing with.
    You could also provide information about your environment(CLI, tns-core-modules, node versions), which will help us to investigate further this case.

    For your convenience, I created a sample project, which could be found in the attached archive. You could review it and make the needed changes, which will allow us to debug this case on our side.

    Thank you in advance for your cooperation.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Manojkumar
    Manojkumar avatar
    4 posts
    Member since:
    May 2017

    Posted 12 May Link to this post

    @nikolay.tsonev First of all thank you for the support. I tried your sample, it works like a single window application where you have only one router-outlet.

    What I'm looking for is to use page-router-outlet along with router-outlet where router-outlet is used in drawer's main content and top level pages will be opened in same drawer window. Then I want to open a new window with back button for my detail pages (keeping the drawer window state unchanged). That's when I start facing issues.

    Uploaded a sample of my app flow here (Sorry not sure how to attach files here).

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 12 May Link to this post

    Hi Manojkumar,
    Thank you for the attached sample project.

    I reviewed it, however, was unable to reproduce issues with navigation in the project. Could you please give me some steps, which could help me to reproduce this behavior and what is the expected result. Also, does this problem is reproducible for both iOS and Android, or it is something platform specific.

    Regarding the topic, if I understand you correctly, you would like to create an app, where the back button in the ActionBar to be hidden, while you are on some of the main pages and this button to be shown only when the app navigate to some of the details ones.

    If this is the case I would suggest using only router-outlet, which will allow you to reuse the SideDrawer component and while navigating to the main pages to setup clearHistory property to false.

    Bear in mind that the router-outlet will disable the showing automatically the back button, however for the details pages, you could create ActionItem, which could be used for the back navigation. For example:
    <ActionBar title="Details" class="action-bar">
        <ActionItem (tap)="onBack($event)">
          <Button class="" text="Back" class="action-item"></Button>
        </ActionItem>
    </ActionBar>


    For your convenience, I am attaching a sample project.

    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Manojkumar
    Manojkumar avatar
    4 posts
    Member since:
    May 2017

    Posted 12 May in reply to nikolay.tsonev Link to this post

    Sorry, I could have explained better. I do want to open a new page with page router outlet for some of the pages in my app. At the same time I need some other pages of my app to be replaced on the drawer's main content using router outlet.

    It is easily reproduced on both iOS and Android. Here I have recorded a session from iOS Simulator. 

    Here in the video, I want the welcome and help pages to be replaced in drawer's main content with router-outlet. Which works just fine. I want the login page to be opened in a new window with back button. So any time I can come back to drawer window without loosing it's current state. if you closely notice in the video, when I navigate back from login window to the drawer window, drawer's main content is refreshed / recreated.

    You may also refer the comment here, which clearly demonstrates the same issue.

  6. Manojkumar
    Manojkumar avatar
    4 posts
    Member since:
    May 2017

    Posted 16 May Link to this post

    @nikolay.tsonev Were you able to reproduce the issue, any possible work around?
  7. Alex
    Admin
    Alex avatar
    130 posts

    Posted 16 May Link to this post

    Hi Manojkumar,
    I have tried to summarize the problem in this github issue. Can you check the issue and verify that these are the problems you are facing or comment additionally if you want to add something.

    Currently, we don't have a workaround for this issue. I have explained in the "Additional Info" section what the underlying problem is, so any ideas or suggestions from your side will be appreciated.

    Regards,
    Alex
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top