@modhamanish/rn-mm-template 1.0.2 → 1.0.4

package/MMTemplate/App.tsx

@@ -1,14 +1,24 @@
 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 { KeyboardProvider } from 'react-native-keyboard-controller';
 
 import Toast, { ToastConfigParams } from 'react-native-toast-message';
 import { CustomToast } from './src/components/CustomToast';
 import { AuthProvider } from './src/context/AuthContext';
 import './src/utils/i18n';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 const toastConfig = {
   error: ({
     text1,
@@ -23,13 +33,16 @@ const toastConfig = {
     onPress?: () => void;
   }>) => <CustomToast text1={text1} onPress={props?.onPress} type="success" />,
 };
+
 const App = () => {
   return (
     <KeyboardProvider>
       <SafeAreaProvider>
         <ThemeProvider>
           <AuthProvider>
-            <AppNavigator />
+            <QueryClientProvider client={queryClient}>
+              <AppNavigator />
+            </QueryClientProvider>
           </AuthProvider>
         </ThemeProvider>
         <Toast config={toastConfig} />

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

@@ -14,14 +14,16 @@
     "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
     "@react-navigation/native-stack": "^7.9.0",
+    "@tanstack/react-query": "^5.90.20",
+    "axios": "^1.13.4",
     "formik": "^2.4.9",
     "i18next": "^25.7.3",
     "react": "19.2.0",
     "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",
@@ -40,6 +42,7 @@
     "@react-native/eslint-config": "0.83.1",
     "@react-native/metro-config": "0.83.1",
     "@react-native/typescript-config": "0.83.1",
+    "@tanstack/eslint-plugin-query": "^5.91.4",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",

package/MMTemplate/src/components/AppText.tsx

@@ -0,0 +1,125 @@
+import React, { FC, memo } from 'react';
+import { Text, TextStyle } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { AppTextProps, AppTextSize } from '../types/components.types';
+
+const FONTS: Record<string, string> | undefined = {
+  // Define custom font families here. If empty or undefined, the component will use default system fonts with font weights.
+  // extraBold: 'Poppins-ExtraBold',
+  // bold: 'Poppins-Bold',
+  // semiBold: 'Poppins-SemiBold',
+  // medium: 'Poppins-Medium',
+  // light: 'Poppins-Light',
+  // regular: 'Poppins-Regular',
+};
+
+const SIZES: Record<string, number> = {
+  xxsmall: 8,
+  xsmall: 10,
+  small: 12,
+  normal: 14,
+  body: 16,
+  large: 20,
+  xlarge: 24,
+  xxlarge: 32,
+};
+
+const AppText: FC<AppTextProps> = ({
+  children,
+  size = 'normal',
+  variant = 'regular',
+  color,
+  fontFamily,
+  transform,
+  style,
+  ...props
+}) => {
+  const { colors } = useTheme();
+
+  const getFontSize = (s: AppTextSize): number => {
+    if (typeof s === 'number') return s;
+    return SIZES[s as string] || SIZES.normal;
+  };
+
+  const getTransform = (t?: string): any => {
+    if (!t) return undefined;
+    switch (t) {
+      case 'capital':
+      case 'uppercase':
+        return 'uppercase';
+      case 'small':
+      case 'lowercase':
+        return 'lowercase';
+      case 'first char capital':
+      case 'capitalize':
+        return 'capitalize';
+      default:
+        return t;
+    }
+  };
+
+  const getVariantStyle = (v: string): TextStyle => {
+    const hasFonts = !!FONTS && Object.keys(FONTS).length > 0;
+    switch (v) {
+      case 'h1':
+        return hasFonts
+          ? { fontSize: 32, fontFamily: FONTS.extraBold }
+          : { fontSize: 32, fontWeight: '800' };
+      case 'h2':
+        return hasFonts
+          ? { fontSize: 24, fontFamily: FONTS.bold }
+          : { fontSize: 24, fontWeight: '700' };
+      case 'h3':
+        return hasFonts
+          ? { fontSize: 20, fontFamily: FONTS.bold }
+          : { fontSize: 20, fontWeight: '700' };
+      case 'body1':
+        return hasFonts
+          ? { fontSize: 16, fontFamily: FONTS.regular }
+          : { fontSize: 16, fontWeight: '400' };
+      case 'body2':
+        return hasFonts
+          ? { fontSize: 14, fontFamily: FONTS.regular }
+          : { fontSize: 14, fontWeight: '400' };
+      case 'bold':
+        return hasFonts ? { fontFamily: FONTS.bold } : { fontWeight: '700' };
+      case 'semiBold':
+        return hasFonts
+          ? { fontFamily: FONTS.semiBold }
+          : { fontWeight: '600' };
+      case 'medium':
+        return hasFonts ? { fontFamily: FONTS.medium } : { fontWeight: '500' };
+      case 'light':
+        return hasFonts ? { fontFamily: FONTS.light } : { fontWeight: '300' };
+      case 'regular':
+        return hasFonts ? { fontFamily: FONTS.regular } : { fontWeight: '400' };
+      default:
+        return {};
+    }
+  };
+
+  const variantStyle = getVariantStyle(variant);
+
+  // If prop fontFamily is provided, it should override variant's fontFamily
+  // And we should still prevent variant's fontWeight (if any) from conflicting with it.
+  if (fontFamily && variantStyle.fontWeight) {
+    delete variantStyle.fontWeight;
+  }
+
+  const combinedStyles: TextStyle = {
+    fontSize: getFontSize(size),
+    color: color || colors.textColor,
+    textTransform: getTransform(transform),
+    ...variantStyle,
+    ...(fontFamily ? { fontFamily } : {}),
+    ...(style as object),
+  };
+
+  return (
+    <Text style={combinedStyles} allowFontScaling={false} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+export default memo(AppText);

package/MMTemplate/src/components/CustomToast.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import AppText from './AppText';
 
 type CustomToastProps = {
   text1?: string;
@@ -12,10 +13,14 @@ export const CustomToast = ({ text1, onPress, type }: CustomToastProps) => {
 
   return (
     <View style={[styles.container, { backgroundColor }]}>
-      <Text style={styles.text}>{text1}</Text>
+      <AppText variant="medium" style={styles.text}>
+        {text1}
+      </AppText>
       {onPress && (
         <TouchableOpacity onPress={onPress}>
-          <Text style={styles.buttonText}>OK</Text>
+          <AppText variant="semiBold" size="body" style={styles.buttonText}>
+            OK
+          </AppText>
         </TouchableOpacity>
       )}
     </View>
@@ -36,11 +41,8 @@ const styles = StyleSheet.create({
   text: {
     flex: 1,
     color: 'white',
-    fontWeight: '500',
   },
   buttonText: {
     color: 'white',
-    fontSize: 16,
-    fontWeight: '600',
   },
 });

package/MMTemplate/src/components/FeatureItem.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import AppText from './AppText';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
 
@@ -19,10 +20,16 @@ const FeatureItem: React.FC<FeatureItemProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={styles.icon}>{icon}</Text>
+      <AppText size="large" style={styles.icon}>
+        {icon}
+      </AppText>
       <View style={styles.textContainer}>
-        <Text style={styles.title}>{title}</Text>
-        <Text style={styles.description}>{description}</Text>
+        <AppText variant="semiBold" size={15} style={styles.title}>
+          {title}
+        </AppText>
+        <AppText size={13} style={styles.description}>
+          {description}
+        </AppText>
       </View>
     </View>
   );
@@ -38,7 +45,6 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 12,
     },
     icon: {
-      fontSize: 20,
       marginRight: 12,
       marginTop: 2,
     },
@@ -46,13 +52,10 @@ const getStyles = ({ colors }: ThemeType) =>
       flex: 1,
     },
     title: {
-      fontSize: 15,
-      fontWeight: '600',
       color: colors.textColor,
       marginBottom: 2,
     },
     description: {
-      fontSize: 13,
       color: colors.textColor + 'CC',
       lineHeight: 18,
     },

package/MMTemplate/src/components/InfoCard.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import AppText from './AppText';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
 
@@ -16,8 +17,14 @@ const InfoCard: React.FC<InfoCardProps> = ({ title, children, icon }) => {
   return (
     <View style={styles.card}>
       <View style={styles.header}>
-        {icon && <Text style={styles.icon}>{icon}</Text>}
-        <Text style={styles.title}>{title}</Text>
+        {icon && (
+          <AppText size="xlarge" style={styles.icon}>
+            {icon}
+          </AppText>
+        )}
+        <AppText variant="bold" size={18} style={styles.title}>
+          {title}
+        </AppText>
       </View>
       <View style={styles.content}>{children}</View>
     </View>
@@ -47,12 +54,9 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 12,
     },
     icon: {
-      fontSize: 24,
       marginRight: 8,
     },
     title: {
-      fontSize: 18,
-      fontWeight: '700',
       color: colors.primary,
     },
     content: {

package/MMTemplate/src/components/LanguageSwitcher.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import AppText from './AppText';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
@@ -21,27 +22,29 @@ const LanguageSwitcher = () => {
         style={[styles.button, i18n.language === 'en' && styles.activeButton]}
         onPress={() => changeLanguage('en')}
       >
-        <Text
+        <AppText
+          variant="semiBold"
           style={[
             styles.buttonText,
             i18n.language === 'en' && styles.activeButtonText,
           ]}
         >
           🇬🇧 English
-        </Text>
+        </AppText>
       </TouchableOpacity>
       <TouchableOpacity
         style={[styles.button, i18n.language === 'hi' && styles.activeButton]}
         onPress={() => changeLanguage('hi')}
       >
-        <Text
+        <AppText
+          variant="semiBold"
           style={[
             styles.buttonText,
             i18n.language === 'hi' && styles.activeButtonText,
           ]}
         >
           🇮🇳 हिंदी
-        </Text>
+        </AppText>
       </TouchableOpacity>
     </View>
   );
@@ -70,8 +73,6 @@ const getStyles = ({ colors }: ThemeType) =>
       backgroundColor: colors.primary,
     },
     buttonText: {
-      fontSize: 14,
-      fontWeight: '600',
       color: colors.primary,
     },
     activeButtonText: {