Can't get it to show twice

[deckameron]

Hi @mbender74 ,

Thank you for creating this module!

I am using your example to test the module but I can't get it to show twice. I only shows the first time. I have edited your example code and added a button show the bottom sheet when it is clicked.

This is the event sequence:

# Clicked the button
[INFO]  bottomSheet opened
# Closed the bottomSheet
[INFO]  bottomSheet dismissing
[INFO]  bottomSheet closed
# Clicked the button again
[ERROR] BottomSheet is showing. Ignoring call

if you change 'nonSystemSheet' para true it still won't work twice but the error changes to:

[ERROR] BottomSheet no contentView set - Ignoring call

The bottomSheet is "closed", but the error event says it is showing. Am I doing anything wrong?

My code is this:

var window = Titanium.UI.createWindow({});

var TiBottomSheetControllerModule = require("ti.bottomsheetcontroller");

var tableRows = [];

var tableData = [ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'},{title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];

for (var j = 0; j < tableData.length; j++) {
    var rowView = Ti.UI.createView({
        top:1,
        bottom:1,
        width:Ti.UI.FILL,
        height:62,
        backgroundColor:'transparent'
    });

    var title = Ti.UI.createLabel({
        color: '#000',
        width:Ti.UI.SIZE,
        height:Ti.UI.SIZE,
        font: {
            fontFamily : 'Arial',
            fontSize: 22,
            fontWeight: 'bold'
        },
        text: tableData[j].title
    });
    rowView.add(title);

    var row = Ti.UI.createTableViewRow({
        className:'test',
        height:60,
        backgroundColor:'transparent',
        width:Ti.UI.FILL
    });
    row.add(rowView);
    tableRows.push(row);
}

var bottomView = Ti.UI.createTableView({
    top:0,
    left:0,
    right:0,
    bottom:0,
    showVerticalScrollIndicator: true,
    width:Ti.UI.FILL,
    height:500,
    contentHeight:Ti.UI.SIZE,
    minRowHeight:60,
    scrollable: true,
    scrollType:'vertical',
    backgroundColor:'transparent'
});

bottomView.setData(tableRows,{animated:false});

var bottomSheetController = TiBottomSheetControllerModule.createBottomSheet({
    detents:{large:true,medium:true,small:false}, // "small" has effect only when "nonSystemSheet:true"
    startDetent:'medium', // medium or large -  when "nonSystemSheet:true" also "small" is possible -- when startDetent is "small" and detents:{small:false} is defaults to "medium" and so on...
    preferredCornerRadius:20,
    prefersEdgeAttachedInCompactHeight:false, // has effect only when "nonSystemSheet:false"
    prefersScrollingExpandsWhenScrolledToEdge:false, // has effect only when "nonSystemSheet:false"
    widthFollowsPreferredContentSizeWhenEdgeAttached:true, // has effect only when "nonSystemSheet:false"
    prefersGrabberVisible:true, // bottomSheet grabberHandle visible true / false
    nonModal:true, // has effect ONLY when "nonSystemSheet:false" on iOS >= 15
    largestUndimmedDetentIdentifier:'small', // medium or large (also "small" available when "nonSystemSheet:true") - if not set, it is full dimmed depending on activated detents when "nonSystemSheet:true" the property also allow to interact with the view in the background of the bottomSheet - when not dimmed, when dimmed interaction is not possible with the view in the background
    contentView: bottomView,
    // closeButton:YOUR_CLOSEBUTTON_VIEW_FOR_THE_SHEET, // add a closeButtonView to the bottomSheet
    backgroundColor:'#eeeeee',

    nonSystemSheet:false, // defaults to "true" if not set - non iOS 15 SheetController (backwards compatible to non iOS15) when "true" - iOS15+ SheetController when "false" - if non iOS15 and set to "false" it also defaults to "true"
    nonSystemSheetTopShadow:true, // has effect only on "nonSystemSheet:true"
    nonSystemSheetShouldScroll:true, // when your contentView is not a scrollable view, then this activates scrolling if the contentView is larger then the bottomSheet
    // ATTENTION: when you put a tableView, scrollView or listView inside your contentView this property disables scrolling in the contentView in favour of the bottomSheetScrollView
});

bottomSheetController.addEventListener('dismissing', function() {
    console.log("bottomSheet dismissing");
});

bottomSheetController.addEventListener('closed', function() {
    console.log("bottomSheet closed");
});

bottomSheetController.addEventListener('opened', function() {
    console.log("bottomSheet opened");
});
bottomSheetController.addEventListener('detentChange', function(e) {
    console.log("\n\n bottomSheet detentChange: "+JSON.stringify(e)+"\n\n");
    console.log("returns the at any time you call the propery -> bottomSheetController.selectedDetentIdentifier: "+bottomSheetController.selectedDetentIdentifier);
});

var button = Titanium.UI.createButton({
    title: 'show'
});
window.add(button);

button.addEventListener('click', function (){
    bottomSheetController.show({
        animated:true
    });
});

window.open();

[dlewis23]

I had this same issue and was able to fix it by setting the content view on the open button.

bottomSheetController.contentView = bottomView;

[deckameron]

HI @dlewis23,

Thank you for your assist. :-) Unfortunately I didn't quite understand what you meant by "setting the content view on the open button". Sorry! Where did you put the code bottomSheetController.contentView = bottomView;?

Did you mean this:

button.addEventListener('click', function (){
        bottomSheetController.contentView = bottomView;
    bottomSheetController.show({
        animated:true
    });
});

[dlewis23]

@deckameron

Yes that is what I did and it worked for me to fix the issue of it only opening once.

[deckameron]

@dlewis23 it did not work for me. :-( It is still showing only once.

[EDIT] To make it work you have to set nonSystemSheet:true

[jasonkneen]

I still get this even with nonSystemSheet:true

[deckameron]

@jasonkneen Did you do this as well?

button.addEventListener('click', function (){
        bottomSheetController.contentView = bottomView;
    bottomSheetController.show({
        animated:true
    });
});

I still get this even with nonSystemSheet:true

[dlewis23]

When using the native I could not get it open again. Only when nonSystemSheet = true will it work repeatedly.

[mbender74]

I updated the module... eventListerners changed and the methods

show() is now open() and hide() is now close()

Also when closed you need to do createBottomSheet() again, because the instance is destroyed by close() method!!!

[mbender74]

multiple instances of the bottomSheet will now also work!

[dlewis23]

@mbender74 Is their anyway to keep the sheet open in the small state when nonSystemSheet is true?

[mbender74]

@dlewis23 yes -> new property nonSystemSheetDisablePanGestureDismiss:bool