nativescript-vue: iOS ScrollView when trying to scroll crashes on Physical and Emulator

Probably is a similar issue to his one: https://github.com/nativescript-vue/nativescript-vue/issues/24 My code works fine on android but it crashes on iOS

(Foundation) *** Assertion failure in -[UIGestureGraphEdge initWithLabel:sourceNode:targetNode:directed:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.33.6/Source/GestureGraph/UIGestureGraphEdge.m:25

Android Sample Running: android_gif

IOS Sample Crashing ios_gif

The code is:

    <TabViewItem title="Documentos">
        <ScrollView>
            <tarefas :lista-tarefas="tarefas.DOCUMENTOS"/>
        </ScrollView>
    </TabViewItem>

Inside the ‘tarefas’ component:

<template>
    <FlexboxLayout flexDirection="column">
        <StackLayout v-for="item in ListaTarefas" :key="item.ID_TAREFA" class="item">

            <CardView class="card wd-100" radius="0" shadowOffsetWidth="0"
                      shadowOffsetHeight="0" shadowOpacity="0" shadowRadius="0" >
                <FlexboxLayout flexDirection="row">
                    <StackLayout class="barra-situacao" :class="cardStatus(item, true)"></StackLayout>

                    <FlexboxLayout flexDirection="column">
                        <StackLayout class="icone-tarefa wd-30" verticalAlignment="center">

                            <StackLayout v-if="item.TIPO === DOCUMENTO">
                                <image src="~/images/ic_documento.png" class="wd-40"/>
                                <label text="Documento" class="text-center" textWrap="true"/>
                            </StackLayout>

                            <StackLayout v-if="item.TIPO === ORDEM_SERVICO">
                                <image src="~/images/ic_ordem_servico.png" class="wd-40"/>
                                <label text="Ordem de Serviço" class="text-center" textWrap="true"/>
                            </StackLayout>

                            <StackLayout v-if="item.TIPO === PROCESSO">
                                <image src="~/images/ic_processo.png" class="wd-40"/>
                                <label text="Processo" class="text-center" textWrap="true"/>
                            </StackLayout>

                        </StackLayout>
                    </FlexboxLayout>

                    <FlexboxLayout alignItems="column" flexWrap="wrap"
                                   class="wd-70 o-7">
                        <FlexboxLayout alignItems="flex-start" class="card-header">
                            <FlexboxLayout class="wd-50">
                                <image src="~/images/ic_calendario.png"/>
                                <label :text="item.PRAZO" class="data"
                                       :class="cardStatus(item, false)"/>
                            </FlexboxLayout>
                            <FlexboxLayout class="wd-50 label-situacao">
                                <image src="~/images/ic_relogio.png"/>
                                <label :text="labelStatus(item.STATUS)"/>
                            </FlexboxLayout>
                        </FlexboxLayout>
                        <FlexboxLayout alignItems="row" flexWrap="wrap" class="card-body">
                            <label class="nome-tarefa wd-100" :text="item.DESCRICAO"/>
                            <label class="detalhes-tarefa wd-100" :text="item.DETALHES"/>
                        </FlexboxLayout>
                    </FlexboxLayout>
                </FlexboxLayout>
            </CardView>
        </StackLayout>
    </FlexboxLayout>
</template>

Inside the tarefas component I don’t have any tap event

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

Well, I found a workaround and discovered why it isn’t easy to catch. If the Vue class with ScrollView is my first screen. It crashes. I Also had the same problem using the RadCalendar component.

The workaround is to call another class before this one. You must set a timeout before calling the $navigateTo method otherwise it will crash (using the @loaded or the mounted() method). Well, I created a second splash screen that waits 1 sec before calling the Home class and then everything works fine with any component. I hope it gives any light to the main developers and helps anyone who is having a hard time with it

mounted(){
        var vm = this;
        setTimeout(function () {
            //calls the class that was crashing when calling the first time
            //the 'clearHistory' class ignore this class and set the Home class as the first one
            vm.$navigateTo(Home,{clearHistory:true});
        },1000);
    }

+11

andreMariano90 on May 8, 2018

Having the same issue, but found solution I continued idea from @RinatDav so to not lose ActionBar try to wrap ScrollView in some other Layout helper

<Page class="page">
  <ActionBar title="My Tasks" class="action-bar" />
  <StackLayout>
      <ScrollView orientation="vertical" v-if="ready">
        <StackLayout orientation="vertical">
          <Label :text="i" v-for="i in 100" :key="i" height="70"></Label>
        </StackLayout>
      </ScrollView>
  </StackLayout>
</Page>

Tarens2 on Aug 29, 2018

@rickdps sorry, somehow your message got lost in my notifications feed.

Don’t know if you managed to fix it, otherwise here is what I did:

Create a new Vue component called Splash.vue and add the following code:

<template>
    <Page class="page">
        <Label>Splash Page</Label>
    </Page>
</template>

<script>
    import Newsfeed from './Newsfeed';

    export default {
        mounted() {
            setTimeout(() => {
                //calls the class that was crashing when calling the first time
                //the 'clearHistory' class ignore this class and set the Newsfeed class as the first one
                this.$navigateTo(Newsfeed, {clearHistory: true});
            }, 1);
        }
    }
</script>

Then in your router file (index.js) add a redirect to the Splash component instead of your main component:

First add an entry so that the router knows about your Splash component (page):

{
            path: '/splash',
            component: Splash,
            name: 'splash-page',
            meta: {
                title: 'Splash',
                requiresAuth: false
            }
},

Then further down in the file, make sure that the app is redirected to the Splash component when opened:

router.replace('/splash');

As a sidenote I don’t think this is an issue in the 2.0 alpha branch (next), however I will have to test this).

Reached on Sep 5, 2018

Was banging my head against the wall on this one also - workaround does do the job.

mrzorn on Jun 22, 2018

+1 to have this issue solved ASAP. This library is the future.

sagunkho on Jun 11, 2018

Also have this issue, has a solution been found, or has this even been acknowledged as being an issue? 😃

Reached on Jun 1, 2018