Payment Authorization flow with XState and React Native

This repository implements an example payment authorization flow for a banking app implemented with React Native, React Navigation and XState.

It is provided as example to this series of blog posts.

N.B: this is not production ready! It is just meant as an example of how to integrate XState and React Native/React Navigation.

Project Structure

The project is an Expo Managed project initialised with the Expo CLI. These are the main files/directories:

components/
paymentauthorization/
    screens/
    machine.js
    ...
App.js

• components/: components reused across multiple screens;
• paymentauthorization/: payment authorization flow implementation;
• paymentauthorization/screens/: payment authorization flow screens;
• paymentauthorization/machine.js: XState state machine implementation;
• App.js: main App file

Building and running the app

Refer to the instructions for managed workflow in the Expo docs.

• Run on Android emulator: npm run android
• Run on iOS simulator: npm run ios

Alternatively, you can simply try it on this Expo Snack. Note that LocalAuthentication is unavailable in Snack, so the biometrics enrollment check is stubbed out to always return true.

Notes

• On Android, you would probably want to disable the back hardware button for some screens of the flow.