Zustand (Global State)

Launch-Native uses Zustand for global state management. It is much lighter and easier to use than Redux or React Context, with zero boilerplate.

1. When to use Zustand?

You should use Zustand for synchronous UI state that needs to be accessed across multiple screens. For example:

• Dark mode / Light mode preferences.
• Opening/closing global modals (like a paywall or a notification).
• Temporary form data.

Note: For asynchronous data (like fetching from Supabase), we use TanStack Query instead.

2. How to use the Store

We provide a default store in store/useAppStore.ts. Here is how you can use it inside your React Native components:

import { useAppStore } from "@/store/useAppStore";
import { View, Text, Switch } from "react-native";

export function ThemeToggle() {
  // 1. Extract the specific state and actions you need
  const { theme, setTheme } = useAppStore((state) => ({
    theme: state.theme,
    setTheme: state.setTheme,
  }));

  const isDark = theme === "dark";

  return (
    <View>
      <Text>Current Theme: {theme}</Text>
      <Switch
        value={isDark}
        onValueChange={(value) => setTheme(value ? "dark" : "light")}
      />
    </View>
  );
}

3. Creating your own Store

To add new global variables, just open store/useAppStore.ts and add them to the interface and the create function. Zustand automatically handles the re-rendering of your components when the state changes!