@modhamanish/rn-mm-template 1.0.4 → 1.0.5

package/MMTemplate/src/components/AppText.tsx

@@ -1,7 +1,8 @@
 import React, { FC, memo } from 'react';
 import { Text, TextStyle } from 'react-native';
-import { useTheme } from '../context/ThemeContext';
-import { AppTextProps, AppTextSize } from '../types/components.types';
+
+import { AppTextProps, AppTextSize } from '@app-types/components.types';
+import { useTheme } from '@context/ThemeContext';
 
 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.
@@ -41,7 +42,9 @@ const AppText: FC<AppTextProps> = ({
     return SIZES[s as string] || SIZES.normal;
   };
 
-  const getTransform = (t?: string): any => {
+  const getTransform = (
+    t?: string,
+  ): 'uppercase' | 'lowercase' | 'capitalize' | undefined => {
     if (!t) return undefined;
     switch (t) {
       case 'capital':
@@ -54,7 +57,7 @@ const AppText: FC<AppTextProps> = ({
       case 'capitalize':
         return 'capitalize';
       default:
-        return t;
+        return undefined;
     }
   };
 

package/MMTemplate/src/components/CustomAlert.tsx

@@ -0,0 +1,203 @@
+import React, { FC, memo, useState, useMemo } from 'react';
+import { Modal, StyleSheet, TouchableOpacity, View } from 'react-native';
+
+import { useTranslation } from 'react-i18next';
+
+import AppText from '@components/AppText';
+import { useTheme } from '@src/context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import { AlertOptionsProps } from '@src/types/components.types';
+import { hexWithOpacity } from '@src/utils/utilsHelper';
+
+let externalShow: ((opts: AlertOptionsProps) => void) | null = null;
+
+const CustomAlert: FC = () => {
+  const [stack, setStack] = useState<AlertOptionsProps[]>([]);
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { colors } = theme;
+  const styles = useMemo(() => getStyles(theme), [theme]);
+
+  const show = (opts: AlertOptionsProps) => {
+    const item: AlertOptionsProps = {
+      title: opts.title || '',
+      message: opts.message || '',
+      onConfirm: opts.onConfirm,
+      onCancel: opts.onCancel,
+      onClose: opts.onClose,
+      confirmText: opts.confirmText || t('common.ok'),
+      cancelText: opts.cancelText || t('common.cancel'),
+      boxStyle: opts.boxStyle,
+      titleStyle: opts.titleStyle,
+      messageStyle: opts.messageStyle,
+      confirmButtonStyle: opts.confirmButtonStyle,
+      cancelButtonStyle: opts.cancelButtonStyle,
+      confirmTextStyle: opts.confirmTextStyle,
+      cancelTextStyle: opts.cancelTextStyle,
+      isCancellable: opts.isCancellable || false,
+      isError: opts.isError || false,
+    };
+
+    setStack(prev => [...prev, item]);
+  };
+
+  const hideTop = () => {
+    setStack(prev => prev.slice(0, -1));
+  };
+
+  externalShow = show;
+
+  if (stack.length === 0) {
+    return null;
+  }
+
+  const item = stack[stack.length - 1];
+
+  return (
+    <Modal visible transparent animationType="fade">
+      <TouchableOpacity
+        style={styles.overlay}
+        activeOpacity={1}
+        onPress={() => {
+          if (item.isCancellable || (!item.onCancel && !item.onConfirm)) {
+            hideTop();
+            item.onClose && item.onClose();
+          }
+        }}
+      >
+        <TouchableOpacity
+          activeOpacity={1}
+          onPress={() => {}}
+          style={[styles.box, item.boxStyle]}
+        >
+          {!!item.title && (
+            <AppText
+              variant="semiBold"
+              size="xlarge"
+              style={[
+                styles.title,
+                { color: item.isError ? colors.error : colors.primary },
+                item.titleStyle,
+              ]}
+            >
+              {item.title}
+            </AppText>
+          )}
+          {!!item.message && (
+            <AppText
+              variant="regular"
+              size="normal"
+              color={colors.textColor}
+              style={[styles.message, item.messageStyle]}
+            >
+              {item.message}
+            </AppText>
+          )}
+
+          {item.onCancel || item.onConfirm ? (
+            <View style={styles.btnRow}>
+              {Boolean(item.onCancel || item.isCancellable) && (
+                <TouchableOpacity
+                  style={[
+                    styles.btn,
+                    { backgroundColor: colors.backgroundColor },
+                    item.cancelButtonStyle,
+                  ]}
+                  onPress={() => {
+                    hideTop();
+                    item.onCancel && item.onCancel();
+                  }}
+                >
+                  <AppText
+                    variant="medium"
+                    color={colors.textColor}
+                    style={item.cancelTextStyle}
+                  >
+                    {item.cancelText}
+                  </AppText>
+                </TouchableOpacity>
+              )}
+
+              {item.onConfirm && (
+                <TouchableOpacity
+                  style={[
+                    styles.btn,
+                    {
+                      backgroundColor: item.isError
+                        ? colors.error
+                        : colors.primary,
+                    },
+                    item.confirmButtonStyle,
+                  ]}
+                  onPress={() => {
+                    hideTop();
+                    item.onConfirm && item.onConfirm();
+                  }}
+                >
+                  <AppText
+                    variant="medium"
+                    color={colors.white}
+                    style={item.confirmTextStyle}
+                  >
+                    {item.confirmText}
+                  </AppText>
+                </TouchableOpacity>
+              )}
+            </View>
+          ) : null}
+        </TouchableOpacity>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const MemoAlert = memo(CustomAlert);
+
+(
+  MemoAlert as typeof MemoAlert & { show: (opts: AlertOptionsProps) => void }
+).show = (opts: AlertOptionsProps) => externalShow && externalShow(opts);
+
+export default MemoAlert as typeof MemoAlert & {
+  show: (opts: AlertOptionsProps) => void;
+};
+
+export const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    overlay: {
+      flex: 1,
+      backgroundColor: hexWithOpacity(colors.black, 50),
+      justifyContent: 'center',
+    },
+    box: {
+      margin: 24,
+      padding: 24,
+      borderRadius: 16,
+      borderWidth: 1,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      shadowColor: colors.textColor,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 12,
+      elevation: 5,
+    },
+    title: {
+      marginBottom: 12,
+    },
+    message: {
+      lineHeight: 20,
+    },
+    btnRow: {
+      marginTop: 24,
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+    },
+    btn: {
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      marginLeft: 12,
+      borderRadius: 12,
+      minWidth: 80,
+      alignItems: 'center',
+    },
+  });

package/MMTemplate/src/components/CustomToast.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import AppText from './AppText';
+
+import AppText from '@components/AppText';
 
 type CustomToastProps = {
   text1?: string;

package/MMTemplate/src/components/ErrorBoundaryFallback.tsx

@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
+
+import { useTranslation } from 'react-i18next';
+
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import { hexWithOpacity } from '@utils/utilsHelper';
+
+interface Props {
+  error: Error;
+  resetError: () => void;
+}
+
+const ErrorBoundaryFallback = (props: Props) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { colors } = theme;
+  const styles = useMemo(() => getStyles(theme), [theme]);
+
+  return (
+    <FullScreenContainer style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.iconContainer}>
+          <AppText style={styles.icon}>⚠️</AppText>
+        </View>
+
+        <AppText variant="h1" style={styles.title}>
+          {t('common.errorOccurred')}
+        </AppText>
+
+        <AppText variant="regular" style={styles.subtitle}>
+          {t('common.errorDescription')}
+        </AppText>
+
+        <View style={styles.errorBox}>
+          <ScrollView bounces={false}>
+            <AppText
+              size="small"
+              color={colors.primary}
+              style={styles.errorText}
+            >
+              {props.error.toString()}
+            </AppText>
+          </ScrollView>
+        </View>
+
+        <TouchableOpacity
+          style={styles.button}
+          onPress={props.resetError}
+          activeOpacity={0.8}
+        >
+          <AppText variant="semiBold" color={colors.white}>
+            {t('common.tryAgain')}
+          </AppText>
+        </TouchableOpacity>
+      </View>
+    </FullScreenContainer>
+  );
+};
+
+export const getStyles = (theme: ThemeType) => {
+  const { colors } = theme;
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      padding: 24,
+    },
+    content: {
+      alignItems: 'center',
+    },
+    iconContainer: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 24,
+      backgroundColor: hexWithOpacity(colors.primary, 15),
+    },
+    icon: {
+      fontSize: 40,
+    },
+    title: {
+      textAlign: 'center',
+      marginBottom: 12,
+    },
+    subtitle: {
+      textAlign: 'center',
+      marginBottom: 32,
+      lineHeight: 22,
+      color: hexWithOpacity(colors.textColor, 80),
+    },
+    errorBox: {
+      width: '100%',
+      maxHeight: 200,
+      borderRadius: 12,
+      borderWidth: 1,
+      padding: 16,
+      marginBottom: 32,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+    },
+    errorText: {
+      lineHeight: 18,
+      fontFamily: 'monospace',
+    },
+    button: {
+      width: '100%',
+      height: 56,
+      borderRadius: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+      shadowColor: colors.black,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 8,
+      elevation: 4,
+      backgroundColor: colors.primary,
+    },
+  });
+};
+
+export default ErrorBoundaryFallback;

