@modhamanish/rn-mm-template 1.0.1

package/MMTemplate/src/components/AnimationView.tsx

@@ -0,0 +1,113 @@
+import React, { memo, useEffect } from 'react';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AnimationView = ({
+  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 animStyle = useAnimatedStyle(() => {
+    switch (animType) {
+      case 'FadeIn':
+        return {
+          opacity: fadeAnim.value,
+        };
+      case 'FadeOut':
+        return {
+          opacity: fadeAnim.value,
+        };
+      case 'ZoomIn':
+        return {
+          transform: [{ scale: zoomAnim.value }],
+        };
+      case 'ZoomOut':
+        return {
+          transform: [{ scale: zoomAnim.value }],
+        };
+      case 'RotateIn':
+        return {
+          transform: [{ rotate: rotateAnim.value + 'deg' }],
+        };
+      case 'RotateOut':
+        return {
+          transform: [{ rotate: rotateAnim.value + 'deg' }],
+        };
+      case 'SlideInDown':
+        return {
+          transform: [{ translateY: translateAnim.value }],
+        };
+      default:
+        return {};
+    }
+  });
+
+  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) }),
+      );
+    }
+  }, [animType, duration, delay, rotateValue]);
+  return <Animated.View style={[animStyle, style]}>{children}</Animated.View>;
+};
+
+export default memo(AnimationView);

package/MMTemplate/src/components/CustomToast.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+type CustomToastProps = {
+  text1?: string;
+  onPress?: () => void;
+  type: 'success' | 'error';
+};
+
+export const CustomToast = ({ text1, onPress, type }: CustomToastProps) => {
+  const backgroundColor = type === 'success' ? '#4CAF50' : '#ff3f3f';
+
+  return (
+    <View style={[styles.container, { backgroundColor }]}>
+      <Text style={styles.text}>{text1}</Text>
+      {onPress && (
+        <TouchableOpacity onPress={onPress}>
+          <Text style={styles.buttonText}>OK</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 15,
+    width: '90%',
+    marginTop: 20,
+    borderRadius: 5,
+    gap: 12,
+  },
+  text: {
+    flex: 1,
+    color: 'white',
+    fontWeight: '500',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/MMTemplate/src/components/FeatureItem.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+
+interface FeatureItemProps {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+const FeatureItem: React.FC<FeatureItemProps> = ({
+  icon,
+  title,
+  description,
+}) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.icon}>{icon}</Text>
+      <View style={styles.textContainer}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.description}>{description}</Text>
+      </View>
+    </View>
+  );
+};
+
+export default FeatureItem;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      marginBottom: 12,
+    },
+    icon: {
+      fontSize: 20,
+      marginRight: 12,
+      marginTop: 2,
+    },
+    textContainer: {
+      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/FullScreenContainer.tsx

@@ -0,0 +1,60 @@
+import { StatusBar, StyleSheet } from 'react-native';
+import React, { FC, memo } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { FullScreenContainerProps } from '../types/components.types';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+
+export const FullScreenContainer: FC<FullScreenContainerProps> = ({
+  children,
+  style,
+  edges = ['top'],
+  barStyle,
+  statusBarHidden = false,
+  keyboardAvoidingViewStyle,
+  isKeyboardAvoidingView = false,
+}) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const appBarStyle =
+    barStyle ??
+    (theme.currentTheme === 'dark' ? 'light-content' : 'dark-content');
+
+  return (
+    <SafeAreaView edges={edges} style={[styles.container, style]}>
+      <StatusBar
+        animated
+        hidden={statusBarHidden}
+        translucent
+        backgroundColor={'transparent'}
+        barStyle={appBarStyle}
+      />
+      {isKeyboardAvoidingView ? (
+        <KeyboardAvoidingView
+          enabled={isKeyboardAvoidingView}
+          behavior={'padding'}
+          style={[styles.keyboardAvoidingViewStyle, keyboardAvoidingViewStyle]}
+        >
+          {children}
+        </KeyboardAvoidingView>
+      ) : (
+        children
+      )}
+    </SafeAreaView>
+  );
+};
+
+export default memo(FullScreenContainer);
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    keyboardAvoidingViewStyle: {
+      flex: 1,
+    },
+  });

package/MMTemplate/src/components/InfoCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+
+interface InfoCardProps {
+  title: string;
+  children: React.ReactNode;
+  icon?: string;
+}
+
+const InfoCard: React.FC<InfoCardProps> = ({ title, children, icon }) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        {icon && <Text style={styles.icon}>{icon}</Text>}
+        <Text style={styles.title}>{title}</Text>
+      </View>
+      <View style={styles.content}>{children}</View>
+    </View>
+  );
+};
+
+export default InfoCard;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    card: {
+      backgroundColor: colors.backgroundColor,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: colors.primary + '20',
+      shadowColor: colors.textColor,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 3,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+    icon: {
+      fontSize: 24,
+      marginRight: 8,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: '700',
+      color: colors.primary,
+    },
+    content: {
+      gap: 8,
+    },
+  });

package/MMTemplate/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+import StorageHelper from '../utils/storageHelper';
+
+const LanguageSwitcher = () => {
+  const { i18n } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+    StorageHelper.saveItem(StorageHelper.STORAGE_KEYS.LANGUAGE, lng);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={[styles.button, i18n.language === 'en' && styles.activeButton]}
+        onPress={() => changeLanguage('en')}
+      >
+        <Text
+          style={[
+            styles.buttonText,
+            i18n.language === 'en' && styles.activeButtonText,
+          ]}
+        >
+          🇬🇧 English
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.button, i18n.language === 'hi' && styles.activeButton]}
+        onPress={() => changeLanguage('hi')}
+      >
+        <Text
+          style={[
+            styles.buttonText,
+            i18n.language === 'hi' && styles.activeButtonText,
+          ]}
+        >
+          🇮🇳 हिंदी
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default LanguageSwitcher;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      gap: 12,
+      marginBottom: 20,
+    },
+    button: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.primary,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+    },
+    activeButton: {
+      backgroundColor: colors.primary,
+    },
+    buttonText: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.primary,
+    },
+    activeButtonText: {
+      color: colors.white,
+    },
+  });

