@modhamanish/rn-mm-template 1.0.1

package/MMTemplate/src/screens/SettingsScreen.tsx

@@ -0,0 +1,96 @@
+import React, { FC } from 'react';
+import { View, Text, StyleSheet, ScrollView } 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 LanguageSwitcher from '../components/LanguageSwitcher';
+import ThemeSwitcher from '../components/ThemeSwitcher';
+
+const SettingsScreen: FC = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <FullScreenContainer style={styles.container} barStyle="light-content">
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <AnimationView animType="FadeIn" duration={800}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{t('settings.settings')}</Text>
+            <Text style={styles.subtitle}>
+              {t('settings.customizeYourExperience')}
+            </Text>
+          </View>
+        </AnimationView>
+
+        {/* Language Section */}
+        <AnimationView delay={200} animType="FadeIn" duration={800}>
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>{t('settings.language')}</Text>
+            <Text style={styles.sectionDescription}>
+              {t('settings.chooseYourPreferredLanguage')}
+            </Text>
+            <LanguageSwitcher />
+          </View>
+        </AnimationView>
+
+        {/* Theme Section */}
+        <AnimationView delay={400} animType="FadeIn" duration={800}>
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>{t('settings.theme')}</Text>
+            <Text style={styles.sectionDescription}>
+              {t('settings.switchBetweenLightAndDark')}
+            </Text>
+            <ThemeSwitcher />
+          </View>
+        </AnimationView>
+      </ScrollView>
+    </FullScreenContainer>
+  );
+};
+
+export default SettingsScreen;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    scrollContent: {
+      padding: 20,
+      paddingTop: 60,
+    },
+    header: {
+      marginBottom: 32,
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: '700',
+      color: colors.textColor,
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: colors.textColor + 'CC',
+    },
+    section: {
+      marginBottom: 32,
+    },
+    sectionTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.textColor,
+      marginBottom: 8,
+    },
+    sectionDescription: {
+      fontSize: 14,
+      color: colors.textColor + 'CC',
+      marginBottom: 16,
+    },
+  });

package/MMTemplate/src/screens/WelcomeScreen.tsx

