@modhamanish/rn-mm-template 1.0.2 → 1.0.3

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/package.json

@@ -14,6 +14,8 @@
     "@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",
@@ -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: {

package/MMTemplate/src/components/TextInput.tsx

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   TextInput as RNTextInput,
   TextInputProps,
   View,
-  Text,
   StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
 } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+  Extrapolate,
+} from 'react-native-reanimated';
+import AppText from './AppText';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
 
@@ -13,6 +23,17 @@ interface CustomTextInputProps extends TextInputProps {
   label?: string;
   error?: string;
   touched?: boolean;
+  renderLeft?: () => React.ReactNode;
+  renderRight?: () => React.ReactNode;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  prefix?: string;
+  suffix?: string;
+  prefixStyle?: StyleProp<TextStyle>;
+  suffixStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  labelBackgroundColor?: string;
 }
 
 const TextInput: React.FC<CustomTextInputProps> = ({
@@ -20,22 +41,161 @@ const TextInput: React.FC<CustomTextInputProps> = ({
   error,
   touched,
   style,
+  renderLeft,
+  renderRight,
+  leftIcon,
+  rightIcon,
+  prefix,
+  suffix,
+  prefixStyle,
+  suffixStyle,
+  containerStyle,
+  inputContainerStyle,
+  labelBackgroundColor,
+  value,
+  placeholder,
+  onFocus,
+  onBlur,
   ...props
 }) => {
   const theme = useTheme();
   const styles = getStyles(theme);
+  const [isFocused, setIsFocused] = useState(false);
+  const [leftWidth, setLeftWidth] = useState(0);
 
+  const hasValue = value !== undefined && value !== '';
   const hasError = touched && error;
+  const labelBg = labelBackgroundColor || theme.colors.backgroundColor;
+
+  const labelAnimation = useSharedValue(hasValue ? 1 : 0);
+
+  useEffect(() => {
+    labelAnimation.value = withTiming(isFocused || hasValue ? 1 : 0, {
+      duration: 200,
+    });
+  }, [isFocused, hasValue, labelAnimation]);
+
+  const animatedLabelStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            labelAnimation.value,
+            [0, 1],
+            [0, -28],
+            Extrapolate.CLAMP,
+          ),
+        },
+        {
+          translateX: interpolate(
+            labelAnimation.value,
+            [0, 1],
+            [leftWidth, -4],
+            Extrapolate.CLAMP,
+          ),
+        },
+        {
+          scale: interpolate(
+            labelAnimation.value,
+            [0, 1],
+            [1, 0.85],
+            Extrapolate.CLAMP,
+          ),
+        },
+      ],
+      backgroundColor: labelAnimation.value === 1 ? labelBg : 'transparent',
+      paddingHorizontal: interpolate(
+        labelAnimation.value,
+        [0, 1],
+        [0, 4],
+        Extrapolate.CLAMP,
+      ),
+      color:
+        isFocused || hasValue
+          ? hasError
+            ? theme.colors.primary
+            : theme.colors.primary
+          : theme.colors.textColor + '80',
+    };
+  });
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const onLeftLayout = (event: any) => {
+    setLeftWidth(event.nativeEvent.layout.width);
+  };
+
+  const showPlaceholder = label ? isFocused : true;
 
   return (
-    <View style={styles.container}>
-      {label && <Text style={styles.label}>{label}</Text>}
-      <RNTextInput
-        style={[styles.input, hasError && styles.inputError, style]}
-        placeholderTextColor={theme.colors.textColor + '60'}
-        {...props}
-      />
-      {hasError && <Text style={styles.errorText}>{error}</Text>}
+    <View style={[styles.container, containerStyle]}>
+      <View
+        style={[
+          styles.inputWrapper,
+          isFocused && styles.inputWrapperFocused,
+          hasError && styles.inputWrapperError,
+          inputContainerStyle,
+        ]}
+      >
+        {label && (
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.labelContainer, animatedLabelStyle]}
+          >
+            <AppText variant="medium">{label}</AppText>
+          </Animated.View>
+        )}
+
+        <View style={styles.leftElements} onLayout={onLeftLayout}>
+          {renderLeft ? (
+            renderLeft()
+          ) : typeof leftIcon === 'string' ? (
+            <AppText style={styles.iconLeft}>{leftIcon}</AppText>
+          ) : (
+            leftIcon
+          )}
+
+          {prefix && (
+            <AppText style={[styles.prefix, prefixStyle]}>{prefix}</AppText>
+          )}
+        </View>
+
+        <RNTextInput
+          style={[styles.input, style]}
+          placeholder={showPlaceholder ? placeholder : ''}
+          placeholderTextColor={theme.colors.textColor + '60'}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          value={value}
+          {...props}
+        />
+
+        {suffix && (
+          <AppText style={[styles.suffix, suffixStyle]}>{suffix}</AppText>
+        )}
+
+        {renderRight ? (
+          renderRight()
+        ) : typeof rightIcon === 'string' ? (
+          <AppText style={styles.iconRight}>{rightIcon}</AppText>
+        ) : (
+          rightIcon
+        )}
+      </View>
+
+      {hasError && (
+        <AppText size="small" style={styles.errorText}>
+          {error}
+        </AppText>
+      )}
     </View>
   );
 };
