Flow component » Current, Previous, and Stack

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
Download Framer project

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

current screen as title, previous screen as back button


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
        breadcrumbs.text += " > " + screen.name
Download Framer project

(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
Breadcrumbs trail with all the screens in the Stack