@@ -0,0 +1,215 @@
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Linking,
+} from 'react-native';
+import React, { FC, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ThemeContextType, useTheme } from '../context/ThemeContext';
+import { Images } from '../assets/images';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withDelay,
+  Easing,
+  ReduceMotion,
+} from 'react-native-reanimated';
+import { mobileScreenHeight, mobileScreenWidth } from '../utils/utilsHelper';
+import FullScreenContainer from '../components/FullScreenContainer';
+import { navigate } from '../utils/navigationUtils';
+import Routes from '../navigation/routes';
+
+const WelcomeScreen: FC = () => {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  const { t } = useTranslation();
+
+  const height = useSharedValue(mobileScreenHeight);
+  const width = useSharedValue(mobileScreenWidth * 0.6);
+  const opacity = useSharedValue(0);
+  const contentOpacity = useSharedValue(0);
+
+  useEffect(() => {
+    height.value = withDelay(
+      500,
+      withTiming(mobileScreenHeight * 0.25, { duration: 1000 }),
+    );
+    width.value = withDelay(
+      500,
+      withTiming(mobileScreenWidth * 0.45, {
+        duration: 1000,
+        easing: Easing.quad,
+        reduceMotion: ReduceMotion.System,
+      }),
+    );
+    opacity.value = withDelay(1000, withTiming(1, { duration: 1000 }));
+    contentOpacity.value = withDelay(1200, withTiming(1, { duration: 800 }));
+  }, []);
+
+  const animatedLogoStyle = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+      width: width.value,
+    };
+  });
+
+  const animatedContentStyle = useAnimatedStyle(() => {
+    return {
+      opacity: contentOpacity.value,
+      transform: [
+        {
+          translateY: withTiming(contentOpacity.value === 1 ? 0 : 20, {
+            duration: 800,
+          }),
+        },
+      ],
+    };
+  });
+
+  const openGitHub = () => {
+    Linking.openURL('https://github.com/modhamanish/mm-template');
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <Animated.Image
+          source={Images.logo}
+          style={[animatedLogoStyle, styles.logo]}
+        />
+      </View>
+
+      <Animated.View style={[styles.contentContainer, { opacity }]}>
+        <Text style={styles.titleText}>
+          <Text style={styles.titleBoldText}>{t('welcome.titleBold')}</Text>
+          {t('welcome.titleText')}
+        </Text>
+        <Text style={styles.matchBoldText}>{t('welcome.appName')}</Text>
+
+        <Animated.View style={[styles.infoContainer, animatedContentStyle]}>
+          <Text style={styles.subtitleText}>{t('welcome.subtitle')}</Text>
+        </Animated.View>
+
+        <FullScreenContainer
+          barStyle="light-content"
+          edges={['bottom']}
+          style={styles.fullScreenContainer}
+        >
+          <TouchableOpacity
+            onPress={openGitHub}
+            style={styles.githubButton}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.githubButtonText}>
+              📦 {t('welcome.githubButton')}
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => navigate(Routes.LoginScreen)}
+            style={styles.button}
+            activeOpacity={0.8}
+          >
+            <Text style={styles.buttonText}>{t('welcome.loginButton')}</Text>
+          </TouchableOpacity>
+        </FullScreenContainer>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default WelcomeScreen;
+
+const getStyles = ({ colors }: ThemeContextType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.primary,
+    },
+    imageContainer: {
+      alignSelf: 'center',
+      marginTop: mobileScreenHeight * 0.05,
+    },
+    logo: {
+      resizeMode: 'contain',
+      tintColor: colors.white,
+      alignSelf: 'center',
+    },
+    contentContainer: {
+      flex: 1,
+      alignItems: 'center',
+      paddingHorizontal: 30,
+    },
+    titleText: {
+      color: colors.white,
+      fontWeight: '400',
+      textAlign: 'center',
+      fontSize: 32,
+    },
+    titleBoldText: {
+      fontWeight: '700',
+    },
+    matchBoldText: {
+      color: colors.white,
+      fontWeight: '800',
+      textAlign: 'center',
+      fontSize: 36,
+      marginTop: 4,
+    },
+    infoContainer: {
+      marginTop: 20,
+      width: '100%',
+    },
+    subtitleText: {
+      color: colors.white + 'CC',
+      fontSize: 16,
+      textAlign: 'center',
+      lineHeight: 24,
+    },
+    fullScreenContainer: {
+      flex: 1,
+      width: '100%',
+      backgroundColor: 'transparent',
+      justifyContent: 'flex-end',
+      paddingBottom: 40,
+    },
+    githubButton: {
+      alignSelf: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 30,
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+      borderRadius: 12,
+      marginBottom: 16,
+      borderWidth: 1,
+      borderColor: 'rgba(255, 255, 255, 0.3)',
+      width: '100%',
+      alignItems: 'center',
+    },
+    githubButtonText: {
+      color: colors.white,
+      fontSize: 15,
+      fontWeight: '600',
+    },
+    button: {
+      alignSelf: 'center',
+      paddingVertical: 16,
+      paddingHorizontal: 35,
+      backgroundColor: colors.backgroundColor,
+      borderRadius: 16,
+      width: '100%',
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 5,
+      elevation: 5,
+    },
+    buttonText: {
+      color: colors.textColor,
+      fontSize: 18,
+      textAlign: 'center',
+      fontWeight: '700',
+    },
+  });

package/MMTemplate/src/theme/Colors.ts

@@ -0,0 +1,25 @@
+export type ThemeType = typeof lightTheme | typeof darkTheme;
+
+const lightTheme = {
+  colors: {
+    primary: '#EF1D0B',
+    secondary: '#FFD1D1',
+    textColor: '#23272D',
+    backgroundColor: '#FFFFFF',
+    white: '#FFFFFF',
+    black: '#000000',
+  },
+};
+
+const darkTheme = {
+  colors: {
+    primary: '#EF1D0B',
+    secondary: '#FFD1D1',
+    textColor: '#FFFFFF',
+    backgroundColor: '#121212',
+    white: '#FFFFFF',
+    black: '#000000',
+  },
+};
+
+export { lightTheme, darkTheme };