package/MMTemplate/src/components/FeatureItem.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import AppText from './AppText';
-import { useTheme } from '../context/ThemeContext';
-import { ThemeType } from '../theme/Colors';
+
+import AppText from '@components/AppText';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import { hexWithOpacity } from '@utils/utilsHelper';
 
 interface FeatureItemProps {
   icon: string;
@@ -16,7 +18,7 @@ const FeatureItem: React.FC<FeatureItemProps> = ({
   description,
 }) => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   return (
     <View style={styles.container}>
@@ -56,7 +58,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 2,
     },
     description: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
       lineHeight: 18,
     },
   });

package/MMTemplate/src/components/FullScreenContainer.tsx

@@ -1,12 +1,14 @@
+import React, { FC, memo, useMemo } from 'react';
 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';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { FullScreenContainerProps } from '@app-types/components.types';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
 
-export const FullScreenContainer: FC<FullScreenContainerProps> = ({
+const FullScreenContainer: FC<FullScreenContainerProps> = ({
   children,
   style,
   edges = ['top'],
@@ -16,7 +18,7 @@ export const FullScreenContainer: FC<FullScreenContainerProps> = ({
   isKeyboardAvoidingView = false,
 }) => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   const appBarStyle =
     barStyle ??

package/MMTemplate/src/components/InfoCard.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import AppText from './AppText';
-import { useTheme } from '../context/ThemeContext';
-import { ThemeType } from '../theme/Colors';
+
+import AppText from '@components/AppText';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import { hexWithOpacity } from '@utils/utilsHelper';
 
 interface InfoCardProps {
   title: string;
@@ -12,7 +14,7 @@ interface InfoCardProps {
 
 const InfoCard: React.FC<InfoCardProps> = ({ title, children, icon }) => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   return (
     <View style={styles.card}>
@@ -41,7 +43,7 @@ const getStyles = ({ colors }: ThemeType) =>
       padding: 16,
       marginBottom: 16,
       borderWidth: 1,
-      borderColor: colors.primary + '20',
+      borderColor: hexWithOpacity(colors.primary, 12),
       shadowColor: colors.textColor,
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,

package/MMTemplate/src/components/LanguageSwitcher.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 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';
-import StorageHelper from '../utils/storageHelper';
+
+import AppText from '@components/AppText';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import StorageHelper from '@utils/storageHelper';
 
 const LanguageSwitcher = () => {
   const { i18n } = useTranslation();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);

package/MMTemplate/src/components/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   TextInput as RNTextInput,
   TextInputProps,
@@ -7,7 +7,11 @@ import {
   StyleProp,
   TextStyle,
   ViewStyle,
+  LayoutChangeEvent,
+  FocusEvent,
+  BlurEvent,
 } from 'react-native';
+
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -15,9 +19,11 @@ import Animated, {
   interpolate,
   Extrapolate,
 } from 'react-native-reanimated';
-import AppText from './AppText';
-import { useTheme } from '../context/ThemeContext';
-import { ThemeType } from '../theme/Colors';
+
+import AppText from '@components/AppText';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import { hexWithOpacity } from '@utils/utilsHelper';
 
 interface CustomTextInputProps extends TextInputProps {
   label?: string;
@@ -59,7 +65,7 @@ const TextInput: React.FC<CustomTextInputProps> = ({
   ...props
 }) => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
   const [isFocused, setIsFocused] = useState(false);
   const [leftWidth, setLeftWidth] = useState(0);
 
@@ -115,21 +121,25 @@ const TextInput: React.FC<CustomTextInputProps> = ({
           ? hasError
             ? theme.colors.primary
             : theme.colors.primary
-          : theme.colors.textColor + '80',
+          : hexWithOpacity(theme.colors.textColor, 50),
     };
   });
 
-  const handleFocus = (e: any) => {
+  const handleFocus = (e: FocusEvent) => {
     setIsFocused(true);
-    onFocus?.(e);
+    if (onFocus) {
+      onFocus(e);
+    }
   };
 
-  const handleBlur = (e: any) => {
+  const handleBlur = (e: BlurEvent) => {
     setIsFocused(false);
-    onBlur?.(e);
+    if (onBlur) {
+      onBlur(e);
+    }
   };
 
-  const onLeftLayout = (event: any) => {
+  const onLeftLayout = (event: LayoutChangeEvent) => {
     setLeftWidth(event.nativeEvent.layout.width);
   };
 
@@ -171,7 +181,7 @@ const TextInput: React.FC<CustomTextInputProps> = ({
         <RNTextInput
           style={[styles.input, style]}
           placeholder={showPlaceholder ? placeholder : ''}
-          placeholderTextColor={theme.colors.textColor + '60'}
+          placeholderTextColor={hexWithOpacity(theme.colors.textColor, 37)}
           onFocus={handleFocus}
           onBlur={handleBlur}
           value={value}
@@ -213,7 +223,7 @@ const getStyles = ({ colors }: ThemeType) =>
       alignItems: 'center',
       backgroundColor: colors.backgroundColor,
       borderWidth: 1,
-      borderColor: colors.textColor + '30',
+      borderColor: hexWithOpacity(colors.textColor, 18),
       borderRadius: 12,
       paddingHorizontal: 12,
       minHeight: 56,
@@ -251,11 +261,11 @@ const getStyles = ({ colors }: ThemeType) =>
     },
     prefix: {
       marginRight: 4,
-      color: colors.textColor + '80',
+      color: hexWithOpacity(colors.textColor, 50),
     },
     suffix: {
       marginLeft: 4,
-      color: colors.textColor + '80',
+      color: hexWithOpacity(colors.textColor, 50),
     },
     errorText: {
       color: colors.primary,

package/MMTemplate/src/components/ThemeSwitcher.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import AppText from './AppText';
-import { useTheme } from '../context/ThemeContext';
-import { ThemeType } from '../theme/Colors';
+
+import AppText from '@components/AppText';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
 
 const ThemeSwitcher = () => {
   const { colors, currentTheme, toggleTheme } = useTheme();

package/MMTemplate/src/context/AuthContext.tsx

@@ -1,7 +1,3 @@
-import { userMockData } from '../mock';
-import Routes from '../navigation/routes';
-import { resetAndNavigate } from '../utils/navigationUtils';
-import StorageHelper from '../utils/storageHelper';
 import {
   createContext,
   FC,
@@ -12,6 +8,11 @@ import {
   useState,
 } from 'react';
 
+import { userMockData } from '@mock';
+import Routes from '@navigation/routes';
+import { resetAndNavigate } from '@utils/navigationUtils';
+import StorageHelper from '@utils/storageHelper';
+
 type UserType = typeof userMockData;
 
 type AuthContextType = {

package/MMTemplate/src/context/ThemeContext.tsx

@@ -4,12 +4,13 @@ import {
   ReactNode,
   useCallback,
   useContext,
-  useEffect,
   useState,
 } from 'react';
-import { darkTheme, lightTheme, ThemeType } from '../theme/Colors';
+
 import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
-import storageHelper from '../utils/storageHelper';
+
+import { darkTheme, lightTheme, ThemeType } from '@src/theme/colors';
+import storageHelper from '@utils/storageHelper';
 
 export type ThemeContextType = {
   colors: ThemeType['colors'];
@@ -26,24 +27,14 @@ type ThemeProviderProps = {
 
 export const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
   const safeAreaInsets = useSafeAreaInsets();
-  const [currentTheme, setCurrentTheme] =
-    useState<ThemeContextType['currentTheme']>();
-  const [colors, setColors] = useState<ThemeContextType['colors']>(
-    lightTheme.colors,
-  );
-
-  useEffect(() => {
+  const [currentTheme, setCurrentTheme] = useState<
+    ThemeContextType['currentTheme']
+  >(() => {
     const theme = storageHelper.getItem(storageHelper.STORAGE_KEYS.THEME);
-    setCurrentTheme(theme === 'dark' ? 'dark' : 'light');
-  }, []);
+    return theme === 'dark' ? 'dark' : 'light';
+  });
 
-  useEffect(() => {
-    if (currentTheme === 'dark') {
-      setColors(darkTheme.colors);
-    } else {
-      setColors(lightTheme.colors);
-    }
-  }, [currentTheme]);
+  const colors = currentTheme === 'dark' ? darkTheme.colors : lightTheme.colors;
 
   const toggleTheme = useCallback(() => {
     setCurrentTheme(prev => {