Installation · Mobile UI

Create an app

npx create-expo-app@latest my-app
cd my-app

Install the shared native dependencies

Most components only need the core libraries below. Each page lists anything extra.

npx expo install react-native-reanimated react-native-gesture-handler react-native-safe-area-context @expo/vector-icons

Add the path alias

Snippets import from @/components/ui and @/lib/theme. Expo supports tsconfig paths out of the box:

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": { "@/*": ["./*"] }
  }
}

Add the theme tokens

Copy lib/theme.ts from the Theming page. Every component reads colours through useTheme().

Wrap the root layout

Gesture-based components (Bottom Sheet, Toast) need a gesture root and safe-area provider:

app/_layout.tsx

import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { ToastProvider } from "@/components/ui/toast";

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <ToastProvider>
          <Stack screenOptions={{ headerShown: false }} />
        </ToastProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

npx @react-native-community/cli@latest init MyApp
cd MyApp
npm i react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-vector-icons
npx pod-install

Add the Reanimated plugin last in babel.config.js:

babel.config.js

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: ["react-native-reanimated/plugin"],
};

Components import icons from @expo/vector-icons. In a bare app, either install expo modules or replace the import with react-native-vector-icons/Ionicons — the glyph names are identical.

Create an app

flutter create my_app
cd my_app

Flutter 3.22+ (Dart 3.4+) is required — widgets use records, switch expressions and Color.withValues.

Add the theme

Copy lib/theme/lk_theme.dart from the Theming page and wire it into MaterialApp:

lib/main.dart

import 'package:flutter/material.dart';
import 'theme/lk_theme.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: lkTheme(Brightness.light),
      darkTheme: lkTheme(Brightness.dark),
      home: const Placeholder(),
    );
  }
}

Add widgets

Widgets go in lib/widgets/, screens in lib/screens/ and blocks in lib/blocks/. They use relative imports, so keep that layout or switch to package: imports.

import { Stack } from "expo-router"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import { SafeAreaProvider } from "react-native-safe-area-context"; import { ToastProvider } from "@/components/ui/toast"; export default function RootLayout() { return ( <GestureHandlerRootView style={{ flex: 1 }}> <SafeAreaProvider> <ToastProvider> <Stack screenOptions={{ headerShown: false }} /> </ToastProvider> </SafeAreaProvider> </GestureHandlerRootView> ); }

import 'package:flutter/material.dart'; import 'theme/lk_theme.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return MaterialApp( theme: lkTheme(Brightness.light), darkTheme: lkTheme(Brightness.dark), home: const Placeholder(), ); } }