https://github.com/simonedavico/payment-authorization-flow
Implementation of a payment authorisation flow for a banking app with React Native, React Navigation and XState. https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f
https://github.com/simonedavico/payment-authorization-flow
react-native react-navigation xstate
Last synced: 9 months ago
JSON representation
Implementation of a payment authorisation flow for a banking app with React Native, React Navigation and XState. https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f
- Host: GitHub
- URL: https://github.com/simonedavico/payment-authorization-flow
- Owner: simonedavico
- Created: 2021-01-04T17:31:25.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-04T17:54:49.000Z (over 5 years ago)
- Last Synced: 2025-04-09T23:59:06.989Z (about 1 year ago)
- Topics: react-native, react-navigation, xstate
- Language: JavaScript
- Homepage:
- Size: 157 KB
- Stars: 13
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://medium.com/welld-tech/untangle-complex-flows-in-your-react-native-app-with-xstate-1b11d0b8a91f).
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](https://docs.expo.io/workflow/development-mode/) 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](https://snack.expo.io/@simonedavico/payment-authorization-flow-with-xstate).
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.