@modhamanish/rn-mm-template 1.0.4 → 1.1.0

package/MMTemplate/src/components/AnimationView.tsx

@@ -1,4 +1,5 @@
-import React, { memo, useEffect } from 'react';
+import React, { FC, memo, useEffect } from 'react';
+
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -7,62 +8,49 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-const AnimationView = ({
+import { AnimationViewProps } from '@src/types/components.types';
+
+const AnimationView: FC<AnimationViewProps> = ({
   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 getInitialValue = () => {
+    switch (animType) {
+      case 'SlideInDown':
+        return -100;
+      case 'FadeOut':
+      case 'ZoomOut':
+        return 1;
+      default:
+        return 0;
+    }
+  };
+  const animValue = useSharedValue(getInitialValue());
 
   const animStyle = useAnimatedStyle(() => {
     switch (animType) {
       case 'FadeIn':
-        return {
-          opacity: fadeAnim.value,
-        };
       case 'FadeOut':
         return {
-          opacity: fadeAnim.value,
+          opacity: animValue.value,
         };
       case 'ZoomIn':
-        return {
-          transform: [{ scale: zoomAnim.value }],
-        };
       case 'ZoomOut':
         return {
-          transform: [{ scale: zoomAnim.value }],
+          transform: [{ scale: animValue.value }],
         };
       case 'RotateIn':
-        return {
-          transform: [{ rotate: rotateAnim.value + 'deg' }],
-        };
       case 'RotateOut':
         return {
-          transform: [{ rotate: rotateAnim.value + 'deg' }],
+          transform: [{ rotate: animValue.value + 'deg' }],
         };
       case 'SlideInDown':
         return {
-          transform: [{ translateY: translateAnim.value }],
+          transform: [{ translateY: animValue.value }],
         };
       default:
         return {};
@@ -70,43 +58,40 @@ const AnimationView = ({
   });
 
   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) }),
-      );
+    let targetValue = 0;
+    let easing = Easing.inOut(Easing.ease);
+
+    switch (animType) {
+      case 'FadeIn':
+        targetValue = 1;
+        break;
+      case 'FadeOut':
+        targetValue = 0;
+        break;
+      case 'ZoomIn':
+        targetValue = 1;
+        easing = Easing.elastic(1);
+        break;
+      case 'ZoomOut':
+        targetValue = 0;
+        easing = Easing.elastic(1);
+        break;
+      case 'RotateIn':
+      case 'RotateOut':
+        targetValue = rotateValue;
+        easing = Easing.elastic(1);
+        break;
+      case 'SlideInDown':
+        targetValue = 0;
+        easing = Easing.elastic(1);
+        break;
     }
-  }, [animType, duration, delay, rotateValue]);
+
+    animValue.value = withDelay(
+      delay,
+      withTiming(targetValue, { duration, easing }),
+    );
+  }, [animType, duration, delay, rotateValue, animValue]);
   return <Animated.View style={[animStyle, style]}>{children}</Animated.View>;
 };
 

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);