@fadyshawky/react-native-magic 2.0.9 → 2.1.0

package/README.md

@@ -1,266 +1,107 @@
 # ReactNativeMagic
 
-A modern, production-ready React Native template with best practices, common dependencies, and a scalable architecture.
+**Plug and play** – create your app and start developing without hassle.
+
+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.
 
 ## Requirements
 
-- Node.js >= 14 ([Download](https://nodejs.org/en/download/))
+- **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) ([Download](https://www.ruby-lang.org/en/downloads/))
-- Xcode (for iOS) ([Mac App Store](https://apps.apple.com/us/app/xcode/id497799835))
-- Android Studio (for Android) ([Download](https://developer.android.com/studio))
+- Ruby >= 2.7.5 (for iOS)
+- Xcode (for iOS) / Android Studio (for Android)
 
-## Installation
+## Quick start
 
 ```bash
 npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic
 cd YourAppName
 ```
 
-For iOS, install pods:
+Optional: set your bundle ID at creation:
 
 ```bash
-cd ios && pod install && cd ..
-```
-
-## Project Structure
-
+npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic --package-name com.yourcompany.yourapp
 ```
-YourAppName/
-├── src/
-│   ├── components/       # Reusable UI components
-│   ├── screens/         # Screen components
-│   ├── navigation/      # Navigation configurations
-│   ├── services/        # API services and other external services
-│   ├── store/          # State management
-│   │   ├── slices/     # Redux slices
-│   │   └── index.ts    # Store configuration
-│   ├── theme/          # Theme configurations
-│   ├── utils/          # Utility functions
-│   └── types/          # TypeScript type definitions
-├── android/
-├── ios/
-└── ...
-```
-
-## Features
-
-### 1. Type Safety
-
-- Full TypeScript support
-- Pre-configured tsconfig.json
-- Type definitions for all components
-
-### 2. Navigation
-
-- React Navigation v6
-- Type-safe navigation
-- Bottom tabs setup
-- Stack navigation setup
-
-Documentation: [React Navigation](https://reactnavigation.org/docs/getting-started)
-
-### 3. State Management
-
-- Redux Toolkit
-- Async storage integration
-- Predefined store setup
 
-Documentation: [Redux Toolkit](https://redux-toolkit.js.org/introduction/getting-started)
-
-### 4. Environment Variables
-
-- React Native Config integration
-- Secure environment configuration
-- Type-safe environment variables
-
-Documentation: [React Native Config](https://github.com/luggit/react-native-config)
-
-### 5. Styling
-
-- React Native Paper
-- Custom theming system
-- Dark mode support
-
-Documentation: [React Native Paper](https://callstack.github.io/react-native-paper/)
-
-### 6. Testing
-
-- Jest configuration
-- React Native Testing Library
-- Example tests included
-
-Documentation:
-
-- [Jest](https://jestjs.io/docs/getting-started)
-- [React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
-
-## Available Scripts
+For iOS, install pods:
 
 ```bash
-# Start the Metro bundler
-npm start
-
-# Run on iOS
-npm run ios
-
-# Run on Android
-npm run android
-
-# Run tests
-npm test
-
-# Lint code
-npm run lint
-
-# Type checking
-npm run typescript
-```
-
-## Dependencies
-
-### Production Dependencies
-
-```json
-{
-  "@react-navigation/bottom-tabs": "^6.x",
-  "@react-navigation/native": "^6.x",
-  "@react-navigation/native-stack": "^6.x",
-  "@reduxjs/toolkit": "^1.x",
-  "react-native-paper": "^5.x",
-  "react-native-safe-area-context": "^4.x",
-  "react-native-screens": "^3.x",
-  "@react-native-async-storage/async-storage": "^1.x",
-  "react-native-config": "^1.x"
-}
-```
-
-### Development Dependencies
-
-```json
-{
-  "@testing-library/react-native": "^11.x",
-  "@types/jest": "^29.x",
-  "@types/react": "^18.x",
-  "typescript": "^4.x",
-  "jest": "^29.x"
-}
+cd ios && pod install && cd ..
 ```
 
-## Common Issues & Solutions
-
-### iOS Build Issues
-
-1. Pod installation fails:
+Then run:
 
 ```bash
-cd ios
-pod deintegrate
-pod install
+npm start
+npm run ios    # or: npm run android
 ```
 
-2. Clean build:
+## First steps after creating your app
 
-```bash
-cd ios
-xcodebuild clean
-cd ..
-npm run ios
-```
+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.
 
-### Android Build Issues
+## Documentation
 
-1. Gradle issues:
+In your generated project you’ll have:
 
-```bash
-cd android
-./gradlew clean
-cd ..
-npm run android
-```
+- **[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.
 
-2. SDK location issues:
-   Create a `local.properties` file in the android folder with your SDK path:
+## Project structure (in your app)
 
-```properties
-sdk.dir=/Users/USERNAME/Library/Android/sdk
 ```
-
-## Customization
-
-### 1. Changing Theme
-
-Edit `src/theme/index.ts`:
-
-```typescript
-export const theme = {
-  colors: {
-    primary: "#YOUR_COLOR",
-    // ...
-  },
-  // ...
-};
+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
 ```
 
-### 2. Adding New Navigation Screens
+## Scripts
 
-1. Create screen in `src/screens`
-2. Add to navigation stack in `src/navigation`
-3. Update types in `src/types/navigation.ts`
+| Command | Description |
+|---------|-------------|
+| `npm start` | Start Metro bundler |
+| `npm run ios` | Run on iOS |
+| `npm run android` | Run on Android |
+| `npm test` | Run tests |
+| `npm run lint` | Lint code |
 
-### 3. Environment Variables
+## Versioning
 
-1. Create `.env` file in root directory:
+- **React Native**: ^0.84.x (current stable at release).
+- **React**: ^19.2.x.
+- **Node**: >= 20 (LTS).
 
-```env
-API_URL=https://api.example.com
-ENV=development
-```
+Dependencies use **caret (^)** so your app can get patch/minor updates independently.
 
-2. Access variables in your code:
+## Common issues
 
-```typescript
-import Config from "react-native-config";
+**iOS – Pod install fails**
 
-console.log(Config.API_URL);
+```bash
+cd ios && pod deintegrate && pod install && cd ..
 ```
 
-Note: Remember to add `.env` to your `.gitignore` file and provide a `.env.example` template.
+**Android – Gradle / SDK**
 
-## Contributing
+- Run `./gradlew clean` in `android/`.
+- Ensure `android/local.properties` has `sdk.dir` set to your Android SDK path.
 
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
+**Upgrading React Native**
 
-## Useful Links
-
-- [React Native Documentation](https://reactnative.dev/docs/getting-started)
-- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
-- [React Navigation Documentation](https://reactnavigation.org/docs/getting-started)
-- [Redux Toolkit Documentation](https://redux-toolkit.js.org/introduction/getting-started)
-- [React Native Paper Documentation](https://callstack.github.io/react-native-paper/)
+Use [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) (select current → target version) and apply the suggested changes.
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
-
-## Support
-
-If you find this template helpful, consider buying me a beer! 🍺
-
-<a href="https://www.buymeacoffee.com/fadytshawke"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=fadytshawke&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" /></a>
+MIT – see [LICENSE.md](LICENSE.md).
 
 ## Author
 
-Fady Shawky
-
-- GitHub: [@fadyshawky](https://github.com/fadyshawky)
-
-## Acknowledgments
-
-- React Native Team
-- React Navigation Team
-- All contributors who help maintain this template
+Fady Shawky – [GitHub](https://github.com/fadyshawky)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "2.0.9",
-  "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
+  "version": "2.1.0",
+  "description": "Plug-and-play React Native template: TypeScript, Redux, React Navigation, scalable architecture. Init and start developing without hassle.",
   "keywords": [
     "react-native-magic",
     "react-native",
@@ -110,6 +110,13 @@
   "scripts": {
     "test": "exit 0"
   },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-native": "^0.84.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/fadyshawky/ReactNativeMagic.git"

package/scripts/askPackageName.js

@@ -0,0 +1,165 @@
+#!/usr/bin/env node
+
+/**
+ * Post-init script: if the user did not pass --package-name at init,
+ * prompt for a package name and apply it to .env and iOS project.
+ * Runs with cwd = the new project directory.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+const PACKAGE_NAME_REGEX = /^([a-zA-Z][a-zA-Z0-9_]*\.)+[a-zA-Z][a-zA-Z0-9_]*$/;
+
+function prompt(question) {
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve((answer || '').trim());
+    });
+  });
+}
+
+function validatePackageName(packageName) {
+  const parts = packageName.split('.');
+  if (parts.length < 2) {
+    return 'Package name must have at least two segments (e.g. com.app)';
+  }
+  if (!PACKAGE_NAME_REGEX.test(packageName)) {
+    return 'Package name can only contain letters, numbers, underscores and dots';
+  }
+  return null;
+}
+
+function ensureEnvHasPackageIds(envPath, packageName) {
+  const fullPath = path.join(process.cwd(), envPath);
+  let content = '';
+  if (fs.existsSync(fullPath)) {
+    content = fs.readFileSync(fullPath, 'utf8');
+  }
+  const lines = content.split('\n');
+  const updated = lines.map((line) => {
+    const eq = line.indexOf('=');
+    if (eq === -1) return line;
+    const key = line.slice(0, eq).trim();
+    if (key === 'APP_ID' || key === 'ANDROID_APP_ID') {
+      return `${key}=${packageName}`;
+    }
+    return line;
+  });
+  const hasAppId = lines.some((l) => /^APP_ID=/.test(l) || /^ANDROID_APP_ID=/.test(l));
+  if (!hasAppId) {
+    if (updated.length && updated[updated.length - 1] !== '') {
+      updated.push('');
+    }
+    updated.push(`APP_ID=${packageName}`);
+    updated.push(`ANDROID_APP_ID=${packageName}`);
+  }
+  fs.writeFileSync(fullPath, updated.join('\n'), 'utf8');
+}
+
+function getCurrentIosBundleId() {
+  const iosDir = path.join(process.cwd(), 'ios');
+  if (!fs.existsSync(iosDir)) return null;
+  const entries = fs.readdirSync(iosDir, { withFileTypes: true });
+  const pbxprojPaths = entries
+    .filter((d) => d.isDirectory() && d.name.endsWith('.xcodeproj'))
+    .map((d) => path.join(iosDir, d.name, 'project.pbxproj'))
+    .filter((p) => fs.existsSync(p));
+  const customPattern = /PRODUCT_BUNDLE_IDENTIFIER = "([^"]+)"/;
+  for (const pbx of pbxprojPaths) {
+    const content = fs.readFileSync(pbx, 'utf8');
+    const customMatch = content.match(customPattern);
+    if (customMatch) {
+      const id = customMatch[1];
+      if (!id.includes('$(')) return id;
+    }
+  }
+  return null;
+}
+
+function updateIosBundleId(packageName) {
+  const iosDir = path.join(process.cwd(), 'ios');
+  if (!fs.existsSync(iosDir)) return;
+
+  const entries = fs.readdirSync(iosDir, { withFileTypes: true });
+  const pbxprojPaths = entries
+    .filter((d) => d.isDirectory() && d.name.endsWith('.xcodeproj'))
+    .map((d) => path.join(iosDir, d.name, 'project.pbxproj'))
+    .filter((p) => fs.existsSync(p));
+
+  for (const pbx of pbxprojPaths) {
+    let content = fs.readFileSync(pbx, 'utf8');
+    const pattern = /PRODUCT_BUNDLE_IDENTIFIER = "org\.reactjs\.native\.example\.\$\(PRODUCT_NAME:rfc1034identifier\)"/g;
+    if (pattern.test(content)) {
+      content = content.replace(
+        /PRODUCT_BUNDLE_IDENTIFIER = "org\.reactjs\.native\.example\.\$\(PRODUCT_NAME:rfc1034identifier\)"/g,
+        `PRODUCT_BUNDLE_IDENTIFIER = "${packageName}"`
+      );
+      fs.writeFileSync(pbx, content, 'utf8');
+    }
+  }
+}
+
+async function main() {
+  const existingBundleId = getCurrentIosBundleId();
+  if (existingBundleId) {
+    // User passed --package-name; sync to .env for Android
+    const envPath = path.join(process.cwd(), '.env');
+    const examplePath = path.join(process.cwd(), '.env.example');
+    if (!fs.existsSync(envPath) && fs.existsSync(examplePath)) {
+      fs.copyFileSync(examplePath, envPath);
+    }
+    ensureEnvHasPackageIds('.env', existingBundleId);
+    for (const f of ['.env.development', '.env.staging', '.env.production']) {
+      if (fs.existsSync(path.join(process.cwd(), f))) {
+        ensureEnvHasPackageIds(f, existingBundleId);
+      }
+    }
+    console.log(`\nSynced package name ${existingBundleId} to .env (Android).\n`);
+    return;
+  }
+
+  console.log('\nYou did not pass --package-name. Set a bundle ID (Android applicationId / iOS PRODUCT_BUNDLE_IDENTIFIER) now.\n');
+
+  const answer = await prompt('Package name (e.g. com.company.app), or press Enter to skip: ');
+
+  if (!answer) {
+    console.log('\nSkipped. You can set APP_ID and ANDROID_APP_ID in .env later, and set the iOS bundle ID in Xcode or use react-native-rename.\n');
+    return;
+  }
+
+  const err = validatePackageName(answer);
+  if (err) {
+    console.error('\nInvalid package name:', err);
+    process.exit(1);
+  }
+
+  const packageName = answer;
+
+  // Ensure .env exists
+  const envPath = path.join(process.cwd(), '.env');
+  const examplePath = path.join(process.cwd(), '.env.example');
+  if (!fs.existsSync(envPath) && fs.existsSync(examplePath)) {
+    fs.copyFileSync(examplePath, envPath);
+  }
+
+  ensureEnvHasPackageIds('.env', packageName);
+  const envFiles = ['.env.development', '.env.staging', '.env.production'];
+  for (const f of envFiles) {
+    if (fs.existsSync(path.join(process.cwd(), f))) {
+      ensureEnvHasPackageIds(f, packageName);
+    }
+  }
+
+  updateIosBundleId(packageName);
+
+  console.log(`\nSet package name to ${packageName} in .env and iOS project.\n`);
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/template/.env.example

@@ -0,0 +1,9 @@
+# Copy this file to .env and set your values.
+# Do not commit .env (it is in .gitignore).
+
+ENV=development
+API_BASE_URL=https://api.example.com
+
+# Bundle ID (Android applicationId / iOS). Set at init with --package-name or when prompted.
+APP_ID=com.yourcompany.yourapp
+ANDROID_APP_ID=com.yourcompany.yourapp

package/template/App.tsx

@@ -1,20 +1,20 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
  * @format
  */
 import React from 'react';
-import {LogBox, SafeAreaView, StatusBar} from 'react-native';
+import {LogBox, View} from 'react-native';
 import {SheetProvider} from 'react-native-actions-sheet';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+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 {SnackbarProvider} from './src/common/components/SnackbarProvider';
 import {LocalizationProvider} from './src/common/localization/LocalizationProvider';
 import {RTLInitializer} from './src/common/localization/RTLInitializer';
 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 AppNavigator from './src/navigation/MainNavigation';
 
 LogBox.ignoreAllLogs();
@@ -27,14 +27,16 @@ const ThemedApp = () => {
     <RTLInitializer>
       <LocalizationProvider initialLanguage={language}>
         <SafeAreaProvider>
-          <SafeAreaView style={{position: 'absolute'}} />
-          <StatusBar
-            barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
-            backgroundColor={theme.colors.background_2}
-          />
-          <SheetProvider>
-            <AppNavigator />
-          </SheetProvider>
+          <View style={{flex: 1, backgroundColor: theme?.colors?.background_2 ?? NaturalColors.background_2}}>
+            <SafeAreaView style={{position: 'absolute'}} />
+            <AppStatusBar
+              barStyle={theme?.mode === 'dark' ? 'light-content' : 'dark-content'}
+              backgroundColor={theme?.colors?.background_2 ?? NaturalColors.background_2}
+            />
+            <SheetProvider>
+              <AppNavigator />
+            </SheetProvider>
+          </View>
         </SafeAreaProvider>
       </LocalizationProvider>
     </RTLInitializer>
@@ -45,9 +47,11 @@ function App(): React.JSX.Element {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <ThemeProvider initialTheme="dark">
-          <ThemedApp />
-        </ThemeProvider>
+        <SnackbarProvider>
+          <ThemeProvider initialTheme="dark">
+            <ThemedApp />
+          </ThemeProvider>
+        </SnackbarProvider>
       </PersistGate>
     </Provider>
   );

package/template/CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+## [Unreleased]
+
+### Added
+
+- Architecture aligned with Uprise-style layout: `common/`, `core/`, `navigation/`, `screens/`, `sheetManager/`.
+- Single app config module (`src/core/config`) for API base URL and feature toggles; base URL from `.env` via react-native-config.
+- `AppStatusBar` component to avoid deprecated Android status bar APIs.
+- `.env.example` for API_BASE_URL and ENV; `.env` in `.gitignore`.
+- Documentation: `docs/ARCHITECTURE.md`, `docs/CUSTOMIZATION.md`, `docs/BEST_PRACTICES.md`.
+
+### Changed
+
+- Dependencies updated to caret (^) versions; React Native ^0.84, React ^19.2; Node >= 20.
+- Store persist simplified: whitelist only `user` (accessToken, user) and `app` (language, isRTL); removed CryptoJS/deviceId encryption.
+- API layer uses `src/core/config` for base URL; request interceptor adds Bearer token and locale; response interceptor handles 401 (logout).
+- Theme: added “Customize for your brand” comments in `colors.ts`, `fonts.ts`, `commonSizes.ts`.
+- Bootstrap order: Provider → PersistGate → SnackbarProvider → ThemeProvider → ThemedApp (RTLInitializer → LocalizationProvider → SafeAreaProvider → AppStatusBar → SheetProvider → AppNavigator).
+- `index.js` imports `./src/sheetManager/sheets` so sheets are registered.
+
+### Template contract
+
+- `template.config.js`: `placeholderName`, `titlePlaceholder`, `templateDir`.
+- Bundle ID set at init via `--package-name`; app name and title replaced by CLI.

package/template/docs/ARCHITECTURE.md

@@ -0,0 +1,27 @@
+# Architecture
+
+## Overview
+
+This app uses a layered structure: **UI** (screens, components) → **navigation** → **core** (store, api, theme, config) and **common** (components, localization, helpers).
+
+## Folder map
+
+| Folder | Purpose |
+|--------|--------|
+| `src/common/` | Shared UI components, localization (i18n), helpers, validations, hooks, urls, utils |
+| `src/core/` | Store (Redux + persist), API client, theme, config, services, hooks |
+| `src/navigation/` | Navigator setup, auth stack, main stack, tab bar, header components |
+| `src/screens/` | Feature screens (Login, Home, Profile, etc.); each may have local `components/` and `hooks/` |
+| `src/sheetManager/` | Action sheet registration |
+
+## Data flow
+
+- **Auth**: Token is stored in Redux (`user.accessToken`). Navigation shows Auth stack when there is no token, Main stack when there is.
+- **API**: Single axios instance in `src/core/api/serverHeaders.ts`. Base URL comes from `src/core/config` (and `.env`). Request interceptor adds `Authorization: Bearer` and `locale`; response interceptor handles 401 (e.g. logout).
+- **Redux**: Slices live under `src/core/store/<domain>/` (e.g. `app`, `user`). Persist whitelist controls what is saved to AsyncStorage.
+
+## SOLID mapping
+
+- **SRP**: One domain per store folder; one primary concern per component file; theme split into colors, fonts, sizes, consts, styles.
+- **OCP**: Extend by adding screens, slices, or routes without changing existing stack logic; extend theme by editing theme files.
+- **DIP**: Core (API, store) does not depend on UI; screens depend on core via hooks/selectors; config abstracts environment.

package/template/docs/BEST_PRACTICES.md

@@ -0,0 +1,33 @@
+# Best practices
+
+## Code style
+
+- Use **TypeScript** strictly; avoid `any` where possible.
+- Use typed Redux: `useAppSelector`, `useAppDispatch`, and `createAppAsyncThunk` with `RootState` / `AppDispatch`.
+- Run `npm run lint` and fix issues.
+
+## Structure
+
+- **Single responsibility**: One concern per module/folder; keep screens thin (logic in hooks or actions).
+- Put shared UI in `src/common/components/`.
+- Use the API helpers from `src/core/api` (get, post, put, deleteApi); do not create extra axios instances.
+
+## Testing
+
+- Use **Jest** and **React Native Testing Library** for unit and component tests.
+- Add tests for store logic and important components; run `npm test`.
+
+## Performance
+
+- Avoid creating new objects/functions in render when they are passed as props to children.
+- Use stable keys for list items.
+
+## Security
+
+- Do not commit secrets; use `.env` for API keys and base URL (and add `.env` to `.gitignore`).
+- Persist only necessary fields (use the persist whitelist in the store).
+
+## LTS / upgrades
+
+- The template targets **Node >= 20** and current stable **React Native** (e.g. 0.84.x).
+- To upgrade React Native, use [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/): select your current version and the target version, then apply the suggested changes to `package.json`, `android/`, `ios/`, and config files.

package/template/docs/CUSTOMIZATION.md

@@ -0,0 +1,53 @@
+# Customization
+
+## App name and bundle ID
+
+Set at project creation:
+
+```bash
+npx @react-native-community/cli init YourAppName --template @fadyshawky/react-native-magic --package-name com.yourcompany.yourapp
+```
+
+- **App name**: Replaces the template placeholder in `app.json` and file names.
+- **Bundle ID** (`--package-name`): Sets Android `applicationId` and iOS `PRODUCT_BUNDLE_IDENTIFIER` and restructures Android package folders.
+
+If you omit `--package-name`, the template will **prompt you** after init to enter a package name (e.g. `com.company.app`). You can enter it then, or press Enter to skip and set `APP_ID` / `ANDROID_APP_ID` in `.env` later and the iOS bundle ID in Xcode or via [react-native-rename](https://www.npmjs.com/package/react-native-rename).
+
+## API base URL and environment
+
+1. Copy `.env.example` to `.env`.
+2. Set `API_BASE_URL` (and any other keys) for your backend.
+3. The app reads these via `react-native-config`; `src/core/config/index.ts` re-exports them for type-safe use.
+
+Optional: use multiple env files (e.g. `.env.development`, `.env.staging`, `.env.production`) and build variants so each build uses the right URL.
+
+## Theme
+
+Edit these files for your brand (no need to touch components):
+
+- **Colors**: `src/core/theme/colors.ts`
+- **Fonts**: `src/core/theme/fonts.ts`
+- **Sizes / spacing**: `src/core/theme/commonSizes.ts`
+
+## Adding a new language
+
+1. Add a new translation file under `src/common/localization/translations/`, e.g. `frLocalization.ts`, following the same shape as `commonLocalization.ts` or `loginLocalization.ts`.
+2. In `src/common/localization/localization.ts`, import the new file and add it to the `localization` object, e.g. `fr: new LocalizedStrings(frLocalization)`.
+3. Add the language to the `Languages` enum in `localization.ts` if you use it for switching (e.g. `fr = 'fr'`).
+4. Use the new keys in your components via the existing `t(key, section)` or the relevant `localization.*` object.
+
+## Adding a screen
+
+1. Create a folder under `src/screens/<Feature>/` with `Feature.tsx` and optional `components/` and `hooks/`.
+2. Register the screen in the right stack in `src/navigation/` (e.g. `AuthStack.tsx` or `MainStack.tsx`).
+3. Add the route and component to the stack’s screen list.
+
+## Adding a Redux slice
+
+1. Create a folder under `src/core/store/<domain>/` with `*State.ts`, `*Slice.ts`, and optionally `*Actions.ts`.
+2. Add the slice to `src/core/store/rootReducer.ts`.
+3. If the slice should persist, add a `createWhitelistFilter('<domain>', ['field1', 'field2'])` entry in `src/core/store/store.tsx` persist config.
+
+## Feature flags / app config
+
+Toggle features or app-level constants in `src/core/config/index.ts` or via env vars read there (e.g. `enableRTL`).

package/template/index.js

@@ -5,5 +5,6 @@ import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import './src/sheetManager/sheets';
 
 AppRegistry.registerComponent(appName, () => App);

package/template/package.json

@@ -1,116 +1,62 @@
 {
-  "name": "@fadyshawky/react-native-magic",
+  "name": "reactnativemagic",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
-    "android:staging": "react-native run-android --variant=stagingDebug",
-    "android:staging-release": "react-native run-android --variant=stagingRelease",
-    "android:dev": "ENVFILE=.env.development react-native run-android --variant=developmentDebug",
-    "android:dev-release": "ENVFILE=.env.development react-native run-android --variant=developmentRelease",
-    "android:prod": "ENVFILE=.env.production react-native run-android --variant=productionDebug",
-    "android:prod-release": "ENVFILE=.env.production react-native run-android --variant=productionRelease",
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
-    "start:development": "ENVFILE=.env.development react-native start --reset-cache",
-    "start:production": "ENVFILE=.env.production react-native start --reset-cache",
-    "start:staging": "ENVFILE=.env.staging react-native start --reset-cache",
     "test": "jest"
   },
   "dependencies": {
-    "@d11/react-native-fast-image": "^8.9.2",
-    "@react-native-async-storage/async-storage": "^2.1.0",
-    "@react-native-camera-roll/camera-roll": "^7.9.0",
-    "@react-native-community/datetimepicker": "^8.2.0",
-    "@react-native-community/image-editor": "^4.2.1",
-    "@react-native-community/netinfo": "^11.4.1",
-    "@react-native-community/slider": "^4.5.5",
-    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/drawer": "^7.1.1",
-    "@react-navigation/elements": "^2.2.5",
-    "@react-navigation/material-top-tabs": "^7.1.0",
-    "@react-navigation/native": "^7.0.14",
-    "@react-navigation/native-stack": "^7.2.0",
-    "@reduxjs/toolkit": "^2.5.0",
-    "@shopify/flash-list": "^1.7.2",
-    "@types/intl": "^1.2.2",
-    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.13",
-    "@types/react-native-vector-icons": "^6.4.18",
-    "@types/react-redux": "^7.1.34",
-    "axios": "^1.7.9",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-navigation/bottom-tabs": "^7.14.0",
+    "@react-navigation/native": "^7.1.28",
+    "@react-navigation/native-stack": "^7.13.0",
+    "@reduxjs/toolkit": "^2.11.0",
+    "axios": "^1.13.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "dayjs": "^1.11.13",
-    "detox": "^20.28.0",
+    "dayjs": "^1.11.19",
     "intl": "^1.2.5",
-    "lodash": "^4.17.21",
-    "mime": "^4.0.6",
-    "patch-package": "^8.0.0",
-    "react": "^18.3.1",
-    "react-native": "^0.76.5",
-    "react-native-actions-sheet": "^0.9.7",
-    "react-native-animated-pagination-dots": "^0.1.73",
-    "react-native-calendars": "^1.1307.0",
-    "react-native-config": "^1.5.3",
-    "react-native-device-info": "^14.0.2",
-    "react-native-dropdown-select-list": "^2.0.5",
-    "react-native-gesture-handler": "^2.21.2",
-    "react-native-image-crop-picker": "^0.41.6",
-    "react-native-image-resource-generator": "^1.0.2",
-    "react-native-in-app-review": "^4.3.3",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "lodash": "^4.17.23",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-native": "^0.84.0",
+    "react-native-actions-sheet": "^10.1.0",
+    "react-native-config": "^1.6.0",
+    "react-native-device-info": "^14.0.0",
+    "react-native-gesture-handler": "^2.30.0",
     "react-native-localization": "^2.3.2",
-    "react-native-mask-input": "^1.2.3",
-    "react-native-orientation-locker": "^1.7.0",
-    "react-native-pager-view": "^6.6.1",
-    "react-native-permissions": "^5.2.1",
-    "react-native-reanimated": "^3.16.6",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "react-native-restart": "^0.0.27",
-    "react-native-safe-area-context": "^5.0.0",
-    "react-native-screens": "^4.4.0",
-    "react-native-sfsymbols": "^1.2.2",
-    "react-native-share": "^12.0.3",
+    "react-native-safe-area-context": "^5.6.0",
+    "react-native-screens": "^4.24.0",
     "react-native-snackbar": "^2.8.0",
-    "react-native-svg": "^15.10.1",
-    "react-native-tab-view": "^4.0.5",
-    "react-native-vector-icons": "^10.2.0",
-    "react-native-vision-camera": "^4.6.3",
-    "react-native-webview": "^13.12.5",
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "redux-persist-transform-filter": "^0.0.22"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.26.0",
-    "@babel/runtime": "^7.26.0",
-    "@jest/globals": "^29.7.0",
-    "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-android": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
-    "@react-native/babel-preset": "^0.76.5",
-    "@react-native/eslint-config": "^0.76.5",
-    "@react-native/metro-config": "^0.76.5",
-    "@react-native/typescript-config": "^0.76.5",
-    "@types/react": "^18.3.18",
-    "@types/react-test-renderer": "^18.3.1",
-    "babel-jest": "^29.7.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.10.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-native": "^4.1.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "jest": "^29.7.0",
-    "prettier": "^2.8.8",
-    "react-test-renderer": "^18.3.1",
-    "typescript": "^5.0.4"
+    "@babel/runtime": "^7.28.0",
+    "@react-native-community/cli": "^20.1.0",
+    "@react-native-community/cli-platform-android": "^20.1.0",
+    "@react-native-community/cli-platform-ios": "^20.1.0",
+    "@react-native/babel-preset": "^0.84.0",
+    "@react-native/eslint-config": "^0.84.0",
+    "@react-native/metro-config": "^0.84.0",
+    "@react-native/typescript-config": "^0.84.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-test-renderer": "^19.1.0",
+    "eslint": "^10.0.0",
+    "jest": "^30.0.0",
+    "prettier": "^3.8.0",
+    "react-test-renderer": "^19.2.0",
+    "typescript": "^5.9.0"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

package/template/src/common/components/AppStatusBar.tsx

@@ -0,0 +1,24 @@
+/**
+ * StatusBar wrapper that avoids deprecated Android APIs when using edge-to-edge.
+ * On Android 15+ with edge-to-edge, Window.setStatusBarColor/setNavigationBarColor
+ * are deprecated. Passing backgroundColor on Android triggers those APIs, so we
+ * only pass it on iOS.
+ */
+import React from 'react';
+import {Platform, StatusBar, StatusBarProps} from 'react-native';
+
+type AppStatusBarProps = Omit<StatusBarProps, 'backgroundColor'> & {
+  backgroundColor?: string;
+};
+
+export function AppStatusBar({
+  backgroundColor,
+  ...rest
+}: AppStatusBarProps): React.JSX.Element {
+  return (
+    <StatusBar
+      {...rest}
+      backgroundColor={Platform.OS === 'ios' ? backgroundColor : undefined}
+    />
+  );
+}

package/template/src/common/components/SnackbarProvider.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+/**
+ * Wrapper for snackbar/toast. The template uses react-native-snackbar directly.
+ * Replace with a custom implementation (e.g. context + showSnackbar) if needed.
+ */
+export const SnackbarProvider = ({
+  children = null,
+}: {
+  children?: React.ReactNode;
+}): React.JSX.Element => <>{children}</>;

package/template/src/core/api/serverHeaders.ts

@@ -1,28 +1,57 @@
-import axios, {AxiosDefaults} from 'axios';
-import DeviceInfo from 'react-native-device-info';
+import axios, {AxiosDefaults, AxiosError, AxiosResponse} from 'axios';
+import {store} from '../store/store';
+import {setLogout} from '../store/user/userSlice';
+import {API_BASE_URL} from '../config';
 
-export const defaultHeaders: HeadersInit_ = {
-  'app-version': DeviceInfo.getVersion(),
-  'serial-number': DeviceInfo.getSerialNumberSync(),
+export const defaultHeaders: HeadersInit = {
   Connection: 'keep-alive',
   'Content-Type': 'application/json',
 };
+
 declare type MethodData = {
   url: AxiosDefaults['httpsAgent'];
   data?: AxiosDefaults['data'];
   config?: any;
 };
 
-const baseURL = '';
-
 const instance = axios.create({
-  baseURL: baseURL,
+  baseURL: API_BASE_URL,
   headers: {
     ...defaultHeaders,
   },
 });
 
-// Export HTTP methods using the configured instance
+instance.interceptors.request.use(
+  config => {
+    const state = store.getState();
+    const accessToken = state.user.accessToken;
+    const locale = state.app?.language ?? 'en';
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    config.headers.locale = locale;
+    return config;
+  },
+  error => Promise.reject(error),
+);
+
+instance.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config;
+    if (
+      originalRequest?.url?.includes('/login') ||
+      originalRequest?.url?.includes('/refresh-token')
+    ) {
+      return Promise.reject(error);
+    }
+    if (error.response?.status === 401 || error.response?.status === 402) {
+      store.dispatch(setLogout());
+    }
+    return Promise.reject(error);
+  },
+);
+
 export const post = ({url, data, config}: MethodData) =>
   instance.post(url, data, config);
 export const get = ({url, config}: MethodData) => instance.get(url, config);

package/template/src/core/config/index.ts

@@ -0,0 +1,13 @@
+/**
+ * App config – single place for API base URL, env, and feature toggles.
+ * Change your app's API and feature toggles here and in .env.
+ */
+import Config from 'react-native-config';
+
+const config = Config as Record<string, string | undefined>;
+export const API_BASE_URL =
+  config.API_BASE_URL || config.API_URL || 'https://api.example.com';
+export const ENV = config.ENV || config.ENVIRONMENT || 'development';
+
+/** Optional: enable RTL layout (e.g. for Arabic). */
+export const enableRTL = true;

package/template/src/core/store/store.tsx

@@ -1,49 +1,11 @@
 import React from 'react';
 import {Action, configureStore, ThunkAction} from '@reduxjs/toolkit';
-import {
-  createTransform,
-  PersistConfig,
-  persistReducer,
-  persistStore,
-} from 'redux-persist';
+import {PersistConfig, persistReducer, persistStore} from 'redux-persist';
 import {rootReducer, RootState} from './rootReducer';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {createWhitelistFilter} from 'redux-persist-transform-filter';
-import {getUniqueId} from 'react-native-device-info';
-import CryptoJS from 'crypto-js';
-
-let deviceId: string;
-getUniqueId()
-  .then(res => {
-    deviceId = res;
-  })
-  .catch(error => {});
-
-const encrypt = createTransform(
-  (inboundState, key) => {
-    if (!inboundState) {
-      return inboundState;
-    }
-
-    const cryptedText = CryptoJS.AES.encrypt(
-      JSON.stringify(inboundState),
-      deviceId,
-    );
-
-    return cryptedText?.toString();
-  },
-  (outboundState, key) => {
-    if (!outboundState) {
-      return outboundState;
-    }
-    const bytes = CryptoJS.AES.decrypt(outboundState, deviceId);
-    const decrypted = bytes.toString(CryptoJS.enc.Utf8);
-
-    return JSON.parse(decrypted);
-  },
-);
 
 const persistConfig: PersistConfig<RootState> = {
   key: 'root',
@@ -51,11 +13,8 @@ const persistConfig: PersistConfig<RootState> = {
   version: 1,
   timeout: 1000,
   transforms: [
-    createWhitelistFilter('app'),
-    createWhitelistFilter('user'),
-    createWhitelistFilter('services'),
-    createWhitelistFilter('providers'),
-    createWhitelistFilter('categories'),
+    createWhitelistFilter('user', ['accessToken', 'user']),
+    createWhitelistFilter('app', ['language', 'isRTL']),
   ],
 };
 
@@ -66,16 +25,7 @@ export const store = configureStore({
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({
       serializableCheck: false,
-      immutableCheck: {
-        warnAfter: 300,
-        ignoredPaths: [
-          'services.inquiredBill',
-          'providers.providers',
-          'categories.categories',
-        ],
-      },
     }),
-  devTools: process.env.NODE_ENV !== 'production',
 });
 
 export const persistor = persistStore(store);

package/template/src/core/theme/colors.ts

@@ -1,3 +1,6 @@
+/**
+ * Customize for your brand – this is the only place to change app colors.
+ */
 export enum PrimaryColors {
   PlatinateBlue_0 = '#E9EDFF',
   PlatinateBlue_25 = '#D3DAFF',

package/template/src/core/theme/commonSizes.ts

@@ -1,5 +1,8 @@
 import {ISize} from './types';
 
+/**
+ * Customize for your brand – this is the only place to change app sizes/spacing.
+ */
 export const CommonSizes = {
   font: {
     // Body Text Sizes

package/template/src/core/theme/fonts.ts

@@ -1,3 +1,6 @@
+/**
+ * Customize for your brand – this is the only place to change app fonts.
+ */
 export const Fonts = {
   // Almarai Font Family
   light: 'Almarai-Light',

package/template/src/core/utils/stringUtils.ts

@@ -1,9 +1,7 @@
 /**
- * Safely converts any value to a string
- * This is especially useful for error messages that might be objects
+ * Safely converts any value to a string.
+ * Useful for error messages that might be objects.
  */
-import CryptoJS from 'crypto-js';
-
 export const ensureString = (value: any): string => {
   if (value === null || value === undefined) {
     return '';
@@ -31,47 +29,6 @@ export const ensureString = (value: any): string => {
   return String(value);
 };
 
-export function decryptTripleDES(
-  encryptedBase64: string,
-  secretKeyBase64: string,
-) {
-  try {
-    // Decode the key from base64
-    const decodedKey = CryptoJS.enc.Base64.parse(secretKeyBase64);
-
-    // Decode the encrypted value from base64
-    const encryptedWordArray = CryptoJS.enc.Base64.parse(encryptedBase64);
-
-    // Decrypt using Triple DES
-    const decrypted = CryptoJS.TripleDES.decrypt(
-      {ciphertext: encryptedWordArray},
-      decodedKey,
-      {
-        mode: CryptoJS.mode.ECB,
-        padding: CryptoJS.pad.Pkcs7,
-      },
-    );
-
-    let decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
-
-    if (!decryptedText) {
-      throw new Error('Decryption resulted in empty string');
-    }
-
-    decryptedText = decryptedText.replace(/(.{4})/g, '$1-');
-    if (decryptedText.endsWith('-')) {
-      decryptedText = decryptedText.slice(0, -1);
-    }
-
-    return decryptedText;
-  } catch (error) {
-    throw new Error(`Decryption failed`);
-  }
-}
-
-// Example usage:
-// const decrypted = decryptBase64('encrypted_base64_string', 'your_secret_key');
-
 /**
  * Converts a camelCase string to PascalCase with specific formatting
  * Example: billerId -> BillerId

package/template/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "@react-native/typescript-config/tsconfig.json"
+  "extends": "@react-native/typescript-config/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "lib": ["ES2015", "ES2017", "ES2020", "ESNext", "DOM"]
+  }
 }

package/template.config.js

@@ -1,4 +1,6 @@
 module.exports = {
-  placeholderName: "reactnativemagic",
-  templateDir: "./template",
+  placeholderName: 'reactnativemagic',
+  titlePlaceholder: 'React Native Magic App',
+  templateDir: './template',
+  postInitScript: 'scripts/askPackageName.js',
 };