UI - ScrollView: Horizontal measurement / scrolling isn't working correctly

[bryphe]

Issue: If a <ScrollView /> is wrapped around a child element that overflows, it won't show a horizontal scroll bar.

Inside the ScrollView control, we create a container around the children - and we compare the size of the container and the size of the children to see if we need to show scrollbars.

For vertical scrolling, the height of the container and children is reported accurately, and if the child height is greater than the container height, we show scrollbars.

However, this isn't the case for horizontal scrollbars - we aren't getting the expected values reported for the width of the element.

This is potentially a styling / flex issue - probably just a bug in how we are applying styles.

There's a few related spots in the code that we could start looking. I kept in some debug logging to check the child width vs container width:

In addition, there's a descriptive comment here:

[glennsl]

This doesn't seem to work for the vertical scrollbar either, though it might be subtly different issue. You can see this in the TodoMVC example, where adding items until it overflows still doesn't have it render the vertical scrollbar. It's only the next time it renders, whether that's from scrolling, adding another item or something else, that it shows the scrollbar. But if that re-render is from adding a new item, the size of the scrollbar thumb is still wrong (until next render).

The issue seems to be that (naturally) the children are rendered after the ScrollView, and therefore when measured in ScrollView returns the "old" measurements.

The measurements model seems pretty flawed in general. Could it perhaps be made to work as a hook, that's fired post-rendering, and only if measurements have actually changed?