HotwireThemeMode

The HotwireThemeMode component aligns the Native App's UI (StatusBar, NavigationBar) with your web app's current theme (Dark/Light).

Setup

Add the component to your app structure.

'use client';
import dynamic from "next/dynamic";

const HotwireThemeMode = dynamic(
    () => import('@bagisto-native/react').then(mod => mod.HotwireThemeMode),
    { ssr: false }
);

export default function ThemeListener() {
    return <HotwireThemeMode />;
}

Switching Themes

When your user toggles the theme, call the utility function.

import { triggerThemeModeEvent } from "@bagisto-native/core";

function toggleTheme(newMode: 'light' | 'dark') {
    // 1. Update your web app state/context
    setTheme(newMode);
    
    // 2. Notify Native App
    triggerThemeModeEvent(newMode);
}

Next Steps

• Learn about App-level Providers
• Understand Layout-level Integration
• Explore Native App Integration