ui-material-components icon indicating copy to clipboard operation
ui-material-components copied to clipboard

Issue: Material UI BottomSheet Not Expanding on iOS 18.1 (NativeScript Angular)

Open harisejaz10p opened this issue 8 months ago • 3 comments

I am using @nativescript-community/ui-material-bottomsheet in a NativeScript Angular project, and the bottom sheet is not expanding properly on iOS 18.1, but it works fine on Android.

Video

https://github.com/user-attachments/assets/8d6a0d6d-e603-4ee8-8679-b12a80f04bb7

Main Component

  openBottomSheet(): void {
    const options: BottomSheetOptions = {
      viewContainerRef: this.viewContainerRef,
      peekHeight: 200, // Expected to start at 200dp and be expandable
      trackingScrollView: "test" // Ensuring smooth scrolling
    };

    this.bottomSheet.show(DetailsComponent, options).subscribe((result) => {
      console.log("Option selected:", result);
    });
  }
}

Details Component

@Component({
  selector: 'app-details',
  template: `
    <StackLayout height="600" backgroundColor="black">
    </StackLayout>
  `,
})
export class DetailsComponent {}

Dependencies

"dependencies": {
  "@angular/platform-browser-dynamic": "~18.0.0",
  "@angular/router": "~18.0.0",
  "@nativescript-community/gesturehandler": "^2.0.32",
  "@nativescript-community/ui-material-bottomsheet": "^7.2.70"
}

✅ Android → The bottom sheet starts at peekHeight: 200 and expands properly. ❌ iOS 18.1 → The bottom sheet does not expand beyond peekHeight, even when dragging.

harisejaz10p avatar Feb 24 '25 14:02 harisejaz10p