@modhamanish/rn-mm-template 1.0.1

package/README.md

@@ -0,0 +1,108 @@
+# MMTemplate - React Native TypeScript Boilerplate
+
+Welcome to **MMTemplate**! This is a robust and modern React Native template built with TypeScript, designed to jumpstart your mobile application development.
+
+## 🚀 Usage
+
+To initialize a new project using this template, run the following command:
+
+```bash
+npx @react-native-community/cli@latest init AwesomeProject --template https://github.com/modhamanish/mm-template
+```
+
+Replace `AwesomeProject` with your desired project name.
+
+## 🚀 Features
+
+This template includes the following key libraries and configurations:
+
+*   **Core**: React Native (0.83.1), React (19.2.0)
+*   **Language**: TypeScript (v5) for static type checking
+*   **Navigation**: [React Navigation v7](https://reactnavigation.org/) (Native Stack)
+*   **Internationalization**: [react-i18next](https://react.i18next.com/) with multi-language support (English/Hindi)
+*   **Storage**: [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) for high-performance persistence
+*   **Animations**: [React Native Reanimated v4](https://docs.swmansion.com/react-native-reanimated/) & Worklets
+*   **UI/UX**:
+    *   **Theme Support**: Light/Dark mode with persistence
+    *   **Authentication**: Pre-configured login and profile flow
+    *   [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe areas
+    *   [React Native Keyboard Controller](https://github.com/kirillzyusko/react-native-keyboard-controller) for advanced keyboard handling
+    *   [React Native Toast Message](https://github.com/calintamas/react-native-toast-message) for in-app notifications
+*   **Testing**: Jest & React Test Renderer
+
+## 📂 Project Structure
+
+The project is organized in the `src` directory to keep clean separation of concerns:
+
+```
+src/
+├── assets/       # Images, fonts, and other static assets
+├── components/   # Reusable UI components
+├── context/      # React Context definitions (Global State)
+├── locales/      # Translation files (i18n)
+├── mock/         # Mock data for testing and development
+├── navigation/   # Navigation configuration (Stacks, Stacks, etc.)
+├── screens/      # Screen components (Views)
+├── theme/        # Theme configuration (Colors, Typography, Spacing)
+├── types/        # Global TypeScript types and interfaces
+└── utils/        # Helper functions and utilities
+```
+
+### Key Files & Directories
+
+| Directory / File | Path | Description |
+| :--- | :--- | :--- |
+| **`assets/`** | `src/assets/` | Stores static assets such as images, fonts, and icons. |
+| **`components/`** | `src/components/` | Contains reusable UI components used throughout the application (e.g., buttons, input fields). |
+| **`context/`** | `src/context/` | Holds React Context definitions for global state management (e.g., ThemeContext, AuthContext). |
+| **`locales/`** | `src/locales/` | Contains translation files for internationalization (e.g., `en.json`, `hi.json`). |
+| **`mock/`** | `src/mock/` | Stores mock data used for development and testing. |
+| **`navigation/`** | `src/navigation/` | Contains all navigation-related configuration. |
+|    └ `AppNavigator.tsx` | `src/navigation/AppNavigator.tsx` | The root navigation container. Handles switching between `AuthCheck`, `AuthStack`, and `AppStack`. |
+|    └ `AppStack.tsx` | `src/navigation/AppStack.tsx` | Main application stack (post-login). Defines screens accessible to authenticated users. |
+|    └ `AuthCheck.tsx` | `src/navigation/AuthCheck.tsx` | Entry splash screen logic. Determines authentication state and routes accordingly. |
+|    └ `AuthStack.tsx` | `src/navigation/AuthStack.tsx` | Authentication flow stack. Defines screens like Login and Registration. |
+| **`screens/`** | `src/screens/` | Contains all the screen components (pages) of the application. |
+| **`theme/`** | `src/theme/` | Centralized theme configuration (e.g., Colors, Typography). |
+| **`types/`** | `src/types/` |  Stores TypeScript type definitions and interfaces for the application. |
+| **`utils/`** | `src/utils/` | Contains utility functions and helper classes. |
+
+## 🔐 Authentication Flow
+
+MMTemplate comes with a pre-configured authentication flow managed via React Context.
+
+### 1. State Management
+Authentication state is managed globally using `AuthContext` (`src/context/AuthContext.tsx`). You can access user data and authentication methods anywhere in the app:
+
+```tsx
+const { user, updateUser, handleLogout, isUserLoggedIn } = useAuth();
+```
+
+### 2. Navigation Logic
+- **`AuthCheck`**: The entry point component that checks if a user is already logged in (via `react-native-mmkv` persistence).
+- **`AuthStack`**: contains screens for non-authenticated users (Welcome, Login).
+- **`AppStack`**: contains the main application screens (Home, Profile, Settings).
+
+Navigation automatically switches between these stacks based on the `user` state in `AuthContext`.
+
+### 3. Mock Credentials
+For testing purposes, you can use the following credentials (defined in `src/mock/index.ts`):
+- **Email**: `user@gmail.com`
+- **Password**: `123456`
+
+### 4. Storage Persistence
+User sessions are persisted locally using `react-native-mmkv`, ensuring users stay logged in even after closing the app.
+
+---
+
+## 📝 Scripts
+
+*   `yarn start`: Starts the Metro Bundler.
+*   `yarn android`: Builds and runs the Android app.
+*   `yarn ios`: Builds and runs the iOS app.
+*   `yarn lint`: Lints the project files.
+*   `yarn test`: Runs Jest tests.
+
+---
+
+Made with ❤️ using **MMTemplate**.

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@modhamanish/rn-mm-template",
+  "version": "1.0.1",
+  "description": "A robust and modern React Native template built with TypeScript, designed to jumpstart your mobile application development.",
+  "repository": "https://github.com/modhamanish/mm-template.git",
+  "author": "Manish Modha",
+  "license": "ISC",
+  "keywords": [
+    "react-native",
+    "typescript",
+    "template",
+    "boilerplate",
+    "starter-kit",
+    "react-navigation-v7",
+    "reanimated-v4",
+    "i18n",
+    "mobile-development",
+    "ios",
+    "android",
+    "mmkv"
+  ]
+}

package/script.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+const colors = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  white: "\x1b[37m",
+};
+
+const logo = `
+${colors.red}${colors.bold}
+  ███╗   ███╗███╗   ███╗  ████████╗███████╗███╗   ███╗██████╗ ██╗      █████╗ ████████╗███████╗
+  ████╗ ████║████╗ ████║  ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║     ██╔══██╗╚══██╔══╝██╔════╝
+  ██╔████╔██║██╔████╔██║     ██║   █████╗  ██╔████╔██║██████╔╝██║     ███████║   ██║   █████╗  
+  ██║╚██╔╝██║██║╚██╔╝██║     ██║   ██╔══╝  ██║╚██╔╝██║██╔═══╝ ██║     ██╔══██║   ██║   ██╔══╝  
+  ██║ ╚═╝ ██║██║ ╚═╝ ██║     ██║   ███████╗██║ ╚═╝ ██║██║     ███████╗██║  ██║   ██║   ███████╗
+  ╚═╝     ╚═╝╚═╝     ╚═╝     ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
+${colors.reset}`;
+
+console.log(logo);
+console.log(
+  `${colors.cyan}${colors.bold}🚀 Thank you for choosing MM Template!${colors.reset}`
+);
+console.log(
+  `${colors.white}A production-ready React Native boilerplate designed for speed and productivity.${colors.reset}\n`
+);
+
+console.log(`${colors.yellow}${colors.bold}📦 Loaded Features:${colors.reset}`);
+console.log(`${colors.green}  ✓${colors.reset} React Native + TypeScript`);
+console.log(
+  `${colors.green}  ✓${colors.reset} Internationalization (react-i18next)`
+);
+console.log(
+  `${colors.green}  ✓${colors.reset} High Performance Storage (MMKV)`
+);
+console.log(
+  `${colors.green}  ✓${colors.reset} Pre-configured Auth Flow & Routing`
+);
+console.log(
+  `${colors.green}  ✓${colors.reset} Modern UI with Animations (Reanimated)\n`
+);
+
+console.log(`${colors.magenta}${colors.bold}👉 Next Steps:${colors.reset}`);
+console.log(`${colors.white}  1. cd <project-name>`);
+console.log(`  2. yarn install`);
+console.log(`  3. cd ios && pod install (for iOS developers)`);
+console.log(
+  `  4. yarn ios ${colors.reset}or${colors.white} yarn android${colors.reset}\n`
+);
+
+console.log(`${colors.blue}${colors.bold}🔗 Useful Links:${colors.reset}`);
+console.log(
+  `${colors.cyan}  GitHub: https://github.com/modhamanish/mm-template${colors.reset}`
+);
+console.log(`${colors.cyan}  Author: Manish Modha${colors.reset}\n`);
+
+console.log(`${colors.red}${colors.bold}Happy Coding! 🚀✨${colors.reset}\n`);

package/template.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  // Placeholder used to rename and replace in files
+  // package.json, index.json, android/, ios/
+  placeholderName: "MMTemplate",
+
+  // Directory with template
+  templateDir: "./MMTemplate",
+
+  // Path to script, which will be executed after init
+  postInitScript: "./script.js"
+};