package/MMTemplate/src/types/components.types.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { StatusBarStyle, StyleProp, ViewStyle } from 'react-native';
+import { Edges } from 'react-native-safe-area-context';
+
+export type FullScreenContainerProps = {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  edges?: Edges;
+  barStyle?: StatusBarStyle;
+  statusBarHidden?: boolean;
+  keyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
+  isKeyboardAvoidingView?: boolean;
+};

package/MMTemplate/src/types/navigation.types.ts

@@ -0,0 +1,35 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+
+import Routes from '../navigation/routes';
+
+export type VerifyNumberScreenProps =
+  NativeStackScreenProps<RootStackParamList>;
+
+export type RootStackParamList = {
+  [Routes.AuthCheck]: undefined;
+  [Routes.AuthStack]: undefined;
+  [Routes.AppStack]: undefined;
+};
+
+export type MainTabParamList = {
+  [Routes.HomeScreen]: undefined;
+  [Routes.ProfileScreen]: undefined;
+};
+
+export type AuthStackParamList = {
+  [Routes.WelcomeScreen]: undefined;
+  [Routes.LoginScreen]: undefined;
+};
+
+export type AppStackParamList = {
+  [Routes.MainTab]: undefined;
+  [Routes.SettingsScreen]: undefined;
+};
+
+export type ParamsType = RootStackParamList &
+  AuthStackParamList &
+  AppStackParamList &
+  MainTabParamList;
+
+export type NavigationProps<RouteName extends keyof ParamsType> =
+  NativeStackScreenProps<ParamsType, RouteName>;

package/MMTemplate/src/utils/i18n.ts

@@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import StorageHelper from './storageHelper';
+import en from '../locales/en.json';
+import hi from '../locales/hi.json';
+
+// Get saved language or default to English
+const savedLanguage = StorageHelper.getItem(
+  StorageHelper.STORAGE_KEYS.LANGUAGE,
+);
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en,
+    },
+    hi: {
+      translation: hi,
+    },
+  },
+  lng: savedLanguage || 'en',
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

package/MMTemplate/src/utils/navigationUtils.ts

@@ -0,0 +1,72 @@
+import {
+  CommonActions,
+  createNavigationContainerRef,
+  StackActions,
+} from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { ParamsType } from '../types/navigation.types';
+
+export const navigationRef =
+  createNavigationContainerRef<NativeStackNavigationProp<ParamsType>>();
+
+export async function navigate<RouteName extends keyof ParamsType>(
+  routeName: RouteName,
+  params?: ParamsType[RouteName],
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(CommonActions.navigateDeprecated(routeName, params));
+  }
+}
+
+export async function navigateTab<RouteName extends keyof ParamsType>(
+  routeName: RouteName,
+  params?: ParamsType[RouteName],
+) {
+  if (navigationRef.isReady()) {
+    if (navigationRef.canGoBack()) {
+      navigationRef.dispatch(StackActions.popToTop());
+    }
+    navigate(routeName, params);
+  }
+}
+
+export async function replace<RouteName extends keyof ParamsType>(
+  routeName: RouteName,
+  params?: ParamsType[RouteName],
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(StackActions.replace(routeName, params));
+  }
+}
+
+export async function resetAndNavigate<RouteName extends keyof ParamsType>(
+  routeName: RouteName,
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(
+      CommonActions.reset({
+        index: 0,
+        routes: [{ name: routeName }],
+      }),
+    );
+  }
+}
+
+export async function goBack() {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(CommonActions.goBack());
+  }
+}
+
+export async function push<RouteName extends keyof ParamsType>(
+  routeName: RouteName,
+  params?: ParamsType[RouteName],
+) {
+  if (navigationRef.isReady()) {
+    navigationRef.dispatch(StackActions.push(routeName, params));
+  }
+}
+
+export function prepareNavigation() {
+  return navigationRef.isReady();
+}

