create-du-app 0.1.4 → 0.1.5

package/README.md

@@ -19,10 +19,13 @@ You'll be asked:
 2. **Select the groups** → press **`Space`** to tick Mobile / Frontend / Backend, then **`Enter`**
 3. **Pick one technology** per group → **↑ / ↓** then **`Enter`**
 
-Then:
+Then bootstrap it — one command installs deps, builds `@repo/shared`, and
+verifies every app can import it:
 
 ```bash
-cd my-shop && pnpm install
+cd my-shop
+pnpm bootstrap
+pnpm dev
 ```
 
 Done. 🎉

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-du-app",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "CLI generator: pick templates (Mobile/FE/BE) and scaffold a product monorepo",
   "type": "module",
   "bin": {

package/src/generate.js

@@ -81,7 +81,19 @@ async function copyTemplate(srcDir, destDir, projectName) {
 // ---------------------------------------------------------------------------
 
 // Build the project's root package.json (pnpm: NO "workspaces" field).
-function buildRootPackageJson(projectName, hasShared) {
+function buildRootPackageJson(projectName, hasShared, createdAppDirs = []) {
+  // Per-app convenience scripts (life-master style): build @repo/shared first
+  // (if it exists), then run that app's dev server. Keyed by the app folder
+  // name, filtered to the app's package (e.g. `pnpm mobile` -> runs apps/mobile).
+  const sharedPrefix = hasShared
+    ? `turbo run build --filter=${SHARED_PACKAGE_NAME} && `
+    : '';
+  const appScripts = {};
+  for (const dir of createdAppDirs) {
+    const app = dir.split('/').pop(); // 'apps/mobile' -> 'mobile'
+    appScripts[app] = `${sharedPrefix}turbo run dev --filter=${projectName}-${app}`;
+  }
+
   return {
     name: projectName,
     version: '0.1.0',
@@ -98,6 +110,7 @@ function buildRootPackageJson(projectName, hasShared) {
       ...(hasShared
         ? { 'shared:build': `turbo run build --filter=${SHARED_PACKAGE_NAME}` }
         : {}),
+      ...appScripts,
     },
     devDependencies: {
       turbo: '^2.3.3',
@@ -333,7 +346,7 @@ export async function generate(plan, repoRoot, cwd = process.cwd()) {
   // 3) Generate the root config files dynamically.
   await fse.writeJson(
     path.join(projectRoot, 'package.json'),
-    buildRootPackageJson(projectName, hasShared),
+    buildRootPackageJson(projectName, hasShared, createdAppDirs),
     { spaces: 2 },
   );
   logs.push('✓ package.json');

package/src/index.js

@@ -168,7 +168,13 @@ async function main() {
   console.log('');
 
   const rel = path.relative(process.cwd(), projectRoot) || projectRoot;
-  const msg = `Done! Next:\n\n  cd ${rel} && pnpm install\n`;
+  // `pnpm bootstrap` is the one-command setup: it installs deps, builds
+  // @repo/shared, and verifies each app resolves it. Then `pnpm dev`.
+  const msg =
+    `Done! Next:\n\n` +
+    `  cd ${rel}\n` +
+    `  pnpm bootstrap   # install deps + build @repo/shared + verify\n` +
+    `  pnpm dev         # start the dev servers\n`;
   // outro() (clack) only looks good in a TTY; print plainly in non-interactive mode.
   if (process.stdout.isTTY && !hasSelectionFlags(args)) outro(msg);
   else console.log(msg);

package/templates/mobile/expo/.env.example

@@ -1,5 +1,5 @@
-# Copy to .env and fill in. Read at build time by react-native-config.
+# Copy to .env and fill in. Expo inlines any EXPO_PUBLIC_* var at build time.
 # NEVER commit the real .env — only this example.
 
 # Base URL of your API (include trailing slash).
-BASE_URL=https://api.example.com/
+EXPO_PUBLIC_BASE_URL=https://api.example.com/

package/templates/mobile/expo/README.md

@@ -19,7 +19,7 @@ src/
 | Area | Where |
 |------|-------|
 | API | `services/api.service.ts` (axios + auth header + device-id + 401 session handling), `api/example.api.ts` (React Query pattern) |
-| Data | `utils/query-client.util.ts`, `utils/query-persister.util.ts` (MMKV offline cache) |
+| Data | `utils/query-client.util.ts`, `utils/query-persister.util.ts` (AsyncStorage offline cache) |
 | Theme | `theme/` — context + `Colors` design tokens (`useTheme`, `useThemedStyles`) |
 | UI kit | `components/ui/*` — button, text-field/area, checkbox, radio, toggle, modal, bottom-sheet, header, tabs, otp-input, search-box, skeleton, app-image, image-slider… |
 | Forms | `components/forms/*` — react-hook-form bindings over the DS fields |
@@ -33,14 +33,42 @@ package exists; the CLI wires `"@repo/shared": "workspace:*"` automatically.
 
 ## Getting started
 
+> [!TIP]
+> Every native dependency in this starter ships inside **Expo Go**, so you can
+> run it by scanning the QR code — **no dev build / Xcode / Android Studio
+> needed**. (See [Expo Go compatibility](#expo-go-compatibility) for how.)
+
 ```bash
 pnpm bootstrap                                  # install + build @repo/shared
 pnpm --filter {{PROJECT_NAME}}-mobile typecheck # verify
-pnpm --filter {{PROJECT_NAME}}-mobile start     # expo dev server
+pnpm --filter {{PROJECT_NAME}}-mobile start     # expo start — scan QR in Expo Go
 ```
 
+Press `i` (iOS simulator) / `a` (Android emulator) in the Metro terminal, or scan
+the QR with the **Expo Go** app on a physical device.
+
 Add an icon: drop `name.svg` in `src/assets/svgs/` then `pnpm --filter {{PROJECT_NAME}}-mobile sync-svgs`.
 
-Native folders (`ios/`, `android/`) are git-ignored — run `expo prebuild` to generate them.
+## Expo Go compatibility
+
+This starter deliberately uses only libraries bundled in Expo Go, so the standard
+QR-code workflow works out of the box. Where the original production app used a
+bare-RN native module, the Expo equivalent is used instead:
+
+| Need | Library used |
+|------|--------------|
+| Images (cache, prefetch) | `expo-image` |
+| Pick / capture photos | `expo-image-picker` |
+| Date / time picker | `@react-native-community/datetimepicker` |
+| Gradients | `expo-linear-gradient` |
+| Device locale | `expo-localization` |
+| Device id | `expo-application` (+ `expo-crypto` fallback) |
+| Offline query cache | `@react-native-async-storage/async-storage` |
+| Env vars | `process.env.EXPO_PUBLIC_*` (set in `.env`) |
+| Keyboard avoidance | React Native `KeyboardAvoidingView` |
+
+> Need a bare-RN native module later (e.g. MMKV, a custom SDK)? Run
+> `npx expo prebuild` + `expo run:ios` / `run:android` to switch to a development
+> build. Until then, plain `expo start` + Expo Go is all you need.
 
 > Before shipping: set `name`, `slug`, `scheme`, and the iOS/Android bundle ids in `app.json`.

package/templates/mobile/expo/_package.json

@@ -4,6 +4,7 @@
   "private": true,
   "main": "index.js",
   "scripts": {
+    "dev": "expo start",
     "start": "expo start",
     "android": "expo run:android",
     "ios": "expo run:ios",
@@ -15,38 +16,35 @@
   },
   "dependencies": {
     "@hookform/error-message": "2.0.0",
-    "@react-native-async-storage/async-storage": "^2.1.2",
-    "@react-native-community/netinfo": "^12.0.1",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/netinfo": "12.0.1",
     "@react-navigation/bottom-tabs": "^7.12.0",
     "@react-navigation/native": "^7.0.13",
+    "@react-native-community/datetimepicker": "9.1.0",
     "@react-navigation/native-stack": "^7.1.14",
     "@tanstack/react-query": "^5.101.0",
     "@tanstack/react-query-persist-client": "^5.101.0",
     "axios": "^1.7.9",
     "expo": "~56.0.6",
+    "expo-application": "~56.0.3",
+    "expo-crypto": "~56.0.4",
+    "expo-image": "~56.0.11",
+    "expo-image-picker": "~56.0.18",
+    "expo-linear-gradient": "~56.0.4",
+    "expo-localization": "~56.0.6",
     "i18next": "^21.5.4",
     "lodash": "^4.17.21",
-    "lottie-react-native": "^7.3.4",
+    "lottie-react-native": "~7.3.4",
     "qs": "^6.10.1",
     "react": "19.2.3",
     "react-hook-form": "^7.53.2",
     "react-i18next": "^11.14.3",
     "react-native": "0.85.3",
-    "react-native-config": "^1.6.1",
-    "react-native-date-picker": "5.0.12",
-    "react-native-device-info": "^15.0.2",
-    "react-native-fast-image": "^8.6.3",
     "react-native-gesture-handler": "~2.31.1",
-    "react-native-image-picker": "^8.2.1",
-    "react-native-keyboard-controller": "^1.21.6",
-    "react-native-linear-gradient": "^2.8.3",
-    "react-native-localize": "^3.7.0",
-    "react-native-mmkv": "^4.3.1",
-    "react-native-nitro-modules": "^0.35.9",
     "react-native-reanimated": "4.3.1",
-    "react-native-safe-area-context": "^5.7.0",
+    "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
-    "react-native-svg": "^15.15.4",
+    "react-native-svg": "15.15.4",
     "react-native-toast-message": "^2.2.1",
     "react-native-worklets": "0.8.3",
     "yup": "^0.32.11",

package/templates/mobile/expo/app.json

@@ -9,10 +9,18 @@
     "scheme": "myapp",
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.company.myapp"
+      "bundleIdentifier": "com.company.myapp",
+      "infoPlist": {
+        "NSPhotoLibraryUsageDescription": "Allow $(PRODUCT_NAME) to access your photos.",
+        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to use the camera."
+      }
     },
     "android": {
-      "package": "com.company.myapp"
+      "package": "com.company.myapp",
+      "permissions": [
+        "android.permission.CAMERA",
+        "android.permission.READ_MEDIA_IMAGES"
+      ]
     }
   }
 }

package/templates/mobile/expo/index.js

@@ -1,3 +1,5 @@
+// Must be the very first import (react-native-gesture-handler requirement).
+import 'react-native-gesture-handler';
 import { registerRootComponent } from 'expo';
 import AppProvider from './src/app/app-provider';
 

package/templates/mobile/expo/src/app/app-provider.tsx

@@ -5,7 +5,8 @@ import { I18nextProvider } from 'react-i18next';
 import { onlineManager } from '@tanstack/react-query';
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import NetInfo from '@react-native-community/netinfo';
-import { queryClient, mmkvQueryPersister } from '@src/core/utils';
+import Toast from 'react-native-toast-message';
+import { queryClient, queryPersister, toastConfig } from '@src/core/utils';
 import { ThemeProvider } from '@src/core/theme';
 import { i18n } from './config/translation';
 import { App } from './App';
@@ -16,17 +17,20 @@ onlineManager.setEventListener(setOnline =>
 );
 
 // The provider tree. Order: gesture root → persisted query cache → i18n →
-// safe-area → theme → app UI.
+// safe-area → theme → app UI. <Toast> is mounted last so it overlays all.
+// Keyboard handling uses React Native's built-in KeyboardAvoidingView (in
+// ScreenContainer) so the app runs in Expo Go without a custom dev build.
 export default function AppProvider() {
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <PersistQueryClientProvider
         client={queryClient}
-        persistOptions={{ persister: mmkvQueryPersister }}>
+        persistOptions={{ persister: queryPersister }}>
         <I18nextProvider i18n={i18n}>
           <SafeAreaProvider>
             <ThemeProvider>
               <App />
+              <Toast config={toastConfig} />
             </ThemeProvider>
           </SafeAreaProvider>
         </I18nextProvider>

package/templates/mobile/expo/src/app/config/translation.ts

@@ -1,4 +1,4 @@
-import { findBestLanguageTag } from 'react-native-localize';
+import { getLocales } from 'expo-localization';
 import { Translator } from '@src/core/utils';
 import en from '@src/assets/i18n/en.json';
 import fr from '@src/assets/i18n/fr.json';
@@ -9,15 +9,19 @@ const resources = {
 };
 
 const fallbackLng = 'en';
-const best = findBestLanguageTag(Object.keys(resources));
+// expo-localization reads the OS preferred-languages list (ships in Expo Go).
+const deviceLanguage = getLocales()[0]?.languageCode ?? fallbackLng;
 
 // Initialize i18next once and expose the instance. The provider mounts it in
 // app-provider.tsx; the active language can be changed via Translator.changeLanguages.
 export const i18n = Translator.setup({
   resources,
-  lng: best?.languageTag?.split('-')[0] ?? fallbackLng,
+  lng: deviceLanguage in resources ? deviceLanguage : fallbackLng,
   fallbackLng,
   interpolation: { escapeValue: false },
+  // RN's JS engine lacks full Intl.PluralRules — use i18next's v3 plural format
+  // so it doesn't warn and fall back at runtime.
+  compatibilityJSON: 'v3',
 });
 
 // Hook persisted-language restore here if you store a user preference.

package/templates/mobile/expo/src/assets/i18n/en.json

@@ -1,12 +1,28 @@
 {
   "home": {
     "title": "Home",
-    "greeting": "Hello, {{name}}",
-    "loadError": "Failed to load.",
-    "count": "{{n}} item(s)"
+    "subtitle": "Your company mobile starter — built on the shared monorepo core.",
+    "features": {
+      "nav": { "title": "Navigation", "desc": "React Navigation — typed native-stack + bottom tabs." },
+      "data": { "title": "Networking", "desc": "Axios client + React Query, offline cache via MMKV." },
+      "i18n": { "title": "i18n", "desc": "react-i18next with device locale (en / fr)." },
+      "theme": { "title": "Theming", "desc": "Theme context + design tokens (dark / light)." },
+      "forms": { "title": "Forms", "desc": "react-hook-form bindings over the design-system fields." },
+      "ui": { "title": "UI kit", "desc": "Buttons, inputs, modals, tabs, skeletons and more." },
+      "state": { "title": "State", "desc": "Zustand stores (auth, loading) + AsyncStorage." },
+      "shared": { "title": "@repo/shared", "desc": "Types, enums and API contracts shared across apps." }
+    },
+    "footer": "Edit src/modules/home to make it yours.",
+    "language": "Language",
+    "author": "Created by Long Mobile",
+    "loadError": "Failed to load."
   },
   "profile": {
     "title": "Profile",
     "signOut": "Sign out"
+  },
+  "common": {
+    "confirm": "Confirm",
+    "cancel": "Cancel"
   }
 }

package/templates/mobile/expo/src/assets/i18n/fr.json

@@ -1,12 +1,28 @@
 {
   "home": {
     "title": "Accueil",
-    "greeting": "Bonjour, {{name}}",
-    "loadError": "Échec du chargement.",
-    "count": "{{n}} élément(s)"
+    "subtitle": "Votre starter mobile d'entreprise — basé sur le cœur partagé du monorepo.",
+    "features": {
+      "nav": { "title": "Navigation", "desc": "React Navigation — native-stack + onglets typés." },
+      "data": { "title": "Réseau", "desc": "Client Axios + React Query, cache hors-ligne via MMKV." },
+      "i18n": { "title": "i18n", "desc": "react-i18next avec la langue de l'appareil (en / fr)." },
+      "theme": { "title": "Thème", "desc": "Contexte de thème + design tokens (sombre / clair)." },
+      "forms": { "title": "Formulaires", "desc": "react-hook-form sur les champs du design-system." },
+      "ui": { "title": "Kit UI", "desc": "Boutons, champs, modales, onglets, skeletons, etc." },
+      "state": { "title": "State", "desc": "Stores Zustand (auth, loading) + AsyncStorage." },
+      "shared": { "title": "@repo/shared", "desc": "Types, enums et contrats d'API partagés entre apps." }
+    },
+    "footer": "Modifiez src/modules/home pour l'adapter.",
+    "language": "Langue",
+    "author": "Créé par Long Mobile",
+    "loadError": "Échec du chargement."
   },
   "profile": {
     "title": "Profil",
     "signOut": "Se déconnecter"
+  },
+  "common": {
+    "confirm": "Confirmer",
+    "cancel": "Annuler"
   }
 }

package/templates/mobile/expo/src/core/components/forms/date-time-picker.modal.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
+import DateTimePicker, {
+  DateTimePickerAndroid,
+} from '@react-native-community/datetimepicker';
+import { useTranslation } from 'react-i18next';
+import { ThemeColors, useThemedStyles } from '@src/core/theme';
+import { Font, fontSize } from '../../utils';
+import { Label } from '../ui';
+
+type Props = {
+  open: boolean;
+  date: Date;
+  mode: 'date' | 'time';
+  maximumDate?: Date;
+  onConfirm: (date: Date) => void;
+  onCancel: () => void;
+};
+
+/**
+ * Cross-platform date/time picker built on @react-native-community/datetimepicker
+ * (ships in Expo Go — no dev build needed). On Android it opens the native OS
+ * dialog imperatively; on iOS it renders a spinner inside a bottom-sheet modal
+ * with Confirm / Cancel actions.
+ */
+export const DateTimePickerModal = ({
+  open,
+  date,
+  mode,
+  maximumDate,
+  onConfirm,
+  onCancel,
+}: Props) => {
+  const { t } = useTranslation();
+  const styles = useThemedStyles(makeStyles);
+  const [temp, setTemp] = useState(date);
+
+  useEffect(() => {
+    if (open) setTemp(date);
+  }, [open, date]);
+
+  // Android has no in-tree picker view — open the OS dialog when `open` flips on.
+  useEffect(() => {
+    if (Platform.OS !== 'android' || !open) return;
+    DateTimePickerAndroid.open({
+      value: date,
+      mode,
+      maximumDate,
+      onChange: (event, selected) => {
+        if (event.type === 'set' && selected) onConfirm(selected);
+        else onCancel();
+      },
+    });
+    // Reacts only to `open` flipping true; date/mode are read at open time.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  if (Platform.OS === 'android') return null;
+
+  return (
+    <Modal visible={open} transparent animationType="slide" onRequestClose={onCancel}>
+      <View style={styles.backdrop}>
+        <View style={styles.sheet}>
+          <View style={styles.actions}>
+            <TouchableOpacity onPress={onCancel} hitSlop={8}>
+              <Label style={styles.cancel} value={t('common.cancel')} />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => onConfirm(temp)} hitSlop={8}>
+              <Label style={styles.confirm} value={t('common.confirm')} />
+            </TouchableOpacity>
+          </View>
+          <DateTimePicker
+            value={temp}
+            mode={mode}
+            display="spinner"
+            maximumDate={maximumDate}
+            onChange={(_, selected) => selected && setTemp(selected)}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DateTimePickerModal;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      backgroundColor: 'rgba(0,0,0,0.4)',
+    },
+    sheet: {
+      backgroundColor: c.bg_elevation_level_1_normal,
+      paddingBottom: 24,
+    },
+    actions: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: c.bd_neutral_faded,
+    },
+    cancel: {
+      fontFamily: Font.rethinkSansRegular,
+      fontSize: fontSize(16),
+      color: c.fg_neutral_faded,
+    },
+    confirm: {
+      fontFamily: Font.rethinkSansBold,
+      fontSize: fontSize(16),
+      color: c.fg_neutral_normal,
+    },
+  });

package/templates/mobile/expo/src/core/components/forms/hf-date-time.tsx

@@ -1,7 +1,6 @@
 import { ErrorMessage } from '@hookform/error-message';
 import React, { FC, useMemo, useState } from 'react';
 import { useController, useFormContext, useFormState } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
 import {
     StyleProp,
     StyleSheet,
@@ -11,7 +10,7 @@ import {
     ViewProps,
     ViewStyle,
 } from 'react-native';
-import DatePicker from 'react-native-date-picker';
+import { DateTimePickerModal } from './date-time-picker.modal';
 import {
     Font,
     fontSize,
@@ -23,7 +22,6 @@ import { ThemeColors, useThemedStyles } from '@src/core/theme';
 import { Label } from '../ui';
 import { SvgProps } from 'react-native-svg';
 import { IconCalendar } from '@src/assets/svgs';
-import { i18n } from '@src/app/config/translation';
 
 type Props = ViewProps & {
     containerStyle?: StyleProp<ViewStyle>;
@@ -99,7 +97,6 @@ const formatDate = (date: Date, yearOnly?: boolean) => {
 };
 
 const HFDateTime = (props: Props) => {
-    const { t } = useTranslation();
     const styles = useThemedStyles(makeStyles);
     const {
         containerStyle = {},
@@ -220,16 +217,11 @@ const HFDateTime = (props: Props) => {
                     }}
                 />
             </View>
-            <DatePicker
-                modal
+            <DateTimePickerModal
                 mode="date"
                 open={open}
                 date={date}
                 maximumDate={new Date()}
-                locale={i18n.language}
-                title={t('common.selectDate')}
-                confirmText={t('common.confirm')}
-                cancelText={t('common.cancel')}
                 onConfirm={handleConfirm}
                 onCancel={() => setOpen(false)}
             />

package/templates/mobile/expo/src/core/components/forms/hf-time-picker.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   ViewStyle,
 } from 'react-native';
-import DatePicker from 'react-native-date-picker';
+import { DateTimePickerModal } from './date-time-picker.modal';
 import { Font, fontSize, horizontalScale, verticalScale, Radius } from '../../utils';
 import { ThemeColors, useThemedStyles } from '@src/core/theme';
 import { Label } from '../ui';
@@ -80,8 +80,7 @@ const HFTimePicker = (props: Props) => {
           value={field.value || placeholder}
         />
       </TouchableOpacity>
-      <DatePicker
-        modal
+      <DateTimePickerModal
         mode="time"
         open={open}
         date={time}

package/templates/mobile/expo/src/core/components/screen/screen-container/screen-container.tsx

@@ -11,6 +11,7 @@ import React, { PropsWithChildren, ReactNode } from 'react';
 import {
     Image,
     ImageSourcePropType,
+    KeyboardAvoidingView,
     NativeScrollEvent,
     NativeSyntheticEvent,
     StatusBar,
@@ -20,7 +21,6 @@ import {
     ViewStyle,
 } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
 import { Edge, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ImgScreenBgGradian } from '@src/assets/Images';
 import Header from '../../ui/header/header';
@@ -43,15 +43,14 @@ interface Props {
     /** Keyboard-aware scroll for forms. @default true */
     isForm?: boolean;
     /**
-     * Extra breathing space (px) kept between the focused input and the top of
-     * the keyboard while `isForm`. The scroll view animates the whole form up by
-     * this much past the keyboard. @default Spacing.spacing_2xl (32)
+     * Extra breathing space (px) kept above the keyboard while `isForm` — passed
+     * to KeyboardAvoidingView as `keyboardVerticalOffset`.
+     * @default Spacing.spacing_2xl (32)
      */
     bottomOffset?: number;
     /**
-     * Let the built-in `KeyboardAwareScrollView` auto-scroll the focused input
-     * into view. Set `false` when the screen drives its own keyboard animation
-     * (e.g. a translateY/height worklet) so the two don't fight. @default true
+     * @deprecated No longer used — kept for API compatibility. Keyboard handling
+     * now uses React Native's KeyboardAvoidingView (Expo Go compatible).
      */
     keyboardAware?: boolean;
     showHeader?: boolean;
@@ -91,7 +90,6 @@ const ScreenContainer = (props: PropsWithChildren<Props>) => {
         background = resolved === 'dark' ? ImgScreenBgGradian : undefined,
         isForm = true,
         bottomOffset = Spacing.spacing_2xl, // 32
-        keyboardAware = true,
         showHeader = true,
         onScroll,
         onContentSizeChange,
@@ -165,28 +163,26 @@ const ScreenContainer = (props: PropsWithChildren<Props>) => {
                 {renderHeader()}
 
                 {isForm ? (
-                    <KeyboardAwareScrollView
-                        ScrollViewComponent={ScrollView as any}
-                        showsVerticalScrollIndicator={false}
-                        onScroll={onScroll}
-                        scrollEventThrottle={16}
-                        onContentSizeChange={onContentSizeChange}
-                        // Animate the whole form up past the keyboard (UI-thread,
-                        // Reanimated) and keep `bottomOffset` of breathing room
-                        // above the focused caret. `mode="layout"` makes the flex
-                        // layout (topSpacer / marginTop:auto actions / gap) reflow
-                        // around the keyboard space so inputs are never covered.
-                        bottomOffset={bottomOffset}
-                        mode="layout"
-                        // When false, the screen drives its own keyboard animation
-                        // (translateY/height worklet) and this view stops auto-scrolling.
-                        enabled={keyboardAware}
-                        keyboardDismissMode="interactive"
-                        keyboardShouldPersistTaps="handled"
-                        contentContainerStyle={[styles.content, style]}
+                    // KeyboardAvoidingView (RN core) lifts the form above the
+                    // keyboard — works in Expo Go without a custom dev build.
+                    // `bottomOffset` keeps breathing room above the focused input.
+                    <KeyboardAvoidingView
+                        style={styles.flex}
+                        behavior={isIOS ? 'padding' : undefined}
+                        keyboardVerticalOffset={bottomOffset}
                     >
-                        {body}
-                    </KeyboardAwareScrollView>
+                        <ScrollView
+                            showsVerticalScrollIndicator={false}
+                            onScroll={onScroll}
+                            scrollEventThrottle={16}
+                            onContentSizeChange={onContentSizeChange}
+                            keyboardDismissMode="interactive"
+                            keyboardShouldPersistTaps="handled"
+                            contentContainerStyle={[styles.content, style]}
+                        >
+                            {body}
+                        </ScrollView>
+                    </KeyboardAvoidingView>
                 ) : (
                     // Non-form screens (e.g. the auth screens) render a plain View.
                     <View style={[styles.content, styles.flex, style]}>{body}</View>