@modhamanish/rn-mm-template 1.0.1

package/MMTemplate/src/screens/HomeScreen.tsx

@@ -0,0 +1,296 @@
+import { Image, StyleSheet, Text, View, ScrollView } from 'react-native';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import FullScreenContainer from '../components/FullScreenContainer';
+import InfoCard from '../components/InfoCard';
+import FeatureItem from '../components/FeatureItem';
+import { Images } from '../assets/images';
+import { ThemeType } from '../theme/Colors';
+import { mobileScreenHeight, mobileScreenWidth } from '../utils/utilsHelper';
+import { useTheme } from '../context/ThemeContext';
+import AnimationView from '../components/AnimationView';
+
+const HomeScreen: FC = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <FullScreenContainer style={styles.container} barStyle="light-content">
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {/* Header Section */}
+        <AnimationView animType="FadeIn" duration={800}>
+          <View style={styles.header}>
+            <AnimationView animType="ZoomIn" duration={1000}>
+              <Image
+                source={
+                  theme.currentTheme === 'dark' ? Images.logoDark : Images.logo
+                }
+                style={styles.logo}
+              />
+            </AnimationView>
+            <AnimationView delay={400} animType="SlideInDown" duration={800}>
+              <Text style={styles.welcomeText}>
+                {t('home.welcomeToTemplate')}
+              </Text>
+              <Text style={styles.subtitle}>{t('home.subtitle')}</Text>
+            </AnimationView>
+          </View>
+        </AnimationView>
+
+        {/* Quick Start Section */}
+        <AnimationView delay={600} animType="FadeIn" duration={800}>
+          <InfoCard title={`🚀 ${t('home.quickStart')}`} icon="">
+            <Text style={styles.cardText}>{t('home.quickStartDesc')}</Text>
+            <View style={styles.codeBlock}>
+              <Text style={styles.codeText}>yarn install</Text>
+            </View>
+            <View style={styles.codeBlock}>
+              <Text style={styles.codeText}>cd ios && pod install</Text>
+            </View>
+            <View style={styles.codeBlock}>
+              <Text style={styles.codeText}>yarn ios / yarn android</Text>
+            </View>
+          </InfoCard>
+        </AnimationView>
+
+        {/* Project Structure Section */}
+        <AnimationView delay={800} animType="FadeIn" duration={800}>
+          <InfoCard title={`📁 ${t('home.projectStructure')}`} icon="">
+            <FeatureItem
+              icon="📱"
+              title="screens/"
+              description="All your screen components. Add new screens here."
+            />
+            <FeatureItem
+              icon="🧩"
+              title="components/"
+              description="Reusable UI components used across screens."
+            />
+            <FeatureItem
+              icon="🧭"
+              title="navigation/"
+              description="Navigation setup with AuthStack and AppStack."
+            />
+            <FeatureItem
+              icon="🎨"
+              title="theme/"
+              description="Centralized colors and styling configuration."
+            />
+            <FeatureItem
+              icon="🌍"
+              title="locales/"
+              description={t('home.localesDescription')}
+            />
+            <FeatureItem
+              icon="🧪"
+              title="mock/"
+              description={t('home.mockDescription')}
+            />
+            <FeatureItem
+              icon="🔧"
+              title="utils/"
+              description="Helper functions and utility methods."
+            />
+            <FeatureItem
+              icon="📦"
+              title="context/"
+              description="React Context for global state management."
+            />
+          </InfoCard>
+        </AnimationView>
+
+        {/* Features Section */}
+        <AnimationView delay={1000} animType="FadeIn" duration={800}>
+          <InfoCard title={`✨ ${t('home.includedFeatures')}`} icon="">
+            <FeatureItem
+              icon="⚡"
+              title="React Navigation v7"
+              description="Pre-configured navigation with stack navigators"
+            />
+            <FeatureItem
+              icon="🎬"
+              title="Reanimated v4"
+              description="Smooth animations with worklets support"
+            />
+            <FeatureItem
+              icon="🔷"
+              title="TypeScript"
+              description="Full type safety and better developer experience"
+            />
+            <FeatureItem
+              icon="🌓"
+              title={t('settings.theme')}
+              description={t('home.themeDescription')}
+            />
+            <FeatureItem
+              icon="🌐"
+              title={t('home.i18nSupport')}
+              description={t('home.i18nDescription')}
+            />
+            <FeatureItem
+              icon="🔐"
+              title={t('home.authSupport')}
+              description={t('home.authDescription')}
+            />
+            <FeatureItem
+              icon="💾"
+              title={t('home.storageSupport')}
+              description={t('home.storageDescription')}
+            />
+            <FeatureItem
+              icon="⌨️"
+              title="Keyboard Controller"
+              description="Advanced keyboard handling for better UX"
+            />
+            <FeatureItem
+              icon="🔔"
+              title="Toast Messages"
+              description="Beautiful in-app notifications"
+            />
+          </InfoCard>
+        </AnimationView>
+
+        {/* Best Practices Section */}
+        <AnimationView delay={1200} animType="FadeIn" duration={800}>
+          <InfoCard title={`💡 ${t('home.bestPractices')}`} icon="">
+            <FeatureItem
+              icon="📝"
+              title="Naming Conventions"
+              description="Use PascalCase for components, camelCase for functions"
+            />
+            <FeatureItem
+              icon="🗂️"
+              title="File Organization"
+              description="Keep related files together, one component per file"
+            />
+            <FeatureItem
+              icon="🎯"
+              title="Component Design"
+              description="Create small, reusable components with single responsibility"
+            />
+            <FeatureItem
+              icon="🔐"
+              title="Type Safety"
+              description="Always define TypeScript types for props and state"
+            />
+          </InfoCard>
+        </AnimationView>
+
+        {/* Next Steps Section */}
+        <AnimationView delay={1400} animType="FadeIn" duration={800}>
+          <InfoCard title={`🎯 ${t('home.nextSteps')}`} icon="">
+            <Text style={styles.cardText}>
+              1. Customize the theme in{' '}
+              <Text style={styles.highlight}>theme/Colors.ts</Text>
+            </Text>
+            <Text style={styles.cardText}>
+              2. Add your screens in{' '}
+              <Text style={styles.highlight}>screens/</Text>
+            </Text>
+            <Text style={styles.cardText}>
+              3. Update navigation in{' '}
+              <Text style={styles.highlight}>navigation/</Text>
+            </Text>
+            <Text style={styles.cardText}>
+              4. Create reusable components in{' '}
+              <Text style={styles.highlight}>components/</Text>
+            </Text>
+            <Text style={styles.cardText}>
+              5. Configure your app name and bundle ID
+            </Text>
+          </InfoCard>
+        </AnimationView>
+
+        {/* Footer */}
+        <AnimationView delay={1600} animType="FadeIn" duration={800}>
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>{t('home.happyCoding')}</Text>
+            <Text style={styles.footerSubtext}>{t('home.builtWith')}</Text>
+          </View>
+        </AnimationView>
+      </ScrollView>
+    </FullScreenContainer>
+  );
+};
+
+export default HomeScreen;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    scrollContent: {
+      padding: 20,
+      paddingBottom: 40,
+    },
+    header: {
+      alignItems: 'center',
+      marginBottom: 24,
+      paddingTop: 20,
+    },
+    logo: {
+      height: mobileScreenHeight * 0.15,
+      width: mobileScreenWidth * 0.5,
+      resizeMode: 'contain',
+      marginBottom: 16,
+    },
+    welcomeText: {
+      fontSize: 24,
+      fontWeight: '700',
+      color: colors.textColor,
+      textAlign: 'center',
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 14,
+      color: colors.textColor + 'CC',
+      textAlign: 'center',
+    },
+    cardText: {
+      fontSize: 14,
+      color: colors.textColor,
+      lineHeight: 20,
+      marginBottom: 8,
+    },
+    codeBlock: {
+      backgroundColor: colors.textColor + '10',
+      padding: 12,
+      borderRadius: 8,
+      marginBottom: 8,
+      borderLeftWidth: 3,
+      borderLeftColor: colors.primary,
+    },
+    codeText: {
+      fontFamily: 'monospace',
+      fontSize: 13,
+      color: colors.textColor,
+    },
+    highlight: {
+      color: colors.primary,
+      fontWeight: '600',
+      fontFamily: 'monospace',
+    },
+    footer: {
+      alignItems: 'center',
+      marginTop: 24,
+      paddingTop: 24,
+      borderTopWidth: 1,
+      borderTopColor: colors.textColor + '20',
+    },
+    footerText: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.primary,
+      marginBottom: 4,
+    },
+    footerSubtext: {
+      fontSize: 13,
+      color: colors.textColor + 'CC',
+    },
+  });

