Open tommag21 opened 2 years ago
farfromrefug
commented
2 years ago @tommag21 it is normal. N scrollview wont support it. You need to use a NestedScrollView using a class like this:
class NestedScrollView extends ScrollView {
createNativeView() {
if (__ANDROID__) {
return new androidx.core.widget.NestedScrollView(this._context);
}
return super.createNativeView();
}
}
tommag21
commented
2 years ago Thanks. Do you have a sample or a demo I can refer to? I don't know how do I have to initialise the component correctly in a NativeScript-Vue app.
I tried registering the component on my main like this:
Vue.registerElement("NestedScrollView", () => NestedScrollView, {});But when I try to scroll the bottom sheet (with matching scrollViewId and bottomsheet id) I get this error:
tommag21
commented
2 years ago I managed to override the methods [isScrollEnabledProperty.getDefault] [isScrollEnabledProperty.setNative but now I get a ViewGroup error. I tried installing the plugin @triniwiz/nativescript-nested-scrollview but got the same error.
farfromrefug
commented
2 years ago @tommag21 this is your error com.tns.NativeScriptException: Error: Cannot convert object to Ljava/lang/Throwable; at index 0. Cant tell you where or why it is happening. You need to investigate this in your code
tommag21
commented
2 years ago The ScrollView contains a v-for that renders content fetched asynchronously. Rendering the ScrollView after the content is fetched does not throw the exception, but it's still not responsive to scrolling.
At the moment I'm short on time and cannot continue debugging the nested scrollview, maybe I will continue in the future.
fpaaske
commented
1 year ago @tommag21 it's now the future, and if you're still investigating, maybe my experience can help :) I've had the same issue as you (but with Angular) where the ListView/ScrollView is not responding to scrolling.
After talking to the super helpful guys (like @farfromrefug) on the NativeScript discord, this is what worked for me:
Create the native class CustomNestedScrollView
@NativeClass
class CustomNestedScrollView extends androidx.core.widget.NestedScrollView {
private scrollEnabled: boolean;
constructor(context: any) {
super(context);
}
getScrollEnabled(): boolean {
return this.scrollEnabled;
}
setScrollEnabled(enabled: boolean) {
this.scrollEnabled = enabled;
}
}Create the NestedScrollView to use in the markup
import {ScrollView} from "@nativescript/core";
declare var androidx;
export class NestedScrollView extends ScrollView {
createNativeView() {
if (__ANDROID__) {
return new CustomNestedScrollView(this._context);
}
return super.createNativeView();
}
}Create the markup
Notice the scrollViewId link between the BottomSheet and the NestedScrollView.
<BottomSheet [stepIndex]="stepIndex"
(stepIndexChange)="onIndexChanged($event)"
[steps]="bottomSheetSteps"
scrollViewId="linkedScrollView"
>
<GridLayout height="100%"
width="100%"
>
<ListView [items]="items">
<ng-template let-item="item">
<StackLayout [nsRouterLink]="['/item', item.id]">
<Label [text]="item.name"></Label>
</StackLayout>
</ng-template>
</ListView>
</GridLayout>
<GridLayout bottomSheet
rows="56, 100, auto"
columns="*"
class="bottomSheet"
>
<GridLayout rows="auto" columns="*, *, *, *" row="0">
<Button col="0" text="Step 0" class="Button" (tap)="setIndex(0)"></Button>
<Button col="1" text="Step 1" class="Button" (tap)="setIndex(1)"></Button>
<Button col="2" text="Step 2" class="Button" (tap)="setIndex(2)"></Button>
<Button col="3" text="Step 3" class="Button" (tap)="setIndex(3)"></Button>
</GridLayout>
<StackLayout row="1" backgroundColor="orange">
<Label text="Second step section"></Label>
</StackLayout>
<GridLayout row="2"
[height]="textViewHeight"
class="textView"
>
<NestedScrollView id="linkedScrollView" class="scrollView">
<StackLayout>
<StackLayout *ngFor="let item of items">
<Label [text]="item.name"></Label>
</StackLayout>
</StackLayout>
</NestedScrollView>
</GridLayout>
</GridLayout>
</BottomSheet>Now you can scroll in the list behind the bottomSheet, you can drag the bottomSheet up and down, AND you can scroll inside the bottomSheet.
tommag21
commented
1 year ago @fpaaske thank you! I ended up disabling the bottom sheet drag, I will try your solution asap.
tommag21
commented
1 year ago Gave it a try finally! That's what I did on NativeScript-Vue:
CustomNestedScrollView.ts
import { ScrollView } from "@nativescript/core";
export class NestedScrollView extends ScrollView {
createNativeView() {
if (__ANDROID__) {
@NativeClass
class CustomNestedScrollView extends androidx.core.widget.NestedScrollView {
private scrollEnabled: boolean = true;
constructor(context: any) {
super(context);
}
getScrollEnabled(): boolean {
return this.scrollEnabled;
}
setScrollEnabled(enabled: boolean) {
this.scrollEnabled = enabled;
}
}
return new CustomNestedScrollView(this._context);
}
return super.createNativeView();
}
}
app.ts
import Vue from "nativescript-vue";
import { NestedScrollView } from "~/components/CustomNestedScrollView";
Vue.registerElement("NestedScrollView", () => NestedScrollView);As a side note, I had to set scrollViewId con Android only to make the ScrollView work on iOS.
<BottomSheet android:scrollViewId="linkedScrollView">Very nice @tommag21 👍
On Android I cannot scroll a ScrollView placed inside a bottom sheet. A RadListView works fine.
I have updated the test repo to test this bug: https://github.com/tommag21/bottomsheet-test