@@ -45,30 +205,61 @@ export default TextInput;
 const getStyles = ({ colors }: ThemeType) =>
   StyleSheet.create({
     container: {
-      marginBottom: 20,
-    },
-    label: {
-      fontSize: 14,
-      fontWeight: '600',
-      color: colors.textColor,
-      marginBottom: 8,
+      marginBottom: 24,
+      marginTop: 12,
     },
-    input: {
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
       backgroundColor: colors.backgroundColor,
       borderWidth: 1,
       borderColor: colors.textColor + '30',
       borderRadius: 12,
-      padding: 16,
+      paddingHorizontal: 12,
+      minHeight: 56,
+    },
+    inputWrapperFocused: {
+      borderColor: colors.primary,
+    },
+    inputWrapperError: {
+      borderColor: colors.primary,
+    },
+    labelContainer: {
+      position: 'absolute',
+      left: 12,
+      top: 16,
+      zIndex: 1,
+    },
+    input: {
+      flex: 1,
       fontSize: 16,
       color: colors.textColor,
+      paddingVertical: 12,
+      paddingHorizontal: 4,
     },
-    inputError: {
-      borderColor: colors.primary,
+    leftElements: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconLeft: {
+      marginRight: 8,
+      fontSize: 20,
+    },
+    iconRight: {
+      marginLeft: 8,
+      fontSize: 20,
+    },
+    prefix: {
+      marginRight: 4,
+      color: colors.textColor + '80',
+    },
+    suffix: {
+      marginLeft: 4,
+      color: colors.textColor + '80',
     },
     errorText: {
       color: colors.primary,
-      fontSize: 12,
-      marginTop: 4,
+      marginTop: 6,
       marginLeft: 4,
     },
   });

package/MMTemplate/src/components/ThemeSwitcher.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 { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
 
@@ -15,17 +16,23 @@ const ThemeSwitcher = () => {
         style={[styles.button, !isDark && styles.activeButton]}
         onPress={() => !isDark || toggleTheme()}
       >
-        <Text style={[styles.buttonText, !isDark && styles.activeButtonText]}>
+        <AppText
+          variant="semiBold"
+          style={[styles.buttonText, !isDark && styles.activeButtonText]}
+        >
           ☀️ Light
-        </Text>
+        </AppText>
       </TouchableOpacity>
       <TouchableOpacity
         style={[styles.button, isDark && styles.activeButton]}
         onPress={() => isDark || toggleTheme()}
       >
-        <Text style={[styles.buttonText, isDark && styles.activeButtonText]}>
+        <AppText
+          variant="semiBold"
+          style={[styles.buttonText, isDark && styles.activeButtonText]}
+        >
           🌙 Dark
-        </Text>
+        </AppText>
       </TouchableOpacity>
     </View>
   );
@@ -53,8 +60,6 @@ const getStyles = ({ colors }: ThemeType) =>
       backgroundColor: colors.primary,
     },
     buttonText: {
-      fontSize: 14,
-      fontWeight: '600',
       color: colors.primary,
     },
     activeButtonText: {