package/MMTemplate/src/screens/LoginScreen.tsx

@@ -0,0 +1,199 @@
+import React, { FC } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import { useFormik } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+import FullScreenContainer from '../components/FullScreenContainer';
+import TextInput from '../components/TextInput';
+import AnimationView from '../components/AnimationView';
+import { resetAndNavigate } from '../utils/navigationUtils';
+import Routes from '../navigation/routes';
+import { LoginSchema } from '../utils/validationSchemas';
+import { userMockData } from '../mock';
+import Toast from 'react-native-toast-message';
+import { useAuth } from '../context/AuthContext';
+
+const LoginScreen: FC = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { updateUser } = useAuth();
+  const styles = getStyles(theme);
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: LoginSchema,
+    onSubmit: values => {
+      if (
+        values.email === userMockData.email &&
+        values.password === userMockData.password
+      ) {
+        Toast.show({
+          type: 'success',
+          text1: t('auth.loginSuccessful'),
+        });
+        updateUser(userMockData);
+        resetAndNavigate(Routes.AppStack);
+      } else {
+        Toast.show({
+          type: 'error',
+          text1: t('auth.invalidCredentials'),
+        });
+      }
+    },
+  });
+
+  return (
+    <FullScreenContainer
+      isKeyboardAvoidingView
+      style={styles.container}
+      barStyle="light-content"
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        <AnimationView animType="FadeIn" duration={800}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{t('auth.welcomeBack')}</Text>
+            <Text style={styles.subtitle}>{t('auth.signInToContinue')}</Text>
+          </View>
+        </AnimationView>
+
+        <AnimationView delay={200} animType="FadeIn" duration={800}>
+          <View style={styles.formContainer}>
+            {/* Email Input */}
+            <TextInput
+              label={t('auth.email')}
+              placeholder={t('auth.enterEmail')}
+              value={formik.values.email}
+              onChangeText={formik.handleChange('email')}
+              onBlur={formik.handleBlur('email')}
+              error={formik.errors.email}
+              touched={formik.touched.email}
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+
+            {/* Password Input */}
+            <TextInput
+              label={t('auth.password')}
+              placeholder={t('auth.enterPassword')}
+              value={formik.values.password}
+              onChangeText={formik.handleChange('password')}
+              onBlur={formik.handleBlur('password')}
+              error={formik.errors.password}
+              touched={formik.touched.password}
+              secureTextEntry
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+
+            {/* Forgot Password */}
+            <TouchableOpacity style={styles.forgotPassword}>
+              <Text style={styles.forgotPasswordText}>
+                {t('auth.forgotPassword')}
+              </Text>
+            </TouchableOpacity>
+
+            {/* Login Button */}
+            <TouchableOpacity
+              style={styles.loginButton}
+              onPress={() => formik.handleSubmit()}
+            >
+              <Text style={styles.loginButtonText}>{t('auth.login')}</Text>
+            </TouchableOpacity>
+
+            {/* Sign Up Link */}
+            <View style={styles.signupContainer}>
+              <Text style={styles.signupText}>
+                {t('auth.dontHaveAccount')}{' '}
+              </Text>
+              <TouchableOpacity>
+                <Text style={styles.signupLink}>{t('auth.signUp')}</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </AnimationView>
+      </ScrollView>
+    </FullScreenContainer>
+  );
+};
+
+export default LoginScreen;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 20,
+      justifyContent: 'center',
+    },
+    header: {
+      marginBottom: 40,
+      alignItems: 'center',
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: '700',
+      color: colors.textColor,
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: colors.textColor + 'CC',
+    },
+    formContainer: {
+      width: '100%',
+    },
+    forgotPassword: {
+      alignSelf: 'flex-end',
+      marginBottom: 24,
+    },
+    forgotPasswordText: {
+      color: colors.primary,
+      fontSize: 14,
+      fontWeight: '600',
+    },
+    loginButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      alignItems: 'center',
+      marginBottom: 20,
+    },
+    loginButtonText: {
+      color: colors.white,
+      fontSize: 16,
+      fontWeight: '700',
+    },
+    signupContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    signupText: {
+      color: colors.textColor + 'CC',
+      fontSize: 14,
+    },
+    signupLink: {
+      color: colors.primary,
+      fontSize: 14,
+      fontWeight: '600',
+    },
+  });

