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 actually use an activity, you need to register it with the stackflow() function before using it. An activity is a React component declared with the type ActivityComponentType.

MyActivity.tsx

import { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
 
const MyActivity: ActivityComponentType = () => {
  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.

If you have declared the activity correctly, register it in the activities field of the stackflow() function as follows.

stackflow.ts

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

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. If you want to load a specific activity initially, add the initialActivity option as follows.

stackflow.ts

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

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. In such cases, declare the parameter as the activity's Props.

Article.tsx

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

Or,

Article.tsx

import { AppScreen } from "@stackflow/plugin-basic-ui";
 
type ArticleParams = {
  params: {
    title: string;
  };
};
 
const Article: React.FC<ArticleParams> = ({ params: { title } }) => {
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{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