Navigation problem: going back and forth between components

Version

2.2.2

Reproduction link

https://github.com/sebastiansaenz/anatomia/tree/master/app/components

Platform and OS info

NativeScript 5.4.2, iOS Simulator (iPhone 6 12.2)

Steps to reproduce

• Run tns run ios --bundle and run in Simulator
• Tap “Começar”, then choose first item of list, then choose again first item of list, continue Quiz until the end and, lastly, tap “Voltar para a lição”. In the “Lição” view press “Voltar”. It goes back and forth between those two last views instead of going to the “Main” component.

QuizComplete.vue

<template>
    <Page actionBarHidden="true">
        <GridLayout columns="*" rows="*">
            <FlexboxLayout flexDirection="column" alignItems="center" justifyContent="center">
                <Label class="label" :text="Math.round(score)   '%'" />
                <Label class="label" :text="score > 60 ? $t('quizcomplete:text:welldone') : $t('quizcomplete:text:practice')" />
                <Button class="button" :text="$t('quizcomplete:button:backtolesson')" @tap="goToLesson" />
            </FlexboxLayout>
        </GridLayout>
    </Page>
</template>

<script>
    export default {
        props: {
            score: Number,
            lesson: {}
        },
        data() {
            return {

            }
        },
        methods: {
            goToLesson() {
                this.$navigateTo(this.$routes.Lesson, {
                    props: {
                        lesson: this.lesson
                    },
                    transition: {
                        name: 'slideBottom'
                    }
                })
            }
        }
    };
</script>

Lesson.vue

<template>
    <Page>
        <ActionBar :title="lesson.name">
            <NavigationButton :text="$t('actionbar:back')" android.systemIcon="ic_menu_back"
                @tap="goBack" />
        </ActionBar>
        <AbsoluteLayout ref="rootLayout">
            <ListView for="chapter in lesson.chapters" @itemTap="onItemTap" class="list-group"
                left="10" top="10" height="97%" width="100%" marginBottom="48">
                <v-template>
                    <Label :text="chapter.name" @tap="goToComponent(chapter)" class="list-group-item" />
                </v-template>
            </ListView>
        </AbsoluteLayout>
    </Page>
</template>

<script>
import { mapState } from 'vuex'

    export default {
        computed: {
            ...mapState([
                'lessons'
            ])
        },
        props: {
            lesson: {}
        },
        data() {
            return {

            }
        },
        methods: {
            goToComponent(chapter) {
                this.$navigateTo(this.$routes.Chapter, {
                    props: {
                        chapter: chapter,
                        lesson: this.lesson
                    }
                })
            },
            goBack() {
                this.$navigateTo(this.$routes.Lessons, {
                    props: {
                        lessons: this.lessons
                    }
                })
            }
        }
    };
</script>

What is expected?

To go to Main component

What is actually happening?

Going back and forth between Lesson and QuizComplete

---

I have tried some console.log inside the goBack function but it’s not even called when “Voltar” is pressed. Also, the routing is working perfectly in Android.

[msaelices]

@sebastiansaenz I’ve forked your repo and created this PR which I think fixes your problem: https://github.com/sebastiansaenz/anatomia/pull/1

[msaelices]

@sebastiansaenz I’ve tested the app and the behavior is exactly what your code is doing. Let’s see…

In the QuizComplete.vue component, in the Voltar para a lição handler, which is the goToLesson() method, you are doing a this.$navigateTo(this.$routes.Lesson) so the app will add the current view as a navigation entry. This means that if the user clicks to the native “back” button, it should go to the previous screen, which is QuizComplete.vue actually.

The key point here is that the iOS version back button is the native button included by iOS and does not go to the Lesson.goBack() method and do the native action of going back in the navigation history, which goes to the QuizComplete page. See https://stackoverflow.com/questions/41863216/nativescript-behavior-of-the-go-back-button

When you try the app on Android, the back button is not the Android native so it will call the Lesson.goBack(), which will do the navigation as you expect.

So the correct fix is in your app as there is no bug in NS-vue binding or the NS core library. I suggest you to hide the native back button (with clearHistory) and show an ActionItem with ios.position="left" as is suggested here: https://docs.nativescript.org/ui/action-bar#ios-specifics