Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28489] iOS 15/Android: Add cross-platform page sheet component

GitHub Issuen/a
TypeNew Feature
PriorityNone
StatusOpen
ResolutionUnresolved
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
Labelsn/a
ReporterHans Knöchel
AssigneeUnknown
Created2021-06-12T13:02:26.000+0000
Updated2021-11-11T15:57:01.000+0000

Description

iOS 15 finally adds support for medium-sized modal page sheet (like the BottomSheet component on Android), it is also swipeable and therefore could be a great cross-platform API.

Comments

  1. Michael Gangolf 2021-07-18

    A first test for Android: [demo video](https://migaweb.de/ti_bottomsheet.mp4) Idea for properties, events, methods: * method: toggle (to show hide it) * method: addView (adding content) * event: stateChanged (e.g. after toggle) * property: peekHeight ("height" when collpased)
  2. Michael Gangolf 2021-07-19

    Start for Android: https://github.com/appcelerator/titanium_mobile/pull/12966 Not sure what iOS can do and how we should call methods and so on. But it's a start and don't want to lose that code ;)
  3. Joshua Quick 2021-07-22

    [~michael], on iOS, Titanium devs can already do this today via a "modal" Ti.UI.Window using a bottom sheet style. The Android equivalent to this would be the Java BottomSheetDialog, but I wouldn't want to attempt parity on Android with a modal Activity which doesn't quite work the same. Maybe we need introduce 2 different Titanium types? * Ti.UI.BottomSheetView which you add to a Ti.UI.Window. The idea is you can tap outside the bottom sheet without collapsing it. * Ti.UI.BottomSheetDialog where tapping outside of it would automatically close it. (Or maybe this should be a "style" applied to AlertDialog?)
  4. Michael Gangolf 2021-07-22

    That sounds like a good idea. I had the BottomSheetDialog running already, too. But since there is https://github.com/hansemannn/titanium-android-bottom-sheet I switched to the normal view. But I like the style idea but perhaps for the OptionDialog
  5. Hans Knöchel 2021-07-22

    My 2 cents: The new iOS 15 API is definitely also window-based, not view based. Actually, it's just a simple property in the open({ ... }) settings, like modalStyle. Therefore, for a "real" bottom sheet, the base should always be a window (or a view that is internally added / opened as a window). In any case, I'd vote for the Ti.UI.BottomSheetDialog and do the parity under the hood: Use similar code like in my module for Android and add the view to a natively-create TiUIWindowProxy for iOS. Doable!
  6. Joshua Quick 2021-07-22

    [~hknoechel], I agree with you. Implementing a Ti.UI.BottomSheetDialog is probably the way to go. Or should we call it a PageSheetDialog? I haven't checked how it works on iPad. Maybe the name shouldn't imply it comes from the bottom only... even though that's how it currently works on iPhone and Android. (I'm open to different names.)
  7. Hans Knöchel 2021-07-22

    +1 for page sheet. On the iPad, it's shown modally for best UX.
  8. Michael Gangolf 2021-07-23

    I think both are great. BottomSheet for a normal (none darkening) overlay and the BottomSheetDialog/PageSheetDialog for the modal one: https://www.migaweb.de/ti_bottomsheet_dialog.mp4 
       var table2 = Ti.UI.createTableView({
   	data: tableData,
   	height: 200,
   	width: Ti.UI.FILL,
   	backgroundColor: "#000",
   });
   var bsd = Ti.UI.createBottomSheetDialog({
   	options: ["option 1", "option 3", "option 4"],
   	//androidView: table2
   });
   bsd.show();
    providing an androidView will render the table, just the options will create a normal optionDialog like titanium-android-bottom-sheet. Still need to add the other parameters.
  9. Michael Gangolf 2021-07-25

    The BottomSheet brings some problems with the z-order and clicking through it since it has to be in a CoordinatorLayout. Have to do some more tests there. The Dialog version is looking better. I've extended the options to accept an object with title, image (for the left icon) and a custom text color. Makes it more powerful ot use
  10. Joshua Quick 2021-07-26

    The BottomSheet brings some problems with the z-order and clicking through it since it has to be in a CoordinatorLayout. [~michael], the reason buttons appear on-top of the bottom sheet view is because their "elevation" is set to a higher value. Elevation literally raises the view higher on the z-axis and ignores the order in the view group. Buttons have elevation set on them by default to show a drop shadow. A simple solution might be to apply elevation to BottomSheetView by default. This would give it a drop-shadow effect which people would probably want anyways. We should probably double check how navigation drawer layout does this since it's a view (not a dialog) and doesn't have this elevation problem.
  11. Hans Knöchel 2021-08-06

    Okay, so why not do this via a slim module? We could use ti.draggable for the iOS < 15 backwards compatibility and the discussed BottomSheet API for Android. So it'd be available for all versions and all platforms. Brilliant. To get things started, I just open sourced the module we made internally and use in production for our app: https://github.com/hansemannn/titanium-bottom-sheet I will add the iOS 15 APIs there as well and make ti.draggable a dependency for iOS. Then we could polyfill iOS < 15 support via a JS bridge. Is that still possible for native modules?
  12. Michael Gangolf 2021-11-11

    Can be closed in favor of the modules. iOS: https://github.com/mbender74/ti.bottomsheetcontroller-ios

JSON Source