Android: ScrollableView dimension issue

[tyroneBaba]

On Android, I open a page that opens a scrollable view with a height and width are Ti.UI.SIZE. On the first open, it seems to be fine but on the second open, it disappears and doesn't show. If I set the dimensions to a fixed size it's fine but unfortunately, I can't predict the size.

Has anybody experienced this or know what this is? The height and width of the content in the scrollable view change dimensions but opening the same page that should have the same content, the second time, makes everything disappear.

const container = Ti.UI.createView({
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        top : 0
    });
    const viewArray = [];
    
    for(let i = 0; i < item.configs.length; ++i)
    {
        if(item.configs[i].Upgrades != null && item.configs[i].Upgrades.length > 0)
        {
            const modView = createMods(i);// this spits out the views that can change in height and width
            if(modView)
            {
                modView.id = i;
                viewArray.push(modView);
            }
        }
    }

    const configLoadout = Ti.UI.createScrollableView({
        width : Ti.UI.FILL,
        height : Ti.UI.SIZE,
        views : viewArray,
        showPagingControl : viewArray.length > 1 ? true : false,
        cacheSize : 3
    });
    
    container(configLoadout);

[m1ga]

Can you create an example? I'm not sure how your layout looks like. It should be something like

<Window>
<ScrollableView>
 <View />
 <View />
 <View />
</ScrollableView>
</Window>

You can use postlayout to get the correct size of the Views to set a fixed value.

[tyroneBaba]

I've updated the initial post with an example. Also, I was thinking about a postlayout event but it just makes things kinda hairy. worst case, I'll give it a try.

[m1ga]

🤔 would this be the same examples:

const window = Ti.UI.createWindow();

const container = Ti.UI.createView({
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	top: 0
});
const viewArray = [];

function createMods() {
	return Ti.UI.createView({
		height: Math.random() * 200,
		width: Ti.UI.FILL,
		backgroundColor: "red"
	})
}

for (let i = 0; i < 10; ++i) {
	var modView = createMods(i);
	viewArray.push(modView);
}

const configLoadout = Ti.UI.createScrollableView({
	width: Ti.UI.FILL,
	height: Ti.UI.SIZE,
	views: viewArray,
	showPagingControl: viewArray.length > 1 ? true : false,
	cacheSize: 3
});

container.add(configLoadout);
window.add(container);
window.open();

I can't really test it with your example so I've added some more code to it.

Keep in mind: since you have cacheSize:3 it will make the height to the max height of the slides that are in cache. So if I set it to 10 in my example it will stay the same height while sliding through.

Otherwise add another view around your content views that will have a fixed height.