@modhamanish/rn-mm-template 1.0.3 → 1.0.5

package/MMTemplate/.eslintrc.js

@@ -1,4 +1,98 @@
 module.exports = {
   root: true,
-  extends: '@react-native',
+  extends: [
+    '@react-native',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['import', 'prettier'],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
+      },
+    },
+  },
+  rules: {
+    'prettier/prettier': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          ['parent', 'sibling', 'index'],
+          'object',
+          'type',
+        ],
+        pathGroups: [
+          {
+            pattern: 'react+(|-native)',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@src/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@assets/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@components/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@context/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@locales/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@mock/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@navigation/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@screens/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@services/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@theme/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@app-types/**',
+            group: 'internal',
+          },
+          {
+            pattern: '@utils/**',
+            group: 'internal',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['react'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'import/no-unresolved': 'error',
+    'no-console': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
 };

package/MMTemplate/.husky/pre-commit

@@ -0,0 +1,2 @@
+cd "$(dirname "$0")/.."
+npx lint-staged

package/MMTemplate/.prettierrc.js

@@ -2,4 +2,6 @@ module.exports = {
   arrowParens: 'avoid',
   singleQuote: true,
   trailingComma: 'all',
+  bracketSpacing: true,
+  tabWidth: 2,
 };

package/MMTemplate/App.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { KeyboardProvider } from 'react-native-keyboard-controller';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-import { ThemeProvider } from './src/context/ThemeContext';
-import AppNavigator from './src/navigation/AppNavigator';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import ErrorBoundary from 'react-native-error-boundary';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Toast, { ToastConfigParams } from 'react-native-toast-message';
-import { CustomToast } from './src/components/CustomToast';
-import { AuthProvider } from './src/context/AuthContext';
-import './src/utils/i18n';
+
+import { CustomToast } from '@components/CustomToast';
+import ErrorBoundaryFallback from '@components/ErrorBoundaryFallback';
+import { AuthProvider } from '@context/AuthContext';
+import { ThemeProvider } from '@context/ThemeContext';
+import AppNavigator from '@navigation/AppNavigator';
+import CustomAlert from '@src/components/CustomAlert';
+import '@utils/i18n';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,18 +39,21 @@ const toastConfig = {
 
 const App = () => {
   return (
-    <KeyboardProvider>
-      <SafeAreaProvider>
-        <ThemeProvider>
-          <AuthProvider>
-            <QueryClientProvider client={queryClient}>
-              <AppNavigator />
-            </QueryClientProvider>
-          </AuthProvider>
-        </ThemeProvider>
-        <Toast config={toastConfig} />
-      </SafeAreaProvider>
-    </KeyboardProvider>
+    <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+      <KeyboardProvider>
+        <SafeAreaProvider>
+          <ThemeProvider>
+            <AuthProvider>
+              <QueryClientProvider client={queryClient}>
+                <AppNavigator />
+                <CustomAlert />
+                <Toast config={toastConfig} />
+              </QueryClientProvider>
+            </AuthProvider>
+          </ThemeProvider>
+        </SafeAreaProvider>
+      </KeyboardProvider>
+    </ErrorBoundary>
   );
 };
 

package/MMTemplate/README.md

@@ -6,19 +6,21 @@ Welcome to **MMTemplate**! This is a robust and modern React Native template bui
 
 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
+- **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 & Bottom Tabs)
+- **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
+- **Forms**: [Formik](https://formik.org/) & [Yup](https://github.com/jquense/yup) for form state management and validation
+- **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
+- **Error Handling**: [react-native-error-boundary](https://github.com/cawfree/react-native-error-boundary) for robust error catching
+- **Testing**: Jest & React Test Renderer
 
 ## 📂 Project Structure
 
@@ -33,26 +35,112 @@ 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.                   |
+
+## 🔐 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.
+
+---
+
+## 🚀 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:
 
-*   [Node.js](https://nodejs.org/) (>= 20)
-*   [Watchman](https://facebook.github.io/watchman/)
-*   [Ruby](https://www.ruby-lang.org/en/) (for iOS CocoaPods)
-*   **Android Studio** (for Android development)
-*   **Xcode** (for iOS development, macOS only)
+- [Node.js](https://nodejs.org/) (>= 20)
+- [Watchman](https://facebook.github.io/watchman/)
+- [Ruby](https://www.ruby-lang.org/en/) (for iOS CocoaPods)
+- **Android Studio** (for Android development)
+- **Xcode** (for iOS development, macOS only)
 
 > **Note**: For a detailed environment setup guide, refer to the [official React Native documentation](https://reactnative.dev/docs/set-up-your-environment).
 
 ## 📦 Installation
 
 1.  **Install Dependencies**:
+
     ```bash
     yarn install
     # OR
@@ -70,17 +158,21 @@ Before you begin, ensure you have the following installed on your machine:
 ## 🏃‍♂️ Running the App
 
 ### Start Metro Bundler
+
 First, start the Metro bundler in a dedicated terminal:
+
 ```bash
 yarn start
 ```
 
 ### Run on Android
+
 ```bash
 yarn android
 ```
 
 ### Run on iOS
+
 ```bash
 yarn ios
 ```
@@ -88,9 +180,11 @@ yarn ios
 ## 🔧 Customization
 
 ### Renaming the App
+
 To rename the application from "MMTemplate" to your own project name, you can use `react-native-rename` or manually rename the files.
 
 **Using `react-native-rename`:**
+
 1.  `npx react-native-rename "YourAppName" -b com.yourcompany.yourappname`
 2.  Edit `package.json` to update the name.
 3.  Delete `ios/Pods` and `node_modules`.
@@ -98,11 +192,11 @@ To rename the application from "MMTemplate" to your own project name, you can us
 
 ## 📝 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.
+- `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.
 
 ---
 

package/MMTemplate/__tests__/App.test.tsx

@@ -3,11 +3,13 @@
  */
 
 import React from 'react';
-import ReactTestRenderer from 'react-test-renderer';
+
+import { act, create } from 'react-test-renderer';
+
 import App from '../App';
 
 test('renders correctly', async () => {
-  await ReactTestRenderer.act(() => {
-    ReactTestRenderer.create(<App />);
+  await act(() => {
+    create(<App />);
   });
 });

package/MMTemplate/babel.config.js

@@ -4,5 +4,28 @@ const workletsPluginOptions = {
 
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
-  plugins: [['react-native-worklets/plugin', workletsPluginOptions]],
+  plugins: [
+    ['react-native-worklets/plugin', workletsPluginOptions],
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+        alias: {
+          '@src': './src',
+          '@assets': './src/assets',
+          '@components': './src/components',
+          '@context': './src/context',
+          '@locales': './src/locales',
+          '@mock': './src/mock',
+          '@navigation': './src/navigation',
+          '@screens': './src/screens',
+          '@services': './src/services',
+          '@theme': './src/theme',
+          '@app-types': './src/types',
+          '@utils': './src/utils',
+        },
+      },
+    ],
+  ],
 };

package/MMTemplate/index.js

@@ -3,6 +3,7 @@
  */
 
 import { AppRegistry } from 'react-native';
+
 import App from './App';
 import { name as appName } from './app.json';
 

package/MMTemplate/package.json

@@ -6,8 +6,11 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "lint": "eslint .",
-    "start": "react-native start",
-    "test": "jest"
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "start": "react-native start --reset-cache",
+    "test": "jest",
+    "prepare": "husky"
   },
   "dependencies": {
     "@react-native/new-app-screen": "0.83.1",
@@ -21,9 +24,10 @@
     "react": "19.2.0",
     "react-i18next": "^16.5.1",
     "react-native": "0.83.1",
+    "react-native-error-boundary": "^3.1.0",
     "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",
@@ -46,13 +50,29 @@
     "@types/jest": "^29.5.13",
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "eslint": "^8.19.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "husky": "^9.1.7",
     "jest": "^29.6.3",
+    "lint-staged": "^16.2.7",
     "prettier": "2.8.8",
     "react-test-renderer": "19.2.0",
     "typescript": "^5.8.3"
   },
   "engines": {
     "node": ">=20"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx,json,md}": [
+      "prettier --write"
+    ]
   }
 }

