Create interactive flowcharts and diagrams using the powerful combination of React Flow, Expo DOM Components, and additional tools like Expo Router, Tailwind CSS, and Nativewind for a seamless, customizable, and modern development experience.

This example demonstrates how to build engaging visual workflows in your Expo project with a fully styled and routed application setup.

• Interactive Flowcharts: Leverage React Flow's versatile library to design and manage node-based workflows.
• Cross-Platform Ready: Use Expo DOM Components for seamless web-based Expo integration.
• Expo Router Integration: Navigate between screens with the robust, file-based routing system from Expo Router.
• Tailwind CSS with Nativewind: Style your components efficiently using Tailwind CSS and Nativewind for consistent design across platforms.
• Customizable and Extendable: Modify styles, nodes, edges, and interactions to match your needs.

Clone this example or create a new project using the command below:

npx create-expo-app -e with-react-flow

1. Install Dependencies
   Navigate to your project directory and install required packages:

   cd your-project-name
   yarn

2. Start the Development Server
   Launch the Expo development server:

   npx expo

3. Explore and Customize
   Navigate through the app using Expo Router and modify the provided flowchart components, styles, and routes.

Deploy on all platforms with Expo Application Services (EAS).

• Deploy the website: npx eas-cli deploy — Learn more
• Deploy on iOS and Android using: npx eas-cli build — Learn more

• Powerful library for building node-based workflows.
• Highly customizable and interactive.

Learn More: https://reactflow.dev/docs/

• Integrates React DOM APIs for web projects in Expo.
• Makes it easy to build web-compatible apps.

Learn More: https://docs.expo.dev/guides/dom-components/

• A file-based routing system for Expo apps.
• Simplifies navigation with nested routes.

Learn More: https://docs.expo.dev/router/introduction/

• Tailwind CSS enables utility-first styling for rapid UI development.
• Nativewind bridges Tailwind with React Native for consistent styling across platforms.

Learn More:

• Tailwind CSS: https://tailwindcss.com/
• Nativewind: https://www.nativewind.dev/

• Routing: Modify the routes or create additional screens in the app/ directory using Expo Router.
• Styling: Edit Tailwind classes or configure tailwind.config.js to customize themes.
• Node Types: Extend nodeTypes and edgeTypes in React Flow to create custom flowchart components.
• State Management: Integrate tools like Zustand or Redux for advanced state handling.