@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fady Shawky
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,116 +1,151 @@
-# ReactNativeMagic
+# React Native Magic
 
-**Plug and play** – create your app and start developing without hassle.
+> A production-ready React Native template — TypeScript, Redux Toolkit, a single-instance API layer, token-gated navigation, push, i18n/RTL, and a futuristic Indigo → Cyan design system. Scaffold a real app in one command.
 
-A production-ready React Native template with TypeScript, Redux, React Navigation, and a scalable architecture (Uprise-style). Use it to bootstrap new apps with one command.
+```bash
+npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic
+```
 
-## Requirements
+The generated project boots with branded screens already wired (Splash → Login → OTP → Home → Profile), a working example feature (a `categories` data flow), and sensible defaults: it follows the **system color scheme** and ships in **English / LTR**, with **Arabic / RTL** fully wired and switchable at runtime.
+
+## Features
 
-- **Node.js >= 20** ([Download](https://nodejs.org/en/download/))
-- JDK >= 11 ([Download](https://www.oracle.com/java/technologies/downloads/))
-- Ruby >= 2.7.5 (for iOS)
-- Xcode (for iOS) / Android Studio (for Android)
+- **TypeScript** end to end, with strict, typed Redux hooks.
+- **Redux Toolkit + redux-persist** using the house `newState` / `LoadState` slice pattern; persistence is opt-in per slice via explicit whitelists.
+- **Single-axios API layer** (`get` / `post` / `put` / `deleteApi`) with a request interceptor that injects auth + locale, and a response interceptor that **dedups concurrent 401s** behind one in-flight refresh and retries the original request.
+- **React Navigation 7**, with a token-gated split between the Auth stack and the Main app — set or clear the access token and the navigator switches; no imperative login navigation.
+- **Firebase Cloud Messaging** wired for foreground, background, and cold-start, with **tap-routing** centralized in one file and a background-tap queue that flushes after login.
+- **i18n + RTL** (English and Arabic out of the box) with runtime language switching.
+- **FlashList-backed lists** via a single `FlatListWrapper` so heavy lists stay smooth.
+- **Futuristic Indigo → Cyan design system**: recolored tokens (primary indigo `#5B6CFF`, accent cyan `#22E0D6`, deep-ink backgrounds), gradient + glow brand tokens, and a forward-leaning **"FS" monogram** logo built on `react-native-svg`.
+- **Light / dark / system theming** — the app follows the OS by default and exposes a manual toggle.
 
 ## Quick start
 
 ```bash
+# 1. Generate the app
 npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic
 cd YourAppName
-```
-
-Optional: set your bundle ID at creation:
 
-```bash
-npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic --package-name com.yourcompany.yourapp
-```
+# 2. Install dependencies (runs patch-package + husky)
+npm install
 
-For iOS, install pods:
+# 3. Configure your backend
+cp .env.example .env        # then set API_BASE_URL
 
-```bash
+# 4. iOS only — install pods
 cd ios && pod install && cd ..
+
+# 5. Run it
+npm start
+npm run ios                 # or an Android variant (see Scripts)
 ```
 
-Then run:
+Optionally set your bundle ID at creation time:
 
 ```bash
-npm start
-npm run ios    # or an Android variant below
+npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic --package-name com.yourcompany.yourapp
 ```
 
-## First steps after creating your app
-
-1. **App name & bundle ID** – Set at init (or you’ll be prompted for package name if you didn’t pass `--package-name`). See [CUSTOMIZATION.md](template/docs/CUSTOMIZATION.md#app-name-and-bundle-id).
-2. **API** – Copy `.env.example` to `.env` and set `API_BASE_URL` (and other vars) for your backend.
-3. **Theme** – Edit `src/core/theme/colors.ts` (and `fonts.ts`, `commonSizes.ts` if needed) for your brand.
-4. **Config** – Optional: adjust `src/core/config/index.ts` for feature toggles or app-level constants.
+If you omit `--package-name`, the template prompts you for one after init (or press Enter to set it later).
 
-## Documentation
+> **Push notifications** need your own Firebase config files (`GoogleService-Info.plist`, `google-services.json`) — they are not shipped in the template. Add them and apply the small native snippets in [CUSTOMIZATION.md](template/docs/CUSTOMIZATION.md#firebase--push-notifications-fcm) before building on a device.
 
-In your generated project you’ll have:
+## Requirements
 
-- **[docs/ARCHITECTURE.md](template/docs/ARCHITECTURE.md)** – Layers, folder map, data flow, SOLID.
-- **[docs/CUSTOMIZATION.md](template/docs/CUSTOMIZATION.md)** – App name, bundle ID, API, theme, adding a screen/slice/language.
-- **[docs/BEST_PRACTICES.md](template/docs/BEST_PRACTICES.md)** – Code style, structure, testing, security, upgrades.
+- **Node.js >= 20** ([download](https://nodejs.org/en/download/))
+- JDK >= 11 ([download](https://www.oracle.com/java/technologies/downloads/))
+- Ruby >= 2.7.5 (for iOS pods)
+- Xcode (iOS) / Android Studio (Android)
 
 ## Project structure (in your app)
 
 ```
 src/
-├── common/          # Shared components, localization, helpers, validations, utils
-├── core/            # Store (Redux), API, theme, config
-├── navigation/      # Auth stack, main stack, tabs
-├── screens/         # Feature screens
-└── sheetManager/    # Action sheets
+├── common/          # Shared components (ErrorBoundary, NetworkBanner, SnackbarProvider, FlatListWrapper),
+│                    # localization (i18n + RTL), hooks, helpers, validations
+├── core/
+│   ├── api/         # Single axios instance + interceptors (auth, locale, 401-refresh dedup)
+│   ├── store/       # Redux Toolkit slices (app, user, categories) + redux-persist whitelists
+│   ├── theme/       # colors.ts, fonts.ts, commonSizes.ts, brand.ts, ThemeProvider
+│   ├── config/      # Env-driven config (API_BASE_URL, ENV, feature toggles)
+│   └── notifications/  # FCM listeners + tap-routing
+├── design-system/   # Token + brand re-exports and the theme provider (barrel)
+├── navigation/      # Auth stack, main stack, root navigation ref
+├── screens/         # Splash, Login, OTP, Home, Profile
+└── assets/brand/    # Logo SVGs (logo-primary, logo-mono, logo-mark, wordmark-dark)
 ```
 
+> Note: feature code uses **relative imports**. Path aliases (`@core/*`, `@common/*`, `@design-system`, …) are configured in `babel.config.js`, `tsconfig.json`, and `jest.config.js` and are available if you prefer them, but the shipped code does not use them.
+
+## Customization
+
+| Want to change… | Edit |
+|-----------------|------|
+| Brand colors | `src/core/theme/colors.ts` |
+| Fonts | `src/core/theme/fonts.ts` |
+| Sizes / spacing | `src/core/theme/commonSizes.ts` |
+| Gradients & glow shadows | `src/core/theme/brand.ts` (`BrandGradients`, `Glow`) |
+| Logo | `src/assets/brand/*.svg` + the `Logo` component in `src/common/components/Logo.tsx` |
+| API base URL / env | `.env` (read through `src/core/config`) |
+
+Two visual references ship with the template:
+
+- **[Design system](template/docs/design-system.html)** — the color ramps, gradients, glow, and logo variants.
+- **[Wireframes](template/docs/wireframes.html)** — the screen flow.
+
+Full guides:
+
+- **[docs/ARCHITECTURE.md](template/docs/ARCHITECTURE.md)** — layers, folder map, data flow, provider order, SOLID mapping.
+- **[docs/CUSTOMIZATION.md](template/docs/CUSTOMIZATION.md)** — app name, bundle ID, API, theme, adding a screen / slice / language, Firebase.
+- **[docs/BEST_PRACTICES.md](template/docs/BEST_PRACTICES.md)** — code style, structure, testing, security, upgrades.
+
 ## Scripts
 
 | Command | Description |
 |---------|-------------|
 | `npm start` | Start Metro bundler |
 | `npm run ios` | Run on iOS |
-| `npm run android:prod:debug` | Run Android (production, debug) |
-| `npm run android:prod:release` | Run Android (production, release) |
-| `npm run android:staging:debug` | Run Android (staging, debug) |
-| `npm run android:staging:release` | Run Android (staging, release) |
 | `npm run android:development:debug` | Run Android (development, debug) |
 | `npm run android:development:release` | Run Android (development, release) |
-| `npm test` | Run tests |
-| `npm run lint` | Lint code |
-
-## Versioning
+| `npm run android:staging:debug` | Run Android (staging, debug) |
+| `npm run android:staging:release` | Run Android (staging, release) |
+| `npm run android:prod:debug` | Run Android (production, debug) |
+| `npm run android:prod:release` | Run Android (production, release) |
+| `npm test` | Run tests (Jest) |
+| `npm run typecheck` | TypeScript check (`tsc --noEmit`) |
+| `npm run lint` | Lint code (ESLint) |
+| `node scripts/ci-sync-env.cjs <envFile> KEY=value …` | Write/update env keys for CI (versionCode, buildNumber, …) |
 
-- **React Native**: ^0.84.x (current stable at release).
-- **React**: ^19.2.x.
-- **Node**: >= 24 (LTS).
+## Versions
 
+- **React Native** 0.85.x
+- **React** 19.2.x
+- **Node** >= 20 (LTS)
 
 ## Common issues
 
-**iOS – Pod install fails**
+**iOS — Pod install fails**
 
 ```bash
 cd ios && pod deintegrate && pod install && cd ..
 ```
 
-
-**Android – Gradle / SDK**
+**Android — Gradle / SDK**
 
 - Run `./gradlew clean` in `android/`.
 - Ensure `android/local.properties` has `sdk.dir` set to your Android SDK path.
 
-**Upgrading React Native**
-
-Use [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) (select current → target version) and apply the suggested changes.
+**Upgrading React Native** — use the [Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) (select current → target version) and apply the suggested changes.
 
 ## Contributing
 
-Contributions are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for how to get started, run the template locally, and open a pull request. This project adheres to a [Code of Conduct](CODE_OF_CONDUCT.md).
+Contributions are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for how to run the template locally and open a pull request. This project adheres to a [Code of Conduct](CODE_OF_CONDUCT.md).
 
 ## License
 
-MIT – see [LICENSE.md](LICENSE.md).
+MIT — see [LICENSE.md](LICENSE.md).
 
 ## Author
 
-Fady Shawky – [GitHub](https://github.com/fadyshawky)
+Fady Shawky — [GitHub](https://github.com/fadyshawky)

package/index.js

@@ -0,0 +1,4 @@
+// Entry point for the @fadyshawky/react-native-magic template package.
+// The React Native CLI consumes this package via `--template` and reads
+// template.config.js; this file simply exposes that config for tooling.
+module.exports = require('./template.config.js');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "2.2.0",
-  "description": "Plug-and-play React Native template: TypeScript, Redux, React Navigation, scalable architecture. Init and start developing without hassle.",
+  "version": "2.3.0",
+  "description": "Plug-and-play React Native template: TypeScript, Redux Toolkit, React Navigation, scalable architecture. Init and start developing without hassle.",
   "keywords": [
     "react-native-magic",
     "react-native",
@@ -19,12 +19,18 @@
   "author": "Fady Shawky",
   "type": "commonjs",
   "main": "index.js",
+  "files": [
+    "template",
+    "scripts",
+    "template.config.js",
+    "index.js"
+  ],
   "scripts": {
     "test": "exit 0"
   },
   "peerDependencies": {
     "react": "^19.2.0",
-    "react-native": "^0.84.0"
+    "react-native": ">=0.84.0"
   },
   "engines": {
     "node": ">=20"

package/scripts/askPackageName.js

@@ -44,18 +44,23 @@ function ensureEnvHasPackageIds(envPath, packageName) {
     const eq = line.indexOf('=');
     if (eq === -1) return line;
     const key = line.slice(0, eq).trim();
-    if (key === 'APP_ID' || key === 'ANDROID_APP_ID') {
+    if (key === 'APP_ID' || key === 'ANDROID_APP_ID' || key === 'BUNDLE_ID') {
       return `${key}=${packageName}`;
     }
     return line;
   });
-  const hasAppId = lines.some((l) => /^APP_ID=/.test(l) || /^ANDROID_APP_ID=/.test(l));
-  if (!hasAppId) {
+  const hasAppId = lines.some((l) => /^APP_ID=/.test(l));
+  const hasAndroidAppId = lines.some((l) => /^ANDROID_APP_ID=/.test(l));
+  const hasBundleId = lines.some((l) => /^BUNDLE_ID=/.test(l));
+  const appended = [];
+  if (!hasAppId) appended.push(`APP_ID=${packageName}`);
+  if (!hasAndroidAppId) appended.push(`ANDROID_APP_ID=${packageName}`);
+  if (!hasBundleId) appended.push(`BUNDLE_ID=${packageName}`);
+  if (appended.length) {
     if (updated.length && updated[updated.length - 1] !== '') {
       updated.push('');
     }
-    updated.push(`APP_ID=${packageName}`);
-    updated.push(`ANDROID_APP_ID=${packageName}`);
+    updated.push(...appended);
   }
   fs.writeFileSync(fullPath, updated.join('\n'), 'utf8');
 }

package/template/.env.development

@@ -1,8 +1,10 @@
-# Don't forget to add the .env.development file to the .gitignore file
-ENV=development
 API_BASE_URL=https://dev-api.example.com
-API_KEY=dev_key
-ANDROID_APP_ID=com.reactnativemagic.development
-ANDROID_VERSION_CODE=1
+ENVIRONMENT=development
+APP_ID=com.yourcompany.yourapp.dev
+ANDROID_APP_ID=com.yourcompany.yourapp.dev
+BUNDLE_ID=com.yourcompany.yourapp.dev
 ANDROID_VERSION_NAME=1.0.0
-PROJECT_NAME=YOURAPPNAME
+ANDROID_VERSION_CODE=1
+IOS_VERSION_NUMBER=1.0.0
+IOS_BUILD_NUMBER=1
+STORYBOOK=false

package/template/.env.example

@@ -1,12 +1,22 @@
-# Copy this file to .env and set your values.
-# Do not commit .env (it is in .gitignore).
+# Copy this file to .env (or .env.development / .env.staging / .env.production)
+# and set values per environment. Do NOT commit real .env files.
 
-ENV=development
+# --- API ---
 API_BASE_URL=https://api.example.com
+ENVIRONMENT=development
 
-# Bundle ID (Android applicationId / iOS). Set at init with --package-name or when prompted.
+# --- Bundle / Package IDs ---
+# Set at init with --package-name or interactive prompt.
 APP_ID=com.yourcompany.yourapp
 ANDROID_APP_ID=com.yourcompany.yourapp
+BUNDLE_ID=com.yourcompany.yourapp
 
+# --- Versioning ---
+# Used by Gradle build & ci-sync-env.cjs in CI.
+ANDROID_VERSION_NAME=1.0.0
 ANDROID_VERSION_CODE=1
-ANDROID_VERSION_NAME=1.0.0
+IOS_VERSION_NUMBER=1.0.0
+IOS_BUILD_NUMBER=1
+
+# --- Tooling toggles ---
+STORYBOOK=false

package/template/.env.production

@@ -1,8 +1,10 @@
-# Don't forget to add the .env.production file to the .gitignore file
-ENV=production
 API_BASE_URL=https://api.example.com
-API_KEY=production_key
-ANDROID_APP_ID=com.reactnativemagic
-ANDROID_VERSION_CODE=1
+ENVIRONMENT=production
+APP_ID=com.yourcompany.yourapp
+ANDROID_APP_ID=com.yourcompany.yourapp
+BUNDLE_ID=com.yourcompany.yourapp
 ANDROID_VERSION_NAME=1.0.0
-PROJECT_NAME=YOURAPPNAME
+ANDROID_VERSION_CODE=1
+IOS_VERSION_NUMBER=1.0.0
+IOS_BUILD_NUMBER=1
+STORYBOOK=false

package/template/.env.staging

@@ -1,8 +1,10 @@
-# Don't forget to add the .env.staging file to the .gitignore file
-ENV=staging
 API_BASE_URL=https://staging-api.example.com
-API_KEY=staging_key
-ANDROID_APP_ID=com.reactnativemagic.staging
-ANDROID_VERSION_CODE=1
+ENVIRONMENT=staging
+APP_ID=com.yourcompany.yourapp.staging
+ANDROID_APP_ID=com.yourcompany.yourapp.staging
+BUNDLE_ID=com.yourcompany.yourapp.staging
 ANDROID_VERSION_NAME=1.0.0
-PROJECT_NAME=YOURAPPNAME
+ANDROID_VERSION_CODE=1
+IOS_VERSION_NUMBER=1.0.0
+IOS_BUILD_NUMBER=1
+STORYBOOK=false

package/template/.eslintrc.js

@@ -1,4 +1,18 @@
 module.exports = {
   root: true,
   extends: '@react-native',
+  // Register eslint-plugin-import explicitly: @react-native's eslintrc config
+  // references import/* rules but doesn't register the plugin (it's flat-config
+  // first), which otherwise yields "Definition for rule not found".
+  plugins: ['import'],
+  // Generated files (e.g. ImageResources.g.ts) aren't linted.
+  ignorePatterns: ['**/*.g.ts'],
+  rules: {
+    // Surface these as warnings instead of hard errors (mostly cleanup nits).
+    '@typescript-eslint/no-unused-vars': 'warn',
+    'react-hooks/exhaustive-deps': 'warn',
+    'import/no-unassigned-import': 'off',
+    'import/no-unused-modules': 'off',
+    'import/no-default-export': 'off',
+  },
 };

package/template/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/template/App.tsx

@@ -1,20 +1,25 @@
 /**
  * @format
  */
-import React from 'react';
-import {LogBox, View} from 'react-native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+import React, {useEffect} from 'react';
+import {LogBox, StyleSheet, View} from 'react-native';
 import {SheetProvider} from 'react-native-actions-sheet';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import {AppStatusBar} from './src/common/components/AppStatusBar';
+import {ErrorBoundary} from './src/common/components/ErrorBoundary';
+import {NetworkBanner} from './src/common/components/NetworkBanner';
 import {SnackbarProvider} from './src/common/components/SnackbarProvider';
 import {LocalizationProvider} from './src/common/localization/LocalizationProvider';
 import {RTLInitializer} from './src/common/localization/RTLInitializer';
+import {startPushNotificationListeners} from './src/core/notifications/notificationService';
 import {useAppSelector} from './src/core/store/reduxHelpers';
 import {persistor, store} from './src/core/store/store';
-import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
 import {NaturalColors} from './src/core/theme/colors';
+import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
 import AppNavigator from './src/navigation/MainNavigation';
 
 LogBox.ignoreAllLogs();
@@ -23,19 +28,36 @@ const ThemedApp = () => {
   const {theme} = useTheme();
   const {language} = useAppSelector(state => state.app);
 
+  useEffect(() => {
+    const unsubscribe = startPushNotificationListeners();
+    return unsubscribe;
+  }, []);
+
   return (
     <RTLInitializer>
       <LocalizationProvider initialLanguage={language}>
         <SafeAreaProvider>
-          <View style={{flex: 1, backgroundColor: theme?.colors?.background_2 ?? NaturalColors.background_2}}>
-            <SafeAreaView style={{position: 'absolute'}} />
+          <View
+            style={[
+              styles.flex,
+              {
+                backgroundColor:
+                  theme?.colors?.background_2 ?? NaturalColors.background_2,
+              },
+            ]}>
+            <SafeAreaView style={styles.absolute} />
             <AppStatusBar
               barStyle={theme?.mode === 'dark' ? 'light-content' : 'dark-content'}
-              backgroundColor={theme?.colors?.background_2 ?? NaturalColors.background_2}
+              backgroundColor={
+                theme?.colors?.background_2 ?? NaturalColors.background_2
+              }
             />
             <SheetProvider>
-              <AppNavigator />
+              <BottomSheetModalProvider>
+                <AppNavigator />
+              </BottomSheetModalProvider>
             </SheetProvider>
+            <NetworkBanner />
           </View>
         </SafeAreaProvider>
       </LocalizationProvider>
@@ -45,16 +67,25 @@ const ThemedApp = () => {
 
 function App(): React.JSX.Element {
   return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <SnackbarProvider>
-          <ThemeProvider initialTheme="dark">
-            <ThemedApp />
-          </ThemeProvider>
-        </SnackbarProvider>
-      </PersistGate>
-    </Provider>
+    <ErrorBoundary>
+      <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <GestureHandlerRootView style={styles.flex}>
+            <SnackbarProvider>
+              <ThemeProvider>
+                <ThemedApp />
+              </ThemeProvider>
+            </SnackbarProvider>
+          </GestureHandlerRootView>
+        </PersistGate>
+      </Provider>
+    </ErrorBoundary>
   );
 }
 
+const styles = StyleSheet.create({
+  flex: {flex: 1},
+  absolute: {position: 'absolute'},
+});
+
 export default App;

package/template/__tests__/App.test.tsx

@@ -1,17 +1,35 @@
 /**
  * @format
+ *
+ * Smoke tests for the template's core helpers.
+ *
+ * Note: we intentionally do NOT render <App /> here. Mounting the full app pulls
+ * in @gorhom/bottom-sheet → react-native-reanimated 4 → react-native-worklets,
+ * whose native module can't initialize under plain Jest. Component/render tests
+ * that touch reanimated, gesture-handler or bottom-sheet need a richer setup
+ * (e.g. @testing-library/react-native plus the reanimated jest mock) — add that
+ * per-test when you need it. These unit tests keep `npm test` fast and reliable.
  */
+import {newState} from '../src/common/utils/newState';
+import {ensureString} from '../src/core/utils/stringUtils';
 
-import 'react-native';
-import React from 'react';
-import App from '../App';
+describe('newState', () => {
+  it('merges a partial patch into a fresh copy without mutating the original', () => {
+    const original = {a: 1, b: 2};
+    const next = newState(original, {b: 3});
 
-// Note: import explicitly to use the types shipped with jest.
-import {it} from '@jest/globals';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
+    expect(next).toEqual({a: 1, b: 3});
+    expect(original).toEqual({a: 1, b: 2});
+    expect(next).not.toBe(original);
+  });
+});
 
-it('renders correctly', () => {
-  renderer.create(<App />);
+describe('ensureString', () => {
+  it('passes strings through and coerces everything else to a string', () => {
+    expect(ensureString('hello')).toBe('hello');
+    expect(ensureString(42)).toBe('42');
+    expect(ensureString(null)).toBe('');
+    expect(ensureString(undefined)).toBe('');
+    expect(ensureString({message: 'oops'})).toBe('oops');
+  });
 });

package/template/babel.config.js

@@ -1,4 +1,23 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: ['react-native-reanimated/plugin'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+        alias: {
+          '@core': './src/core',
+          '@common': './src/common',
+          '@navigation': './src/navigation',
+          '@screens': './src/screens',
+          '@sheetManager': './src/sheetManager',
+          '@design-system': './src/design-system',
+          '@types': './src/types',
+          '@utils': './src/utils',
+        },
+      },
+    ],
+    'react-native-worklets/plugin',
+  ],
 };