Last year we released Appyx 1.0, Bumble’s Model-driven navigation library for Jetpack Compose:

https://github.com/bumble-tech/appyx

Now, we’re evolving the library further with the release of Appyx 2.0 which includes:

• The addition of gesture control.
• We’re splitting the library into a model-driven navigation and a new component kit part. The latter speeds up the creation of any UI component dramatically. These components can then be used either as part of Appyx’s model-driven navigation or on their own.
• Compose Multiplatform support.

Read on below the recap for more details.

Recap on Appyx 1.0

If you missed out on Appyx so far, check out last year’s summary:

In short, Appyx 1.0 allows you to implement your custom navigation behaviour directly from code. It is novel in that:

1. You’re not limited to slides and crossfades.
   In fact, you can have completely custom transition animations based on Jetpack Compose Modifiers.
2. You’re not limited to a back stack navigation.
   With Appyx’s model-driven approach, you can define any custom component from stacks, to pagers, to dating cards and beyond (see some examples below — all of which are driven by the same underlying concept).
3. You can transform the screen itself.
   See the last gif on the right side below!

Our motivations behind 2.0

As you can see in the above examples, Appyx allows you to go way beyond usual navigation approaches with custom components, custom transitions, and screen transformation.

But, what about gesture control?

We really wanted to be able to control these components with our gestures, not just programmatically:

But when a gesture is supposed to mutate more than just the horizontal or vertical position of an element, or more than one element should be affected, things can get complicated.

We also wished to see the same exact visual transformations when applying gesture control — without having to mimic the programmatically-triggered transitions.

To do this, we needed to completely rethink and reimplement how we approached animation. We’ll come back to this topic in the next article and see how what we implemented makes our lives much easier.

Not just navigation, and not just Android

Custom components with gesture control are powerful, and there are many use cases for them outside of navigation, too.

For 2.0, we extracted these concerns to a separate artifact, so that you can use them standalone without depending on Appyx as a navigation solution.

And while we’re on that, if it’s no longer dependent on navigation or Android, it can also be made Compose Multiplatform fairly easily!

A brief look at Appyx 2.0

As mentioned above, Appyx is now split into multiple libraries:

Appyx Navigation

:appyx-navigation cares about the composable nature of navigation — parent and child node relationships in a tree structure. It also handles other navigation-related concepts, such as lifecycle, back handling, deep linking, etc.

You can find more info at:

https://bumble-tech.github.io/appyx/navigation/

Appyx Interactions

What fun is navigation without visuals? This is added by :appyx-interactions, which is a component kit. Its main appeal is that you can create stateful, gesture controlled UI components very quickly — they can then be used either standalone (like a self-contained widget, feature or mini-game), as a composition of other Appyx components, or even as part of the navigation tree.

In the latter case, Appyx will rely on the component to drive the visual changes to navigation (e.g. your dragging gestures resulting in elements moving on the screen), and in return it will give your component automatic lifecycle updates, state management and back handling.

At the same time, these components are usable on their own, so you can benefit from Appyx Interactions even if you don’t want to depend on Appyx as a navigation solution.

You can find interactive, draggable demos and more info on our project page:

https://bumble-tech.github.io/appyx/interactions/

Appyx Components

Finally, :appyx-components is like a component gallery — components pre-built by us using :appyx-interactions and packaged as standalone artifacts, so that you don’t need to start from scratch. Here you can find standard components such as a back stack or a pager with several visualisations, as well as other, more experimental components.

Find interactive, draggable demos and more info on our project page:

https://bumble-tech.github.io/appyx/components/

More to follow

Next time we’ll take a look at how Appyx speeds up the creation of transitions and gestures without writing a single line of animation-related code.

Meanwhile, you can check our GitHub repository:

https://github.com/bumble-tech/appyx

And our new project page with embedded, interactive samples running on Compose Multiplatform:

https://bumble-tech.github.io/appyx/

And if you’re on Kotlinlang Slack, come find us on #appyx!

See you next time!