@fadyshawky/react-native-magic 2.0.9 → 2.1.1

package/.vscode/settings.json

@@ -3,5 +3,6 @@
         "activityBar.background": "#342D0C",
         "titleBar.activeBackground": "#493F10",
         "titleBar.activeForeground": "#FCFAF0"
-    }
+    },
+    "java.configuration.updateBuildConfiguration": "automatic"
 }

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.1",
+  "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",
@@ -19,97 +19,16 @@
   "author": "Fady Shawky",
   "type": "commonjs",
   "main": "index.js",
-  "dependencies": {
-    "@fontsource/poppins": "^5.1.0",
-    "@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/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",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "dayjs": "^1.11.13",
-    "detox": "^20.28.0",
-    "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",
-    "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-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-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/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"
-  },
   "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,12 @@
+# 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
+
+ANDROID_VERSION_CODE=1
+ANDROID_VERSION_NAME=1.0.0