@modhamanish/rn-mm-template 1.0.3 → 1.0.4

package/MMTemplate/README.md

@@ -33,11 +33,64 @@ src/
 ├── mock/         # Mock data for testing and development
 ├── navigation/   # Navigation configuration (Stacks, Stacks, etc.)
 ├── screens/      # Screen components (Views)
+├── services/     # Data fetching and API services (React Query)
 ├── 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. |
+| **`context/`** | `src/context/` | Holds React Context definitions for global state management. |
+| **`locales/`** | `src/locales/` | Contains translation files for internationalization. |
+| **`mock/`** | `src/mock/` | Stores mock data used for development and testing. |
+| **`navigation/`** | `src/navigation/` | Contains all navigation-related configuration. |
+| **`screens/`** | `src/screens/` | Contains all the screen components (pages) of the application. |
+| **`services/`** | `src/services/` | Data fetching layer using **React Query** and **Axios**. |
+| **`theme/`** | `src/theme/` | Centralized theme configuration (e.g., Colors, Typography). |
+| **`types/`** | `src/types/` | Stores TypeScript type definitions and interfaces. |
+| **`utils/`** | `src/utils/` | Contains utility functions and helper classes. |
+
+Navigation automatically switches between these stacks based on the `user` state in `AuthContext`.
+
+---
+
+## 🚀 Data Fetching (React Query)
+
+MMTemplate uses **TanStack Query (React Query) v5** for server state management and **Axios** for API requests.
+
+### 1. Services Structure
+- **`axiosInstance.ts`**: Configured Axios instance with base URL and interceptors.
+- **`queryKeys.ts`**: Centralized keys for consistency and easy invalidation.
+- **`*.query.ts`**: Feature-specific hooks for fetching and mutating data.
+
+### 2. Usage Example
+To fetch data, use a query hook defined in `src/services`:
+
+```tsx
+import { useGetNotesQuery } from '../services/note.query';
+
+const { data, isLoading, error } = useGetNotesQuery();
+```
+
+To update data, use a mutation hook:
+
+```tsx
+import { useAddNoteMutation } from '../services/note.query';
+
+const { mutate, isPending } = useAddNoteMutation();
+const handleSave = () => mutate({ title: 'New Note', content: '...' });
+```
+
+### 3. Global Configuration
+The `QueryClient` is pre-configured in `App.tsx` with optimized defaults (e.g., `refetchOnWindowFocus: false`).
+
+---
+
 ## 🛠 Prerequisites
 
 Before you begin, ensure you have the following installed on your machine:

package/MMTemplate/package.json

@@ -22,8 +22,8 @@
     "react-i18next": "^16.5.1",
     "react-native": "0.83.1",
     "react-native-keyboard-controller": "^1.20.3",
-    "react-native-mmkv": "^4.1.0",
-    "react-native-nitro-modules": "^0.32.0",
+    "react-native-mmkv": "^4.1.2",
+    "react-native-nitro-modules": "^0.33.9",
     "react-native-reanimated": "^4.2.1",
     "react-native-safe-area-context": "^5.6.2",
     "react-native-screens": "^4.19.0",

package/README.md

@@ -43,6 +43,7 @@ src/
 ├── mock/         # Mock data for testing and development
 ├── navigation/   # Navigation configuration (Stacks, Stacks, etc.)
 ├── screens/      # Screen components (Views)
+├── services/     # Data fetching and API services (React Query)
 ├── theme/        # Theme configuration (Colors, Typography, Spacing)
 ├── types/        # Global TypeScript types and interfaces
 └── utils/        # Helper functions and utilities
@@ -63,6 +64,7 @@ src/
 |    └ `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. |
+| **`services/`** | `src/services/` | Data fetching layer using **React Query** and **Axios**. Contains API hooks and instances. |
 | **`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. |
@@ -95,6 +97,38 @@ User sessions are persisted locally using `react-native-mmkv`, ensuring users st
 
 ---
 
+## 🚀 Data Fetching (React Query)
+
+MMTemplate uses **TanStack Query (React Query) v5** for server state management and **Axios** for API requests.
+
+### 1. Services Structure
+- **`axiosInstance.ts`**: Configured Axios instance with base URL and interceptors.
+- **`queryKeys.ts`**: Centralized keys for consistency and easy invalidation.
+- **`*.query.ts`**: Feature-specific hooks for fetching and mutating data.
+
+### 2. Usage Example
+To fetch data, use a query hook defined in `src/services`:
+
+```tsx
+import { useGetNotesQuery } from '../services/note.query';
+
+const { data, isLoading, error } = useGetNotesQuery();
+```
+
+To update data, use a mutation hook:
+
+```tsx
+import { useAddNoteMutation } from '../services/note.query';
+
+const { mutate, isPending } = useAddNoteMutation();
+const handleSave = () => mutate({ title: 'New Note', content: '...' });
+```
+
+### 3. Global Configuration
+The `QueryClient` is pre-configured in `App.tsx` with optimized defaults (e.g., `refetchOnWindowFocus: false`).
+
+---
+
 ## 📝 Scripts
 
 *   `yarn start`: Starts the Metro Bundler.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modhamanish/rn-mm-template",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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",