View full documentation and demo on https://stackflow.so

Stackflow is a project that implements Stack Navigation UX, which is mainly used in mobile devices (iOS/Android, etc.) in a JavaScript environment. So, it can help to easily develop hybrid apps and webviews.

• Stack screens and keep scrolling state.
• It supports transition effects that stack up the screen and the transition effect that disappears when you go back.
• Supports iOS-style swipe back.
• It passes the necessary parameters to the screen to be switched.

So, what advantages does Stackflow have compared to the existing navigation library?

• You can only use the state for stacks and transitions separately without UI. You can tear off the UI and use it as you like.
• You can inject any additional extensions you want between lifecycles through the plugin interface.
• Since the core logic and integration layers are separated, it can be integrated with various front-end frameworks. (Now only supports React)
• Because render logic and UI can be injected from the outside, mobile webview and desktop development can be done in one codebase.
• Server-Side Rendering is supported. (ReactDOMServer.renderToString)

$ yarn add @stackflow/config @stackflow/core @stackflow/react

import ReactDOM from "react-dom";
import { defineConfig } from "@stackflow/config";
import { stackflow } from "@stackflow/react";
import MyActivity from "./MyActivity";

const config = defineConfig({
  activities: [
    {
      name: "MyActivity",
    },
  ],
  initialActivity: () => "MyActivity",
  transitionDuration: 350,
});

const { Stack } = stackflow({
  config,
  components: {
    MyActivity,
  },
  plugins: [],
});

const App = () => {
  return (
    <Stack />