Current, Previous, and Stack

You already know you can reach a flow’s ScrollComponent on scroll and its transparent background on overlay … but, there’s more!

Current screen

At any time, you can check which screen is currently visible on the current property.

# Are we currently on “screenB”?
if flow.current is screenB
    # do something

In the prototype on the next page, I set the navigation bar’s title to the name of the current screen.

flow.onTransitionEnd ->
    Title_Text.text = flow.current.name

Previous screen

And there’s also previous, which on the first screen will, of course, be empty.

In the same prototype, I use it to update the back button.

Back_Text.text = flow.previous.name

(These text changes happen after the transition has completed, by listening to the onTransitionEnd transition event.)

Stack

Not only the current and previous screens can be retrieved. There’s also stack, which contains an array of all the screens that were shown.

There’s no limit to how many screens it can hold (even the same screens repetitively), and with every showPrevious() the last item gets removed from this array.

So at all times, the first screen you added to your FlowComponent (the one that didn’t get to animate) can be found at flow.stack[0].

This next prototype loops through all the screens in the stack and constructs a breadcrumbs trail.

for screen, i in flow.stack
    # First screen
    if i is 0
        breadcrumbs.text = screen.name
    # Remaining screens have a ‘>’ before their name
    else
        breadcrumbs.text += " > " + screen.name

(Again, the breadcrumbs are updated when the transition has completed, by listening to the onTransitionEnd transition event.)

Size of the Stack

The stack contains an array, so we can check its length to see how many screens the user has advanced.

This next line was used in the previous prototype to check if the back button should be visible or not:

# Are we on the first screen?
if flow.stack.length is 1
    Back_Button.visible = no