package/MMTemplate/src/screens/ProfileScreen.tsx

@@ -0,0 +1,171 @@
+import React, { FC } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../context/ThemeContext';
+import { ThemeType } from '../theme/Colors';
+import FullScreenContainer from '../components/FullScreenContainer';
+import AnimationView from '../components/AnimationView';
+import { useAuth } from '../context/AuthContext';
+import InfoCard from '../components/InfoCard';
+import { navigate } from '../utils/navigationUtils';
+import Routes from '../navigation/routes';
+
+const ProfileScreen: FC = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  const { user, handleLogout } = useAuth();
+
+  const confirmLogout = () => {
+    Alert.alert(
+      t('profile.logoutConfirmTitle'),
+      t('profile.logoutConfirmMessage'),
+      [
+        {
+          text: t('common.cancel'),
+          style: 'cancel',
+        },
+        {
+          text: t('common.logout'),
+          onPress: handleLogout,
+          style: 'destructive',
+        },
+      ],
+      { cancelable: true },
+    );
+  };
+
+  return (
+    <FullScreenContainer style={styles.container} barStyle="light-content">
+      <View style={styles.content}>
+        <AnimationView animType="FadeIn" duration={800}>
+          <View style={styles.header}>
+            <View style={styles.avatarContainer}>
+              <Text style={styles.avatarText}>
+                {user?.name?.charAt(0).toUpperCase() || 'U'}
+              </Text>
+            </View>
+            <Text style={styles.name}>{user?.name || 'User'}</Text>
+            <Text style={styles.email}>
+              {user?.email || 'user@example.com'}
+            </Text>
+          </View>
+        </AnimationView>
+
+        <AnimationView delay={300} animType="FadeIn" duration={800}>
+          <InfoCard title={t('profile.accountInformation')} icon="👤">
+            <View style={styles.infoRow}>
+              <Text style={styles.infoLabel}>{t('profile.name')}:</Text>
+              <Text style={styles.infoValue}>{user?.name || 'N/A'}</Text>
+            </View>
+            <View style={styles.infoRow}>
+              <Text style={styles.infoLabel}>{t('profile.email')}:</Text>
+              <Text style={styles.infoValue}>{user?.email || 'N/A'}</Text>
+            </View>
+          </InfoCard>
+        </AnimationView>
+
+        <AnimationView delay={450} animType="FadeIn" duration={800}>
+          <TouchableOpacity
+            style={styles.settingsButton}
+            onPress={() => navigate(Routes.SettingsScreen)}
+          >
+            <Text style={styles.settingsButtonText}>
+              ⚙️ {t('settings.settings')}
+            </Text>
+          </TouchableOpacity>
+        </AnimationView>
+
+        <AnimationView delay={600} animType="FadeIn" duration={800}>
+          <TouchableOpacity style={styles.logoutButton} onPress={confirmLogout}>
+            <Text style={styles.logoutButtonText}>{t('common.logout')}</Text>
+          </TouchableOpacity>
+        </AnimationView>
+      </View>
+    </FullScreenContainer>
+  );
+};
+
+export default ProfileScreen;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    content: {
+      flex: 1,
+      padding: 20,
+    },
+    header: {
+      alignItems: 'center',
+      marginBottom: 32,
+      marginTop: 40,
+    },
+    avatarContainer: {
+      width: 100,
+      height: 100,
+      borderRadius: 50,
+      backgroundColor: colors.primary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    avatarText: {
+      fontSize: 40,
+      fontWeight: '700',
+      color: colors.white,
+    },
+    name: {
+      fontSize: 24,
+      fontWeight: '700',
+      color: colors.textColor,
+      marginBottom: 4,
+    },
+    email: {
+      fontSize: 14,
+      color: colors.textColor + 'CC',
+    },
+    infoRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: 8,
+    },
+    infoLabel: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.textColor,
+    },
+    infoValue: {
+      fontSize: 14,
+      color: colors.textColor + 'CC',
+    },
+    logoutButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      alignItems: 'center',
+      marginTop: 24,
+    },
+    logoutButtonText: {
+      color: colors.white,
+      fontSize: 16,
+      fontWeight: '700',
+    },
+    settingsButton: {
+      backgroundColor: colors.backgroundColor,
+      borderRadius: 12,
+      padding: 16,
+      alignItems: 'center',
+      marginTop: 32,
+      borderWidth: 1,
+      borderColor: colors.primary,
+    },
+    settingsButtonText: {
+      color: colors.primary,
+      fontSize: 16,
+      fontWeight: '700',
+    },
+  });