create-du-app 0.1.4 → 0.1.5

package/templates/mobile/expo/src/core/components/ui/app-image/app-image.tsx

@@ -8,8 +8,12 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import FastImage, { ImageStyle as FastImageStyle } from 'react-native-fast-image';
-import { AppImageProps } from './app-image.type';
+import { Image as ExpoImage, ImageContentFit } from 'expo-image';
+import { AppImageProps, AppImageResizeMode } from './app-image.type';
+
+// Map the RN-style resizeMode prop onto expo-image's contentFit.
+const toContentFit = (mode?: AppImageResizeMode): ImageContentFit =>
+  mode === 'contain' ? 'contain' : mode === 'stretch' ? 'fill' : mode === 'center' ? 'none' : 'cover';
 
 const ImageSkeleton: React.FC<{ style?: StyleProp<ImageStyle> }> = ({ style }) => {
   const styles = useThemedStyles(makeStyles);
@@ -59,30 +63,23 @@ const AppImage: React.FC<AppImageProps> = ({ style, source, resizeMode, containe
   const uri = source.uri ?? '';
   return (
     <View style={[styles.container, containerStyle]}>
-      <FastImage
+      <ExpoImage
         // Default (mutable) path remounts on URL change so a re-uploaded avatar
-        // reloads instead of FastImage keeping the old native view + cached
-        // bitmap; `cache: web` revalidates a stable URL (server fix is a unique
-        // filename per upload, LIFEMASTER-260). An `immutable` source has a
-        // content-addressed URL, so we skip the remount and cache it immutably —
-        // the bitmap is served instantly on remount with no reload/flash
-        // (LIFEMASTER-364).
+        // reloads instead of keeping the old cached bitmap. An `immutable` source
+        // has a content-addressed URL, so we skip the remount and cache it on
+        // memory+disk — the bitmap is served instantly on remount with no flash.
         key={immutable ? undefined : uri}
-        style={style as FastImageStyle}
-        source={{
-          uri: uri || '',
-          priority: FastImage.priority.normal,
-          cache: immutable
-            ? FastImage.cacheControl.immutable
-            : FastImage.cacheControl.web,
-        }}
+        style={style}
+        source={{ uri }}
+        priority="normal"
+        cachePolicy={immutable ? 'memory-disk' : 'disk'}
+        contentFit={toContentFit(resizeMode)}
         // For an immutable (already-cached) source, don't re-raise the shimmer on
         // load-start: the bitmap is there instantly, so a flash to loading would
-        // be the very reload artifact we're removing (LIFEMASTER-364).
+        // be the very reload artifact we're avoiding.
         onLoadStart={() => !immutable && setLoading(true)}
         onLoadEnd={() => setLoading(false)}
         onError={() => setLoading(false)}
-        resizeMode={resizeMode}
       />
       {loading && <ImageSkeleton style={style} />}
     </View>

package/templates/mobile/expo/src/core/components/ui/app-image/app-image.type.ts

@@ -1,19 +1,19 @@
 import { ImagePropsBase, ImageStyle, ImageURISource, StyleProp, ViewStyle } from 'react-native';
-import { ResizeMode } from 'react-native-fast-image';
+
+export type AppImageResizeMode = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface AppImageProps extends ImagePropsBase {
   source: ImageURISource | number;
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
-  resizeMode?: ResizeMode;
+  resizeMode?: AppImageResizeMode;
   /**
    * Treat the remote image as immutable (stable URL → content never changes), so
-   * FastImage serves the cached bitmap instantly on every remount instead of
+   * expo-image serves the cached bitmap instantly on every remount instead of
    * revalidating over the network. Use for content-addressed images (e.g. player
    * covers): it stops the artwork from flashing/reloading when the same image
-   * remounts — like expanding the mini-player to full screen on Android
-   * (LIFEMASTER-364). Leave off for images that can change behind a stable URL
-   * (e.g. a re-uploaded avatar), which need the default revalidating `web` cache.
+   * remounts. Leave off for images that can change behind a stable URL (e.g. a
+   * re-uploaded avatar), which remount on URL change to pick up the new bitmap.
    */
   immutable?: boolean;
 }

package/templates/mobile/expo/src/core/components/ui/avatar-image/avatar-image.tsx

@@ -8,7 +8,7 @@ import {
     ImageStyle,
     Text,
 } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { LinearGradient } from 'expo-linear-gradient';
 
 interface AvatarImageProps {
     source: ImageSourcePropType;

package/templates/mobile/expo/src/core/components/ui/image-slider/image-slider.tsx

@@ -5,7 +5,7 @@ import {
     View,
     ViewToken,
 } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image as ExpoImage } from 'expo-image';
 
 import { AppImage } from '../app-image';
 import { Label } from '../label';
@@ -35,8 +35,8 @@ const ImageSlider: React.FC<ImageSliderProps> = ({
 
     useEffect(() => {
         if (!preloadRest) return;
-        const rest = data.slice(1).filter(Boolean).map(uri => ({ uri }));
-        if (rest.length > 0) FastImage.preload(rest);
+        const rest = data.slice(1).filter(Boolean);
+        if (rest.length > 0) ExpoImage.prefetch(rest);
     }, [data, preloadRest]);
 
     if (data.length === 0) return null;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { LinearGradient } from 'expo-linear-gradient';
 
 /**
  * Full-screen vertical gradient background — the default DS screen background.

package/templates/mobile/expo/src/core/components/ui/skeleton/skeleton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { LinearGradient } from 'expo-linear-gradient';
 import Animated, {
   Easing,
   useAnimatedStyle,

package/templates/mobile/expo/src/core/services/api.service.ts

@@ -2,7 +2,6 @@ import { useAuthStore, useLoadingStore } from '@src/app/stores';
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 import qs from 'qs';
 import { Alert } from 'react-native';
-import Config from 'react-native-config';
 import { Screen } from '@src/app/navigation/app-route-type';
 import { NavigationUtil, navigationRef } from '@src/core/utils/navigation.util';
 import { Translator } from '@src/core/utils/translator.util';
@@ -15,9 +14,10 @@ import { triggerSessionEnd } from './session-end.bridge';
 // switch drives it directly.
 const acceptLanguage = (): string => (Translator.currentLanguage().startsWith('fr') ? 'fr' : 'en');
 
-// API Configuration
+// API Configuration. Expo inlines EXPO_PUBLIC_* env vars at build time (set
+// EXPO_PUBLIC_BASE_URL in .env — see .env.example).
 export const API_VERSION = 'v1';
-export const BaseURL = `${Config.BASE_URL}${API_VERSION}/`;
+export const BaseURL = `${process.env.EXPO_PUBLIC_BASE_URL ?? ''}${API_VERSION}/`;
 // Create axios instance with default configuration
 const axiosInstance = axios.create({
     timeout: 10000,

package/templates/mobile/expo/src/core/services/device-id.service.ts

@@ -1,10 +1,24 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import DeviceInfo from 'react-native-device-info';
+import * as Application from 'expo-application';
+import * as Crypto from 'expo-crypto';
+import { Platform } from 'react-native';
 
 const DEVICE_ID_KEY = 'device_id';
 
 let cachedDeviceId: string | null = null;
 
+// A platform-stable device identifier, resolved once and persisted so it stays
+// the same across launches. Android exposes a stable id directly; iOS uses the
+// vendor id (can be null on first call), so we fall back to a generated UUID.
+// Both expo-application and expo-crypto ship inside Expo Go — no dev build needed.
+const resolveNativeId = async (): Promise<string> => {
+    if (Platform.OS === 'android') {
+        return Application.getAndroidId() ?? Crypto.randomUUID();
+    }
+    const vendorId = await Application.getIosIdForVendorAsync();
+    return vendorId ?? Crypto.randomUUID();
+};
+
 export const getDeviceId = async (): Promise<string> => {
     if (cachedDeviceId) return cachedDeviceId;
 
@@ -14,7 +28,7 @@ export const getDeviceId = async (): Promise<string> => {
         return stored;
     }
 
-    const nativeId = await DeviceInfo.getUniqueId();
+    const nativeId = await resolveNativeId();
     await AsyncStorage.setItem(DEVICE_ID_KEY, nativeId);
     cachedDeviceId = nativeId;
     return nativeId;

package/templates/mobile/expo/src/core/utils/device-locale.util.ts

@@ -1,4 +1,4 @@
-import { findBestLanguageTag } from 'react-native-localize';
+import { getLocales } from 'expo-localization';
 
 /** Languages the app ships translations for. */
 export type AppLanguage = 'fr' | 'en';
@@ -9,14 +9,16 @@ const SUPPORTED: AppLanguage[] = ['fr', 'en'];
 /**
  * The device's language collapsed to a supported app language: French when the
  * phone's preferred languages best-match French, English otherwise (the default
- * for every other locale) — LIFEMASTER-369.
+ * for every other locale).
  *
- * Uses react-native-localize rather than the JS `Intl` API: this app's Hermes is
- * built from source with the Intl locale data stripped, so `Intl` reports
- * `en-US` regardless of the device — the native module reads the real OS
- * preferred-languages list instead.
+ * Uses expo-localization (`getLocales()` returns the OS preferred-languages
+ * list in order) rather than the JS `Intl` API, and ships inside Expo Go so no
+ * dev build is needed.
  */
 export const deviceAppLanguage = (): AppLanguage => {
-  const best = findBestLanguageTag(SUPPORTED);
-  return best?.languageTag === 'fr' ? 'fr' : 'en';
+  const supported = SUPPORTED as string[];
+  const match = getLocales()
+    .map(locale => locale.languageCode)
+    .find(code => code != null && supported.includes(code));
+  return match === 'fr' ? 'fr' : 'en';
 };

package/templates/mobile/expo/src/core/utils/image-picker.util.ts

@@ -1,84 +1,63 @@
-import { PermissionsAndroid, Platform } from 'react-native'
-import {
-    CameraOptions,
-    ImageLibraryOptions,
-    launchCamera,
-    launchImageLibrary,
-} from 'react-native-image-picker'
+import * as ExpoImagePicker from 'expo-image-picker'
+import { ImagePickerOptions } from 'expo-image-picker'
 
+// Thin wrapper over expo-image-picker (ships in Expo Go — no dev build needed).
+// expo-image-picker handles its own runtime permission prompts on both
+// platforms, so there's no manual PermissionsAndroid flow here.
 export class ImagePicker {
-    private static optionsDefault: CameraOptions | ImageLibraryOptions = {
-        mediaType: 'photo',
+    private static optionsDefault: ImagePickerOptions = {
+        mediaTypes: ['images'],
         quality: 0.8,
-        maxHeight: 800,
-        maxWidth: 800,
     }
 
-    public static async requestCameraPermission() {
-        if (Platform.OS === 'android') {
-            const granted = await PermissionsAndroid.request(
-                PermissionsAndroid.PERMISSIONS.CAMERA,
-                {
-                    title: 'Camera Permission',
-                    message: 'App needs access to your camera',
-                    buttonNeutral: 'Ask Me Later',
-                    buttonNegative: 'Cancel',
-                    buttonPositive: 'OK',
-                },
-            )
-            return granted === PermissionsAndroid.RESULTS.GRANTED
-        }
-        return true
+    public static async requestCameraPermission(): Promise<boolean> {
+        const { granted } = await ExpoImagePicker.requestCameraPermissionsAsync()
+        return granted
     }
 
     public static async lauchCamera(
-        options?: CameraOptions,
+        options?: ImagePickerOptions,
     ): Promise<IMediaFormData | undefined> {
         const granted = await this.requestCameraPermission()
         if (!granted) {
             return undefined
         }
 
-        const result = await launchCamera({
+        const result = await ExpoImagePicker.launchCameraAsync({
             ...this.optionsDefault,
             ...options,
         })
-        if (result?.assets?.[0]) {
-            const media = {
-                name:
-                    result?.assets?.[0]?.fileName ||
-                    `img-${new Date().getTime()}`,
-                type: result?.assets?.[0]?.type || '',
-                uri: result?.assets?.[0]?.uri || '',
-            }
-            return media
-        } else {
+        const asset = result.assets?.[0]
+        if (result.canceled || !asset) {
             return undefined
         }
+        return {
+            name: asset.fileName || `img-${new Date().getTime()}`,
+            type: asset.mimeType || '',
+            uri: asset.uri,
+        }
     }
 
     public static async launchImagesLibrary(
-        options?: ImageLibraryOptions,
+        options?: ImagePickerOptions,
     ): Promise<IMediaFormData[]> {
-        return new Promise((resolve, reject) => {
-            launchImageLibrary({
-                ...this.optionsDefault,
-                ...options,
-            })
-                .then(({ assets, didCancel, errorCode }) => {
-                    if (didCancel || errorCode) {
-                        return reject(didCancel || errorCode)
-                    }
-                    const media = (assets || []).map(
-                        ({ fileName, uri, type }) => ({
-                            name: fileName || `img-${new Date().getTime()}`,
-                            type: type || '',
-                            uri: uri || '',
-                        }),
-                    )
-                    assets && resolve(media)
-                })
-                .catch(reject)
+        const { granted } =
+            await ExpoImagePicker.requestMediaLibraryPermissionsAsync()
+        if (!granted) {
+            return []
+        }
+
+        const result = await ExpoImagePicker.launchImageLibraryAsync({
+            ...this.optionsDefault,
+            ...options,
         })
+        if (result.canceled) {
+            return []
+        }
+        return (result.assets || []).map(asset => ({
+            name: asset.fileName || `img-${new Date().getTime()}`,
+            type: asset.mimeType || '',
+            uri: asset.uri,
+        }))
     }
 }

package/templates/mobile/expo/src/core/utils/query-persister.util.ts

@@ -1,36 +1,31 @@
-import { createMMKV } from 'react-native-mmkv';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import {
   PersistedClient,
   Persister,
 } from '@tanstack/react-query-persist-client';
 
-/**
- * Dedicated MMKV store for the React Query cache. Kept separate from any other
- * MMKV usage so clearing the query cache never touches unrelated app storage.
- * MMKV is synchronous + native-fast, so persisting on every cache mutation is
- * cheap enough to keep the on-disk snapshot fresh for an offline cold start.
- */
-const queryStorage = createMMKV({ id: 'react-query-cache' });
-
 const CACHE_KEY = 'REACT_QUERY_OFFLINE_CACHE';
 
 /**
- * A {@link Persister} backed by MMKV. The persist client writes the whole
- * dehydrated query cache under a single key; on launch it reads it straight
- * back so the last-seen feeds/lists/profile are on screen before the network
- * even resolves — the foundation of the offline-first experience.
+ * A {@link Persister} backed by AsyncStorage. The persist client writes the
+ * whole dehydrated query cache under a single key; on launch it reads it
+ * straight back so the last-seen feeds/lists/profile are on screen before the
+ * network even resolves — the foundation of the offline-first experience.
+ *
+ * AsyncStorage ships inside Expo Go (no dev build needed). It's async rather
+ * than synchronous, which the persist client fully supports.
  */
-export const mmkvQueryPersister: Persister = {
-  persistClient: (client: PersistedClient) => {
-    queryStorage.set(CACHE_KEY, JSON.stringify(client));
+export const queryPersister: Persister = {
+  persistClient: async (client: PersistedClient) => {
+    await AsyncStorage.setItem(CACHE_KEY, JSON.stringify(client));
   },
-  restoreClient: () => {
-    const cached = queryStorage.getString(CACHE_KEY);
+  restoreClient: async () => {
+    const cached = await AsyncStorage.getItem(CACHE_KEY);
     return cached ? (JSON.parse(cached) as PersistedClient) : undefined;
   },
-  removeClient: () => {
-    queryStorage.remove(CACHE_KEY);
+  removeClient: async () => {
+    await AsyncStorage.removeItem(CACHE_KEY);
   },
 };
 
-export default mmkvQueryPersister;
+export default queryPersister;

package/templates/mobile/expo/src/modules/home/home.screen.tsx

@@ -1,33 +1,110 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useTranslation } from 'react-i18next';
-// Example feature API (React Query) — demonstrates the ApiService + @repo/shared
-// ApiEndpoints pattern. Copy core/api/example.api.ts per feature.
-import { useExampleList } from '@src/core/api';
 import { useTheme } from '@src/core/theme';
 
+// What's inside the starter — rendered as the landing screen so a fresh
+// generate is self-documenting. Replace this with your real home feature.
+const FEATURES = [
+  { key: 'nav', icon: '🧭' },
+  { key: 'data', icon: '🔌' },
+  { key: 'i18n', icon: '🌐' },
+  { key: 'theme', icon: '🎨' },
+  { key: 'forms', icon: '📝' },
+  { key: 'ui', icon: '🧩' },
+  { key: 'state', icon: '📦' },
+  { key: 'shared', icon: '🔗' },
+] as const;
+
+// Languages the starter ships translations for (see src/assets/i18n).
+const LANGUAGES = [
+  { code: 'en', label: 'EN' },
+  { code: 'fr', label: 'FR' },
+] as const;
+
 export function HomeScreen() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { colors } = useTheme();
-  const { data, isLoading, isError } = useExampleList();
+  const activeLng = i18n.language?.split('-')[0];
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.bg_elevation_level_1_normal }]}>
-      <Text style={[styles.title, { color: colors.fg_neutral_normal }]}>
-        {t('home.greeting', { name: '{{PROJECT_NAME}}' })}
-      </Text>
-      {isLoading ? <ActivityIndicator color={colors.fg_primary_normal} /> : null}
-      {isError ? (
-        <Text style={{ color: colors.bd_danger_normal }}>{t('home.loadError')}</Text>
-      ) : null}
-      {data ? (
-        <Text style={{ color: colors.fg_neutral_faded }}>{t('home.count', { n: data.length })}</Text>
-      ) : null}
-    </View>
+    <ScrollView
+      style={{ backgroundColor: colors.bg_elevation_level_1_normal }}
+      contentContainerStyle={styles.container}>
+      <Text style={[styles.title, { color: colors.fg_neutral_normal }]}>{'{{PROJECT_NAME}}'}</Text>
+      <Text style={[styles.subtitle, { color: colors.fg_neutral_faded }]}>{t('home.subtitle')}</Text>
+
+      {/* Language switcher — i18n.changeLanguage re-renders every translated screen. */}
+      <View style={styles.langRow}>
+        <Text style={[styles.langLabel, { color: colors.fg_neutral_faded }]}>{t('home.language')}</Text>
+        {LANGUAGES.map(lng => {
+          const active = activeLng === lng.code;
+          return (
+            <TouchableOpacity
+              key={lng.code}
+              onPress={() => i18n.changeLanguage(lng.code)}
+              style={[
+                styles.langPill,
+                {
+                  backgroundColor: active
+                    ? colors.fg_neutral_normal
+                    : colors.bg_elevation_level_2_normal,
+                  borderColor: colors.bd_neutral_faded,
+                },
+              ]}>
+              <Text
+                style={[
+                  styles.langText,
+                  { color: active ? colors.bg_elevation_level_1_normal : colors.fg_neutral_faded },
+                ]}>
+                {lng.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <View style={styles.list}>
+        {FEATURES.map(f => (
+          <View
+            key={f.key}
+            style={[
+              styles.card,
+              { backgroundColor: colors.bg_elevation_level_2_normal, borderColor: colors.bd_neutral_faded },
+            ]}>
+            <Text style={styles.icon}>{f.icon}</Text>
+            <View style={styles.cardText}>
+              <Text style={[styles.cardTitle, { color: colors.fg_neutral_normal }]}>
+                {t(`home.features.${f.key}.title`)}
+              </Text>
+              <Text style={[styles.cardDesc, { color: colors.fg_neutral_faded }]}>
+                {t(`home.features.${f.key}.desc`)}
+              </Text>
+            </View>
+          </View>
+        ))}
+      </View>
+
+      <Text style={[styles.footer, { color: colors.fg_neutral_faded }]}>{t('home.footer')}</Text>
+      <Text style={[styles.author, { color: colors.fg_neutral_faded }]}>{t('home.author')}</Text>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, padding: 24, gap: 16 },
-  title: { fontSize: 22, fontWeight: '600' },
+  container: { padding: 20, paddingBottom: 40, gap: 8 },
+  title: { fontSize: 28, fontWeight: '700' },
+  subtitle: { fontSize: 15, marginBottom: 16, lineHeight: 21 },
+  langRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 16 },
+  langLabel: { fontSize: 13, marginRight: 4 },
+  langPill: { paddingHorizontal: 14, paddingVertical: 6, borderRadius: 999, borderWidth: 1 },
+  langText: { fontSize: 13, fontWeight: '600' },
+  list: { gap: 12 },
+  card: { flexDirection: 'row', gap: 14, padding: 16, borderRadius: 16, borderWidth: 1 },
+  icon: { fontSize: 24 },
+  cardText: { flex: 1, gap: 4 },
+  cardTitle: { fontSize: 16, fontWeight: '600' },
+  cardDesc: { fontSize: 13, lineHeight: 19 },
+  footer: { fontSize: 13, marginTop: 20, textAlign: 'center', fontStyle: 'italic' },
+  author: { fontSize: 12, marginTop: 6, textAlign: 'center', fontWeight: '600' },
 });

package/templates/mobile/rn/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/templates/mobile/rn/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/templates/mobile/rn/Gemfile

@@ -0,0 +1,17 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
+gem 'nkf'

package/templates/mobile/rn/README.md

@@ -40,5 +40,37 @@ pnpm --filter {{PROJECT_NAME}}-mobile start     # metro
 
 Add an icon: drop `name.svg` in `src/assets/svgs/` then `pnpm --filter {{PROJECT_NAME}}-mobile sync-svgs`.
 
-This template ships **without** `ios/`/`android/` — generate native projects (RN CLI
-`init` conventions) or copy yours in, then `cd ios && pod install`.
+## Native folders (ios / android)
+
+Native projects **ship with this template** (RN 0.85.3), so no `prebuild` /
+scaffolding step is needed:
+
+```bash
+pnpm bootstrap                                  # install
+cd apps/mobile/ios && bundle install && bundle exec pod install && cd -
+pnpm --filter {{PROJECT_NAME}}-mobile ios       # or android
+```
+
+The native app is named **`DuMobile`** with bundle id **`com.dumobile`** (matches
+`app.json` `name`, `AppDelegate` moduleName, and `MainActivity`). **Rename these
+before shipping** (Xcode target/scheme, `app.json` `name`, `android` `applicationId`
++ `namespace` + the `com/dumobile` Java dir, and `index.js` registration must all match).
+
+Monorepo note: under pnpm's hoisted layout the RN packages live in the repo-root
+`node_modules`, not `apps/mobile/node_modules`. So `android/settings.gradle` and
+`android/app/build.gradle` resolve `react-native`, `@react-native/gradle-plugin`
+and `@react-native/codegen` via `node --print require.resolve(...)` (which walks up
+to the root), and the iOS `Podfile` resolves react-native the same way. These
+patches are already applied in the template.
+
+## Native library config (already wired)
+
+| Library | Status |
+|---------|--------|
+| gesture-handler | imported first in `index.js` ✅ |
+| reanimated | babel plugin set ✅ |
+| svg | metro transformer set ✅ |
+| keyboard-controller / toast | provider + `<Toast>` mounted ✅ |
+| `react-native-config` (.env) | autolinked; if Android doesn't read `.env`, add `apply from: ".../react-native-config/android/dotenv.gradle"` to `android/app/build.gradle` |
+| `react-native-image-picker` | add `NSPhotoLibraryUsageDescription` + `NSCameraUsageDescription` to `ios/DuMobile/Info.plist` and `CAMERA` / `READ_MEDIA_IMAGES` to `AndroidManifest.xml` |
+| `react-native-mmkv` v4 | needs the New Architecture (default on in RN 0.85) |

package/templates/mobile/rn/_package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "dev": "react-native start",
     "start": "react-native start",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
@@ -58,6 +59,7 @@
     "@react-native-community/cli-platform-ios": "20.1.3",
     "@react-native/babel-preset": "0.85.3",
     "@react-native/eslint-config": "0.85.3",
+    "@react-native/gradle-plugin": "0.85.3",
     "@react-native/metro-config": "0.85.3",
     "@react-native/typescript-config": "0.85.3",
     "@types/lodash": "^4.14.176",