Let app state drive the navigation between screens

In this article, I show how to integrate an XState state machine with React Navigation to implement a complete app flow.

This is the second article of a 3 part series — check out the other parts:

In the first article, we imagined a payment authorisation flow for a mobile banking app:


Decouple business logic and the views with a well-established CS model.

In this article, I am describing how we modelled declaratively a complex flow of a banking app by leveraging XState, a JavaScript library to define finite state machines.

This is the first article of a 3 part series — check out the other parts:

In the last few months, I have been working on a banking app implemented with React Native.

The latest feature I implemented is a flow to authorise a payment transaction. It works as follows:


A few months ago we had the chance to build a mobile application for a major energy distribution company involved in e-mobility.

The company builds and distributes an e-mobility management dashboard integrated with all the major e-charging service vendors, allowing them to control the charging units distributed across the territory, monitor their parameters, manage contracts and provide complex data visualisations.

The goal was to provide quick access to a restricted set of functionalities of the portal. In particular, we had to provide a way to quickly research the charging units registry of the system for a particular Charging Unit, configure…

Simone D'Avico

Software Engineer with a passion for programming languages

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store