package/MMTemplate/src/components/TextInput.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  TextInput as RNTextInput,
+  TextInputProps,
+  View,
+  Text,
+  StyleSheet,
+} from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+
+interface CustomTextInputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  touched?: boolean;
+}
+
+const TextInput: React.FC<CustomTextInputProps> = ({
+  label,
+  error,
+  touched,
+  style,
+  ...props
+}) => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const hasError = touched && error;
+
+  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>
+  );
+};
+
+export default TextInput;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      marginBottom: 20,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.textColor,
+      marginBottom: 8,
+    },
+    input: {
+      backgroundColor: colors.backgroundColor,
+      borderWidth: 1,
+      borderColor: colors.textColor + '30',
+      borderRadius: 12,
+      padding: 16,
+      fontSize: 16,
+      color: colors.textColor,
+    },
+    inputError: {
+      borderColor: colors.primary,
+    },
+    errorText: {
+      color: colors.primary,
+      fontSize: 12,
+      marginTop: 4,
+      marginLeft: 4,
+    },
+  });

package/MMTemplate/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+
+const ThemeSwitcher = () => {
+  const { colors, currentTheme, toggleTheme } = useTheme();
+  const styles = getStyles({ colors });
+
+  const isDark = currentTheme === 'dark';
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={[styles.button, !isDark && styles.activeButton]}
+        onPress={() => !isDark || toggleTheme()}
+      >
+        <Text style={[styles.buttonText, !isDark && styles.activeButtonText]}>
+          ☀️ Light
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.button, isDark && styles.activeButton]}
+        onPress={() => isDark || toggleTheme()}
+      >
+        <Text style={[styles.buttonText, isDark && styles.activeButtonText]}>
+          🌙 Dark
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ThemeSwitcher;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    button: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 16,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.primary,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+    },
+    activeButton: {
+      backgroundColor: colors.primary,
+    },
+    buttonText: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.primary,
+    },
+    activeButtonText: {
+      color: colors.white,
+    },
+  });

package/MMTemplate/src/context/AuthContext.tsx

@@ -0,0 +1,76 @@
+import { userMockData } from '../mock';
+import Routes from '../navigation/routes';
+import { resetAndNavigate } from '../utils/navigationUtils';
+import StorageHelper from '../utils/storageHelper';
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+type UserType = typeof userMockData;
+
+type AuthContextType = {
+  user?: UserType;
+  updateUser: (user: UserType) => void;
+  handleLogout: () => void;
+  isUserLoggedIn: () => boolean;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+type AuthProviderProps = {
+  children: ReactNode;
+};
+export const AuthProvider: FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<UserType>();
+
+  useEffect(() => {
+    const userItem = StorageHelper.getItem(StorageHelper.STORAGE_KEYS.USER);
+    if (userItem) {
+      setUser(JSON.parse(userItem));
+    }
+  }, []);
+
+  const isUserLoggedIn = useCallback(() => {
+    const userItem = StorageHelper.getItem(StorageHelper.STORAGE_KEYS.USER);
+    if (userItem) {
+      return true;
+    }
+    return false;
+  }, []);
+
+  const updateUser = useCallback((_user: UserType) => {
+    setUser(_user);
+    StorageHelper.saveItem(
+      StorageHelper.STORAGE_KEYS.USER,
+      JSON.stringify(_user),
+    );
+  }, []);
+
+  const handleLogout = useCallback(() => {
+    StorageHelper.removeItem(StorageHelper.STORAGE_KEYS.USER);
+    setUser(undefined);
+    resetAndNavigate(Routes.AuthStack);
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{ user, updateUser, handleLogout, isUserLoggedIn }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () =>
+  useContext(AuthContext) ?? {
+    user: undefined,
+    updateUser: () => {},
+    handleLogout: () => {},
+    isUserLoggedIn: () => false,
+  };

package/MMTemplate/src/context/ThemeContext.tsx

@@ -0,0 +1,67 @@
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import { darkTheme, lightTheme, ThemeType } from '../theme/Colors';
+import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export type ThemeContextType = {
+  colors: ThemeType['colors'];
+  currentTheme?: 'dark' | 'light';
+  toggleTheme: () => void;
+  safeAreaInsets: EdgeInsets;
+};
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+export const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const [currentTheme, setCurrentTheme] =
+    useState<ThemeContextType['currentTheme']>();
+  const [colors, setColors] = useState<ThemeContextType['colors']>(
+    lightTheme.colors,
+  );
+
+  useEffect(() => {
+    if (currentTheme === 'dark') {
+      setColors(darkTheme.colors);
+    } else {
+      setColors(lightTheme.colors);
+    }
+  }, [currentTheme]);
+
+  const toggleTheme = useCallback(() => {
+    setCurrentTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        currentTheme,
+        colors,
+        toggleTheme,
+        safeAreaInsets,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+const defaultThemeContext: ThemeContextType = {
+  colors: lightTheme.colors,
+  currentTheme: 'light',
+  toggleTheme: () => {},
+  safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
+};
+
+export const useTheme = () => useContext(ThemeContext) ?? defaultThemeContext;