codingpixel-expo-app 0.1.1 → 0.1.3

package/README.md

@@ -7,10 +7,13 @@ Opinionated Expo SDK 54+ app scaffolder. Mirrors the [MyRoster](https://github.c
 ```bash
 npx codingpixel-expo-app my-app
 cd my-app
-npx expo prebuild
-yarn ios       # or: npm run ios / yarn android / npm run android
+yarn ios          # or: yarn android  (npm run ios / npm run android also work)
 ```
 
+`yarn ios` / `yarn android` map to `expo run:ios` / `expo run:android` — these BUILD + install the custom dev-client + launch in one shot (3-10 min the first time, fast incremental after). No separate `expo prebuild` step needed.
+
+For subsequent runs after the dev-client is installed, use `yarn start` (= `expo start --dev-client`) for faster iteration.
+
 The bin name is `codingpixel-expo` (used after global install). Invoke through `npx codingpixel-expo-app` (the package name) for one-shot runs.
 
 ## Not Expo Go-compatible
@@ -23,14 +26,13 @@ This template ships native modules that Expo Go can't load:
 - `react-native-keyboard-controller`
 - `@gorhom/bottom-sheet` (when bottom-sheet support enabled)
 
-You **must** prebuild + run a custom dev-client:
+You **must** run a custom dev-client. `yarn ios` / `yarn android` (= `expo run:ios` / `expo run:android`) handle prebuild + native build + dev-client install in one command:
 
 ```bash
-npx expo prebuild
 yarn ios       # or yarn android / npm run ios / npm run android
 ```
 
-Subsequent runs use the dev-client + bundler (`yarn start`).
+Subsequent runs use the dev-client + bundler (`yarn start` = `expo start --dev-client`).
 
 ## Fonts
 
@@ -48,12 +50,14 @@ If your generated app's `tsconfig.json` already has a `@/*` mapping, the CLI pre
 
 iOS:
 - Xcode + CocoaPods installed (`sudo gem install cocoapods` if missing).
-- `npx expo prebuild` then `yarn ios` (or `npm run ios`) — opens the iOS simulator with your custom dev-client.
+- `yarn ios` (or `npm run ios`) — generates `ios/` dir, runs CocoaPods, builds the dev-client, installs in simulator, launches.
 
 Android:
 - Android SDK + emulator running (or a USB-attached device with debugging enabled).
 - `JAVA_HOME` pointing at JDK 17.
-- `npx expo prebuild` then `yarn android` (or `npm run android`).
+- `yarn android` (or `npm run android`) — generates `android/` dir, builds the dev-client APK, installs, launches.
+
+Bundle identifier defaults to `com.<app-name-no-dashes>` (e.g. `com.myapp`). Edit `app.json` `expo.ios.bundleIdentifier` + `expo.android.package` before submitting to App Store / Play Store.
 
 ## Expo SDK compatibility
 

package/dist/index.js

@@ -107,10 +107,13 @@ async function main() {
     log.success(`Project ready at ${target.dir}`);
     log.raw("");
     log.raw(`  cd ${path.relative(process.cwd(), target.dir) || target.name}`);
-    log.raw(`  npx expo prebuild`);
-    log.raw(`  ${cmdPm} ios       # or: ${cmdPm} android`);
+    log.raw(`  ${cmdPm} ios       # one-time: builds + installs custom dev-client + launches`);
+    log.raw(`  ${cmdPm} android   # same for android (needs emulator/device + Android SDK)`);
     log.raw("");
-    log.info("First-time dev-client build details: README → 'First-time dev-client build'.");
+    log.raw(`  ${cmdPm} start     # subsequent runs: faster — connects to installed dev-client`);
+    log.raw("");
+    log.info("First run takes 3-10 min (native build). After that, `start` is fast. " +
+        "iOS needs Xcode + CocoaPods; Android needs SDK + emulator. Not Expo-Go-compatible.");
 }
 main().catch((err) => {
     log.error(err instanceof Error ? err.message : String(err));

package/dist/patch.js

@@ -19,6 +19,28 @@ export function slugify(name) {
         .replace(/^-+|-+$/g, "")
         .toLowerCase() || "app");
 }
+/**
+ * Build a reverse-DNS bundle identifier segment from the app name.
+ *
+ * Android `package` + iOS `bundleIdentifier` constraints:
+ *   - Lowercase letters / digits only per segment.
+ *   - No dashes, dots, or other punctuation INSIDE a segment.
+ *   - Each segment must START with a letter (no leading digits).
+ *   - At least two segments separated by dots.
+ *
+ * `my-test-app` → `mytestapp` → final ID `com.codingpixel.mytestapp`.
+ * `1pp` → `app1pp` (leading-digit guard).
+ */
+export function bundleIdSegment(name) {
+    let seg = slugify(name).replace(/-/g, "");
+    if (!/^[a-z]/.test(seg))
+        seg = `app${seg}`;
+    return seg || "app";
+}
+/** Compose the full bundle identifier — `com.<safeName>` (no app-author namespace). */
+export function bundleIdFor(name) {
+    return `com.${bundleIdSegment(name)}`;
+}
 function readJson(p) {
     return JSON.parse(fs.readFileSync(p, "utf8"));
 }
@@ -46,6 +68,16 @@ export function patchAppJson(target, name, _answers) {
     json.expo.name = name;
     json.expo.slug = slugify(name);
     json.expo.scheme = slugify(name);
+    // android.package + ios.bundleIdentifier — required to launch the app on
+    // either platform (Expo CLI errors with "Required property ... is not found"
+    // otherwise). Preserve any user-set value; only fill when missing.
+    const bundleId = bundleIdFor(name);
+    json.expo.ios ??= {};
+    if (!json.expo.ios.bundleIdentifier)
+        json.expo.ios.bundleIdentifier = bundleId;
+    json.expo.android ??= {};
+    if (!json.expo.android.package)
+        json.expo.android.package = bundleId;
     json.expo.plugins ??= [];
     if (!json.expo.plugins.some((e) => nameOf(e) === "expo-router")) {
         json.expo.plugins.push("expo-router");
@@ -67,6 +99,9 @@ export function patchAppJsonPlugins(target, answers) {
         "expo-image-picker",
         {
             photosPermission: "The app accesses your photos to let you share them with your friends.",
+            cameraPermission: "The app accesses your camera to let you take photos to share.",
+            // microphone optional — only set if app records video. Add manually:
+            //   "microphonePermission": "...",
         },
     ];
     if (!json.expo.plugins.some((e) => nameOf(e) === nameOf(entry))) {
@@ -129,17 +164,36 @@ export function patchPackageJsonScripts(target) {
     const p = path.join(target, "package.json");
     const pkg = readJson(p);
     pkg.scripts ??= {};
+    // Use `run:android` / `run:ios` so first invocation builds + installs the
+    // custom dev-client (we ship `expo-dev-client` + `react-native-mmkv`, both
+    // Expo-Go-incompatible). `expo start --android` would error with "No
+    // development build for this project is installed" otherwise.
+    // `start` uses `--dev-client` so subsequent runs (after first build)
+    // connect to the installed client correctly.
     const want = {
-        start: "expo start",
-        android: "expo start --android",
-        ios: "expo start --ios",
+        start: "expo start --dev-client",
+        android: "expo run:android",
+        ios: "expo run:ios",
         web: "expo start --web",
         lint: "expo lint",
+        prebuild: "expo prebuild",
     };
     for (const [k, v] of Object.entries(want)) {
         if (!(k in pkg.scripts))
             pkg.scripts[k] = v;
     }
+    // Force-update if upstream defaults from create-expo-app are present (so
+    // existing scaffolds re-running the CLI also get the corrected scripts).
+    const stale = {
+        "expo start": "expo start --dev-client",
+        "expo start --android": "expo run:android",
+        "expo start --ios": "expo run:ios",
+    };
+    for (const [scriptName, current] of Object.entries(pkg.scripts)) {
+        if (scriptName in want && stale[current] === want[scriptName]) {
+            pkg.scripts[scriptName] = want[scriptName];
+        }
+    }
     writeJson(p, pkg);
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codingpixel-expo-app",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Opinionated Expo app scaffolder mirroring MyRoster conventions.",
   "type": "module",
   "bin": {

package/templates/base/src/core/redux/mmkvStorage.ts

@@ -1,6 +1,8 @@
-import { createMMKV } from "react-native-mmkv";
+// react-native-mmkv 3.x+ exports `MMKV` as a class (was `createMMKV()` factory
+// in older versions). MyRoster's source predates the API change.
+import { MMKV } from "react-native-mmkv";
 
-const storage = createMMKV();
+const storage = new MMKV();
 
 export const reduxStorage = {
   setItem: (key: string, value: string) => {
@@ -12,7 +14,7 @@ export const reduxStorage = {
     return Promise.resolve(value);
   },
   removeItem: (key: string) => {
-    storage.remove(key);
+    storage.delete(key);
     return Promise.resolve();
   },
 };

package/templates/base/src/ui/appComponents/appSafeAreaInsets/index.tsx

@@ -1,24 +1,9 @@
-import { RF } from '@theme/responsive';
-import { ANDROID } from '@utils/constants';
-import React, { createContext, useContext } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-const SafeAreaInsetsContext = createContext({});
-
-export const SafeAreaInsetsProvider = ({ children }: any) => {
-  let insets = useSafeAreaInsets();
-  let customInsets = { ...insets };
-  if (ANDROID) {
-    customInsets = { ...insets, bottom: insets?.bottom + RF(12) };
-  }
-
-  return (
-    <SafeAreaInsetsContext.Provider value={customInsets}>
-      {children}
-    </SafeAreaInsetsContext.Provider>
-  );
-};
-
-export const useSafeArea = () => {
-  return useContext(SafeAreaInsetsContext);
-};
+// V5 plan dropped MyRoster's `SafeAreaInsetsProvider` (Android-padding tweak)
+// from `_layout.tsx` — relying on stock `react-native-safe-area-context` is
+// cleaner and avoids a context that was never wrapped around the tree.
+//
+// `useSafeArea` is preserved as a thin re-export so existing component code
+// (AppWrapper, AppButton, etc.) keeps compiling without edits.
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const useSafeArea = useSafeAreaInsets;