Activity

Activity is a single screen that gets stacked one by one. Activities have the following properties and can be accessed using the useActivity() hook if needed.

Option	Type	Description
id	`string`	Unique ID value for each activated activity screen
name	`string`	Registerd activity name
transitionState	`enter-active`, `enter-done`, `exit-active`, `exit-done`	Transition state of current activity

Registering an Activity

To use an activity, first declare it in stackflow.config.ts and register the React component in stackflow().

Declare the activity's parameter types using module augmentation:

MyActivity.tsx

declare module "@stackflow/config" {
  interface Register {
    MyActivity: {
      // activity has no parameters
    };
  }
}

An activity is a React component declared with the type ActivityComponentType.

MyActivity.tsx

import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
 
const MyActivity: ActivityComponentType<"MyActivity"> = () => {
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>My Activity</div>
    </AppScreen>
  );
};
 
export default MyActivity;

💡

ActivityComponentType is compatible with React.ComponentType. Therefore, you can continue to use React.FC, React.Component, etc., as you have been.

💡

Stackflow does not provide a default UI. Instead, it offers basic iOS (cupertino) and Android (android) UIs through the @stackflow/plugin-basic-ui.

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyActivity",
    },
  ],
  transitionDuration: 350,
});

stackflow.ts

import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { config } from "./stackflow.config";
import MyActivity from "./MyActivity";
 
export const { Stack, useFlow } = stackflow({
  config,
  components: {
    MyActivity,
  },
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
});

Registering initial Activity

Have you successfully registered the activity? However, the <Stack /> component that you initialized earlier might not be rendering anything. This is because you haven't set an initial activity. Add the initialActivity option to defineConfig() as follows.

stackflow.config.ts

import { defineConfig } from "@stackflow/config";
 
export const config = defineConfig({
  activities: [
    {
      name: "MyActivity",
    },
  ],
  initialActivity: () => "MyActivity",
  transitionDuration: 350,
});

If you have successfully registered the initial activity, you can see the rendered result on the screen.

💡

Have you experienced the auto-completion of the MyActivity value in TypeScript? Stackflow will help improve your development productivity through such auto-completion experiences.

Registering Activity with Parameters

Some activities require specific parameters when used. Declare the parameter types using module augmentation and use them in the component:

Article.tsx

import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
 
declare module "@stackflow/config" {
  interface Register {
    Article: {
      title: string;
    };
  }
}
 
const Article: ActivityComponentType<"Article"> = ({ params }) => {
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{params.title}</h1>
      </div>
    </AppScreen>
  );
};
 
export default Article;

⚠️

Caution - If the required parameters are not passed from the previous screen, a critical error may occur.

🚫

Warning - Initial activity must not require parameters.

Have you successfully registered the activity? Now, let's learn how to open the registered activity and navigate between them.

Installation Navigating Activities