How to correctly handle nested scroll views in Nativescript/Angular - user-interface

Question

I'm trying to create in Nativescript(Testing it on Android) a view containing a Donut Chart and an Accordion-like list below it, and enable infinite scrolling, so that when i scroll down the chart will scroll up out of the view, leaving the whole screen available for the list.
The problem is that no matter what i try the accordion-list will either scroll out of the view, leaving the chart on top of it, basically appearing like it's hiding behind the chart, or the elements won't display correctly / at all.
This is how my layout is made so far
Index screen
<ScrollView heiht="100%>
<StackLayout>
<DonutChart [chartDataIterable]="chartData"></DonutChart>
<Accordion [items]="items"></Accordion>
</StackLayout>
</ScrollView>
Donut Chart Component
<GridLayout rows="auto">
<RadPieChart row="0" height="300" allowAnimation="true" (pointSelected)="changeDisplayValue($event)" (pointDeselected)="resetToTotal($event)">
<DonutSeries tkPieSeries seriesName="dataSeries" selectionMode="DataPoint" outerRadiusFactor="0.9" expandRadius="0.4"
outerRadiusFactor="0.7" innerRadiusFactor="0.7" [items]="chartDataObservable" valueProperty="value" legendLabel="type"></DonutSeries>
</RadPieChart>
<StackLayout row="0" horizontalAlignment="center" verticalAlignment="center">
<Label horizontalAlignment="center" [text]="currentType"></Label>
<Label horizontalAlignment="center" [text]="currentTypeAmount"></Label>
</StackLayout>
</GridLayout>
Accordion Component
<ListView [items]="items" height="100%">
<ng-template let-item="item">
<AccordionCell [item]="item"></AccordionCell>
</ng-template>
</ListView>
The GridLayout wrapping the chart is used to add some info at the center of the donut, and the accordion height 100% is set to prevent the list view from taking the height of a single cell.
I suspect that the issue is due to ListView integrating a ScrollView by default, thus prioritizing the scrolling in the ListView and never triggering the scrolling of the outer ScrollView since the content never exceeds the screen size.

Answer 1

Since there hasn't been an answer for a week now i'll share the workaround i came up with.
Instead of using a ScrollView to scroll through my chart and accordion(basically ListView) components, i've moved the Chart and positioned it as the first cell of the ListView, this way both scrolling and cell recycling work well. The only drawback is that a little extra cell management is needed in order to make sure that the chart stays on top, without losing the first entry of the list's data source.
accordion.component.ts
ngOnInit(): void {
this.observableItems = new ObservableArray(this.items);
this.observableItems.unshift({});
}
public templateSelector (item: any, index: number, items: ObservableArray<any>){
if(index === 0)
return "chart";
else if(item.date != items.getItem(index-1).date)
return "date";
else
return "default";
}
accordion.component.html
<RadListView [items]="observableItems" [itemTemplateSelector]="templateSelector" (itemLoading)="itemLoading($event)">
<ng-template tkListItemTemplate let-item="item" let-index="index">
<AccordionCell [item]="item" [index]="index" [itemLoadedEvent]="itemLoadedEvent.asObservable()"></AccordionCell>
</ng-template>
<ng-template tkTemplateKey="date" let-item="item" let-index="index">
<StackLayout>
<Label [text]="item?.date | date: 'dd/MM/yyyy'"></Label>
<AccordionCell [item]="item" [index]="index" [itemLoadedEvent]="itemLoadedEvent.asObservable()"></AccordionCell>
</StackLayout>
</ng-template>
<ng-template tkTemplateKey="chart">
<DonutChart [chartDataIterable]="chartDataIterable (chartSectionSelected)="chartSectionSelectedHandler($event)" (chartSectionDeselected)="chartSectionDeselectedHandler()"></DonutChart>
</ng-template>