package/MMTemplate/src/components/AnimationView.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useEffect } from 'react';
+import React, { FC, memo, useEffect } from 'react';
+
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -7,62 +8,49 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-const AnimationView = ({
+import { AnimationViewProps } from '@src/types/components.types';
+
+const AnimationView: FC<AnimationViewProps> = ({
   children,
   animType,
   duration = 500,
   delay = 0,
   rotateValue = 360,
   style,
-}: {
-  children: React.ReactNode;
-  animType:
-    | 'FadeIn'
-    | 'FadeOut'
-    | 'ZoomIn'
-    | 'ZoomOut'
-    | 'RotateIn'
-    | 'RotateOut'
-    | 'SlideInDown';
-  duration?: number;
-  delay?: number;
-  rotateValue?: number;
-  style?: any;
 }) => {
-  const fadeAnim = useSharedValue(0);
-  const zoomAnim = useSharedValue(0);
-  const rotateAnim = useSharedValue(0);
-  const translateAnim = useSharedValue(-100);
+  const getInitialValue = () => {
+    switch (animType) {
+      case 'SlideInDown':
+        return -100;
+      case 'FadeOut':
+      case 'ZoomOut':
+        return 1;
+      default:
+        return 0;
+    }
+  };
+  const animValue = useSharedValue(getInitialValue());
 
   const animStyle = useAnimatedStyle(() => {
     switch (animType) {
       case 'FadeIn':
-        return {
-          opacity: fadeAnim.value,
-        };
       case 'FadeOut':
         return {
-          opacity: fadeAnim.value,
+          opacity: animValue.value,
         };
       case 'ZoomIn':
-        return {
-          transform: [{ scale: zoomAnim.value }],
-        };
       case 'ZoomOut':
         return {
-          transform: [{ scale: zoomAnim.value }],
+          transform: [{ scale: animValue.value }],
         };
       case 'RotateIn':
-        return {
-          transform: [{ rotate: rotateAnim.value + 'deg' }],
-        };
       case 'RotateOut':
         return {
-          transform: [{ rotate: rotateAnim.value + 'deg' }],
+          transform: [{ rotate: animValue.value + 'deg' }],
         };
       case 'SlideInDown':
         return {
-          transform: [{ translateY: translateAnim.value }],
+          transform: [{ translateY: animValue.value }],
         };
       default:
         return {};
@@ -70,43 +58,40 @@ const AnimationView = ({
   });
 
   useEffect(() => {
-    if (animType === 'FadeIn') {
-      fadeAnim.value = withDelay(delay, withTiming(1, { duration: duration }));
-    } else if (animType === 'FadeOut') {
-      fadeAnim.value = withDelay(delay, withTiming(0, { duration: duration }));
-    } else if (animType === 'ZoomIn') {
-      zoomAnim.value = withDelay(
-        delay,
-        withTiming(1, { duration: duration, easing: Easing.elastic(1) }),
-      );
-    } else if (animType === 'ZoomOut') {
-      zoomAnim.value = withDelay(
-        delay,
-        withTiming(0, { duration: duration, easing: Easing.elastic(1) }),
-      );
-    } else if (animType === 'RotateIn') {
-      rotateAnim.value = withDelay(
-        delay,
-        withTiming(rotateValue, {
-          duration: duration,
-          easing: Easing.elastic(1),
-        }),
-      );
-    } else if (animType === 'RotateOut') {
-      rotateAnim.value = withDelay(
-        delay,
-        withTiming(rotateValue, {
-          duration: duration,
-          easing: Easing.elastic(1),
-        }),
-      );
-    } else if (animType === 'SlideInDown') {
-      translateAnim.value = withDelay(
-        delay,
-        withTiming(0, { duration: duration, easing: Easing.elastic(1) }),
-      );
+    let targetValue = 0;
+    let easing = Easing.inOut(Easing.ease);
+
+    switch (animType) {
+      case 'FadeIn':
+        targetValue = 1;
+        break;
+      case 'FadeOut':
+        targetValue = 0;
+        break;
+      case 'ZoomIn':
+        targetValue = 1;
+        easing = Easing.elastic(1);
+        break;
+      case 'ZoomOut':
+        targetValue = 0;
+        easing = Easing.elastic(1);
+        break;
+      case 'RotateIn':
+      case 'RotateOut':
+        targetValue = rotateValue;
+        easing = Easing.elastic(1);
+        break;
+      case 'SlideInDown':
+        targetValue = 0;
+        easing = Easing.elastic(1);
+        break;
     }
-  }, [animType, duration, delay, rotateValue]);
+
+    animValue.value = withDelay(
+      delay,
+      withTiming(targetValue, { duration, easing }),
+    );
+  }, [animType, duration, delay, rotateValue, animValue]);
   return <Animated.View style={[animStyle, style]}>{children}</Animated.View>;
 };