Skip to main content

Navigation

Kog ships a stack navigator with a React Navigation-shaped API. Each screen is a real LVGL screen object, so transitions (slide, fade) are native animations that cost no JS time.

import { NavigationContainer, createStackNavigator } from '@kog/ui';

const Stack = createStackNavigator();

export function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRoute="Home">
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Detail" component={Detail} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
const nav = useNavigation();
nav.push('Detail', { id: 42 });
nav.pop();
nav.replace('Login');
nav.reset('Home');
nav.canGoBack();
// In Detail:
const route = useRoute<{ id: number }>();
route.params.id      // 42 — params are reactive; a re-push with new params updates in place

Route params can be typed with a route-map generic so push('Detail', …) type-checks the params.

Lifecycle and memory​

  • Screens are destroyed on pop by default — on a microcontroller you don't keep invisible widget trees around. Opt into keep-alive per screen when state must survive.
  • useFocusEffect(fn) and useIsFocused() let a screen pause work while covered (stop timers, unsubscribe sensors) and resume on return.
  • The hardware back button (or an encoder/gesture, per board) triggers pop() automatically.

Modals and overlays​

<Portal> renders into LVGL's top layer, above every screen — for modals, toasts, and dropdowns:

<Portal>
  {showConfirm && <ConfirmDialog onClose={() => setShowConfirm(false)} />}
</Portal>