Skip to content

Decouple complex navigation logic in react native apps using XState.

Notifications You must be signed in to change notification settings

Kuncheria-Kuruvilla/navigation-state-machine

 
 

Repository files navigation

navigation-state-machine

This repository demonstrates how to manage intricate navigation flows in React Native apps using XState, a powerful state machine library. It showcases a decoupled approach that enhances code organization, testability, and maintainability.

Key Features

  • State Machine-Driven Navigation: XState state machines control navigation decisions, leading to a clear separation of concerns and improved logic visibility.
  • Context Providers for State Access: Components access and interact with the state machine effortlessly through React Context providers.
  • Services for Navigation Actions: Navigation operations are encapsulated within services of the state machine.
  • Evnet Driven: Provides an event driven mechanism for navigation where the components only emit certain events and the navigation logic is written in the state machine in a declarative fashion.

Getting Started

1. Clone the repository:

git clone https://github.com/Kuncheria-KV/navigation-state-machine.git

2. Install dependencies:

cd navigation-state-machine
npm install

3. Run the app:

npm run android
npm run start

Further Exploration

  • Explore the code: Dive into the implementation to grasp the integration of XState with React Navigation.
  • Experiment with different flows: Modify the state machines to create more complex navigation scenarios.
  • Test your changes: Write tests to ensure the robustness of your navigation logic.

About

Decouple complex navigation logic in react native apps using XState.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 62.6%
  • Java 19.9%
  • Objective-C 8.8%
  • Starlark 4.7%
  • Ruby 4.0%