package/MMTemplate/src/utils/storageHelper.ts

@@ -0,0 +1,51 @@
+import { createMMKV } from 'react-native-mmkv';
+
+export const storage = createMMKV();
+
+enum STORAGE_KEYS {
+  USER = 'user',
+  LANGUAGE = 'language',
+}
+
+const saveItem = (key: STORAGE_KEYS, value: string) => {
+  try {
+    storage.set(key, value);
+    return true;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const removeItem = (key: STORAGE_KEYS) => {
+  try {
+    storage.remove(key);
+    return true;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const getItem = (key: STORAGE_KEYS) => {
+  try {
+    const value = storage.getString(key);
+    return value ? value : undefined;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const clearStorage = () => {
+  try {
+    storage.clearAll();
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export default {
+  removeItem,
+  getItem,
+  saveItem,
+  clearStorage,
+  STORAGE_KEYS,
+};

package/MMTemplate/src/utils/utilsHelper.ts

@@ -0,0 +1,34 @@
+import { Dimensions, Platform } from 'react-native';
+
+const { width: mobileWidth, height: mobileHeight } = Dimensions.get('window');
+const { width: mobileScreenWidth, height: mobileScreenHeight } =
+  Dimensions.get('screen');
+
+const isIos = Platform.OS === 'ios';
+
+export {
+  mobileHeight,
+  mobileWidth,
+  mobileScreenWidth,
+  mobileScreenHeight,
+  isIos,
+};
+
+export const hexWithOpacity = (hex: string, opacityPercent: number) => {
+  hex = hex.replace('#', '');
+
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map(ch => ch + ch)
+      .join('');
+  }
+  if (hex.length !== 6) {
+    return `#${hex}`;
+  }
+
+  const alpha = Math.round((opacityPercent / 100) * 255);
+  const alphaHex = alpha.toString(16).padStart(2, '0').toUpperCase();
+
+  return `#${hex}${alphaHex}`;
+};

package/MMTemplate/src/utils/validationSchemas.ts

@@ -0,0 +1,58 @@
+import * as Yup from 'yup';
+
+// Login Validation Schema
+export const LoginSchema = Yup.object().shape({
+  email: Yup.string()
+    .email('Invalid email address')
+    .required('Email is required'),
+  password: Yup.string()
+    .min(6, 'Password must be at least 6 characters')
+    .required('Password is required'),
+});
+
+// Sign Up Validation Schema
+export const SignUpSchema = Yup.object().shape({
+  name: Yup.string()
+    .min(2, 'Name must be at least 2 characters')
+    .required('Name is required'),
+  email: Yup.string()
+    .email('Invalid email address')
+    .required('Email is required'),
+  password: Yup.string()
+    .min(6, 'Password must be at least 6 characters')
+    .required('Password is required'),
+  confirmPassword: Yup.string()
+    .oneOf([Yup.ref('password')], 'Passwords must match')
+    .required('Confirm password is required'),
+});
+
+// Forgot Password Validation Schema
+export const ForgotPasswordSchema = Yup.object().shape({
+  email: Yup.string()
+    .email('Invalid email address')
+    .required('Email is required'),
+});
+
+// Change Password Validation Schema
+export const ChangePasswordSchema = Yup.object().shape({
+  currentPassword: Yup.string().required('Current password is required'),
+  newPassword: Yup.string()
+    .min(6, 'Password must be at least 6 characters')
+    .required('New password is required'),
+  confirmPassword: Yup.string()
+    .oneOf([Yup.ref('newPassword')], 'Passwords must match')
+    .required('Confirm password is required'),
+});
+
+// Profile Update Validation Schema
+export const ProfileUpdateSchema = Yup.object().shape({
+  name: Yup.string()
+    .min(2, 'Name must be at least 2 characters')
+    .required('Name is required'),
+  email: Yup.string()
+    .email('Invalid email address')
+    .required('Email is required'),
+  phone: Yup.string()
+    .matches(/^[0-9]{10}$/, 'Phone number must be 10 digits')
+    .optional(),
+});

package/MMTemplate/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["jest"],
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
+}