@modhamanish/rn-mm-template 1.0.4 → 1.1.0

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 => {

package/MMTemplate/src/locales/en.json

@@ -28,7 +28,10 @@
     "creating": "Creating...",
     "noteCreated": "Note created successfully",
     "titleRequired": "Title is required",
-    "descriptionRequired": "Description is required"
+    "descriptionRequired": "Description is required",
+    "errorOccurred": "An error occurred",
+    "errorDescription": "Something went wrong. Please try again or contact support if the problem persists.",
+    "tryAgain": "Try Again"
   },
   "auth": {
     "welcomeBack": "Welcome Back!",

package/MMTemplate/src/locales/hi.json

@@ -28,7 +28,10 @@
     "creating": "बनाया जा रहा है...",
     "noteCreated": "नोट सफलतापूर्वक बनाया गया",
     "titleRequired": "शीर्षक आवश्यक है",
-    "descriptionRequired": "विवरण आवश्यक है"
+    "descriptionRequired": "विवरण आवश्यक है",
+    "errorOccurred": "एक त्रुटि हुई",
+    "errorDescription": "कुछ गलत हो गया। कृपया पुन: प्रयास करें या समस्या बनी रहने पर सहायता टीम से संपर्क करें।",
+    "tryAgain": "पुन: प्रयास करें"
   },
   "auth": {
     "welcomeBack": "वापसी पर स्वागत है!",

package/MMTemplate/src/navigation/AppNavigator.tsx

@@ -1,15 +1,14 @@
 import React, { FC } from 'react';
+
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import { RootStackParamList } from '../types/navigation.types';
-import { navigationRef } from '../utils/navigationUtils';
-
-import Routes from './routes';
-
-import AuthCheck from './AuthCheck';
-import AuthStack from './AuthStack';
-import AppStack from './AppStack';
+import { RootStackParamList } from '@app-types/navigation.types';
+import AppStack from '@navigation/AppStack';
+import AuthCheck from '@navigation/AuthCheck';
+import AuthStack from '@navigation/AuthStack';
+import Routes from '@navigation/routes';
+import { navigationRef } from '@utils/navigationUtils';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 

package/MMTemplate/src/navigation/AppStack.tsx

@@ -1,13 +1,13 @@
 import React, { FC } from 'react';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import Routes from './routes';
-import { AppStackParamList } from '../types/navigation.types';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
+import type { AppStackParamList } from '@app-types/navigation.types';
 // Screens
-import MainTab from './MainTab';
-import SettingsScreen from '../screens/SettingsScreen';
-import AddNoteScreen from '../screens/AddNoteScreen';
+import MainTab from '@navigation/MainTab';
+import Routes from '@navigation/routes';
+import AddNoteScreen from '@screens/AddNoteScreen';
+import SettingsScreen from '@screens/SettingsScreen';
 
 const Stack = createNativeStackNavigator<AppStackParamList>();
 

package/MMTemplate/src/navigation/AuthCheck.tsx

@@ -1,18 +1,19 @@
+import React, { FC, useEffect, useMemo } from 'react';
 import { StyleSheet, Image } from 'react-native';
-import React, { FC, useEffect } from 'react';
-import { useTheme } from '../context/ThemeContext';
-import { ThemeType } from '../theme/Colors';
-import { Images } from '../assets/images';
-import { resetAndNavigate } from '../utils/navigationUtils';
-import Routes from './routes';
-import FullScreenContainer from '../components/FullScreenContainer';
-import { mobileScreenHeight, mobileScreenWidth } from '../utils/utilsHelper';
-import { useAuth } from '../context/AuthContext';
+
+import { Images } from '@assets/images';
+import FullScreenContainer from '@components/FullScreenContainer';
+import { useAuth } from '@context/AuthContext';
+import { useTheme } from '@context/ThemeContext';
+import Routes from '@navigation/routes';
+import { ThemeType } from '@src/theme/colors';
+import { resetAndNavigate } from '@utils/navigationUtils';
+import { mobileScreenHeight, mobileScreenWidth } from '@utils/utilsHelper';
 
 const AuthCheck: FC = () => {
   const theme = useTheme();
   const { isUserLoggedIn } = useAuth();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   useEffect(() => {
     setTimeout(() => {

package/MMTemplate/src/navigation/AuthStack.tsx

@@ -1,9 +1,11 @@
 import React, { FC } from 'react';
+
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import Routes from './routes';
-import { AuthStackParamList } from '../types/navigation.types';
-import WelcomeScreen from '../screens/WelcomeScreen';
-import LoginScreen from '../screens/LoginScreen';
+
+import { AuthStackParamList } from '@app-types/navigation.types';
+import Routes from '@navigation/routes';
+import LoginScreen from '@screens/LoginScreen';
+import WelcomeScreen from '@screens/WelcomeScreen';
 
 const Stack = createNativeStackNavigator<AuthStackParamList>();
 

package/MMTemplate/src/navigation/MainTab.tsx

@@ -1,18 +1,24 @@
 import React, { FC } from 'react';
-import AppText from '../components/AppText';
-import { useTranslation } from 'react-i18next';
+
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import Routes from './routes';
-import { MainTabParamList } from '../types/navigation.types';
-import { useTheme } from '../context/ThemeContext';
+import { useTranslation } from 'react-i18next';
 
+import { MainTabParamList } from '@app-types/navigation.types';
+import AppText from '@components/AppText';
+import { useTheme } from '@context/ThemeContext';
+import Routes from '@navigation/routes';
 // Screens
-import HomeScreen from '../screens/HomeScreen';
-import ProfileScreen from '../screens/ProfileScreen';
-import NoteScreen from '../screens/NoteScreen';
+import HomeScreen from '@screens/HomeScreen';
+import NoteScreen from '@screens/NoteScreen';
+import ProfileScreen from '@screens/ProfileScreen';
+import { hexWithOpacity } from '@src/utils/utilsHelper';
 
 const BottomTab = createBottomTabNavigator<MainTabParamList>();
 
+const HomeIcon = () => <AppText>🏠</AppText>;
+const NoteIcon = () => <AppText>📝</AppText>;
+const ProfileIcon = () => <AppText>👤</AppText>;
+
 const MainTab: FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -24,10 +30,10 @@ const MainTab: FC = () => {
         tabBarHideOnKeyboard: true,
         tabBarStyle: {
           backgroundColor: theme.colors.backgroundColor,
-          borderTopColor: theme.colors.textColor + '20',
+          borderTopColor: hexWithOpacity(theme.colors.textColor, 12),
         },
         tabBarActiveTintColor: theme.colors.primary,
-        tabBarInactiveTintColor: theme.colors.textColor + '80',
+        tabBarInactiveTintColor: hexWithOpacity(theme.colors.textColor, 50),
       }}
     >
       <BottomTab.Screen
@@ -35,7 +41,7 @@ const MainTab: FC = () => {
         component={HomeScreen}
         options={{
           tabBarLabel: t('common.home'),
-          tabBarIcon: () => <AppText>🏠</AppText>,
+          tabBarIcon: HomeIcon,
         }}
       />
       <BottomTab.Screen
@@ -43,7 +49,7 @@ const MainTab: FC = () => {
         component={NoteScreen}
         options={{
           tabBarLabel: t('common.note'),
-          tabBarIcon: () => <AppText>📝</AppText>,
+          tabBarIcon: NoteIcon,
         }}
       />
       <BottomTab.Screen
@@ -51,7 +57,7 @@ const MainTab: FC = () => {
         component={ProfileScreen}
         options={{
           tabBarLabel: t('common.profile'),
-          tabBarIcon: () => <AppText>👤</AppText>,
+          tabBarIcon: ProfileIcon,
         }}
       />
     </BottomTab.Navigator>

package/MMTemplate/src/screens/AddNoteScreen.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import {
   StyleSheet,
   View,
@@ -6,22 +6,25 @@ import {
   ActivityIndicator,
   ScrollView,
 } from 'react-native';
-import AppText from '../components/AppText';
-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 { useAddNoteMutation } from '../services/note.query';
-import { goBack } from '../utils/navigationUtils';
+
 import { useFormik } from 'formik';
-import { NoteSchema } from '../utils/validationSchemas';
+import { useTranslation } from 'react-i18next';
+
+import AnimationView from '@components/AnimationView';
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import TextInput from '@components/TextInput';
+import { useTheme } from '@context/ThemeContext';
+import { useAddNoteMutation } from '@services/note.query';
+import { ThemeType } from '@src/theme/colors';
+import { goBack } from '@utils/navigationUtils';
+import { hexWithOpacity } from '@utils/utilsHelper';
+import { NoteSchema } from '@utils/validationSchemas';
 
 const AddNoteScreen: FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   const { mutate: addNote, isPending } = useAddNoteMutation();
 
@@ -50,7 +53,7 @@ const AddNoteScreen: FC = () => {
         <AppText variant="h3" style={styles.headerTitle}>
           {t('common.addNote')}
         </AppText>
-        <View style={{ width: 40 }} />
+        <View style={styles.spacer} />
       </View>
 
       <ScrollView contentContainerStyle={styles.content}>
@@ -113,7 +116,7 @@ const getStyles = ({ colors }: ThemeType) =>
       paddingHorizontal: 16,
       paddingVertical: 12,
       borderBottomWidth: 1,
-      borderBottomColor: colors.textColor + '10',
+      borderBottomColor: hexWithOpacity(colors.textColor, 6),
     },
     backButton: {
       width: 40,
@@ -152,4 +155,7 @@ const getStyles = ({ colors }: ThemeType) =>
     saveButtonText: {
       color: colors.white,
     },
+    spacer: {
+      width: 40,
+    },
   });

package/MMTemplate/src/screens/HomeScreen.tsx

@@ -1,20 +1,26 @@
+import React, { FC, useMemo } from 'react';
 import { Image, StyleSheet, View, ScrollView } from 'react-native';
-import AppText from '../components/AppText';
-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';
+
+import { Images } from '@assets/images';
+import AnimationView from '@components/AnimationView';
+import AppText from '@components/AppText';
+import FeatureItem from '@components/FeatureItem';
+import FullScreenContainer from '@components/FullScreenContainer';
+import InfoCard from '@components/InfoCard';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import {
+  hexWithOpacity,
+  mobileScreenHeight,
+  mobileScreenWidth,
+} from '@utils/utilsHelper';
 
 const HomeScreen: FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   return (
     <FullScreenContainer style={styles.container} barStyle="light-content">
@@ -282,7 +288,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 8,
     },
     subtitle: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
       textAlign: 'center',
     },
     cardText: {
@@ -291,7 +297,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 8,
     },
     codeBlock: {
-      backgroundColor: colors.textColor + '10',
+      backgroundColor: hexWithOpacity(colors.textColor, 6),
       padding: 12,
       borderRadius: 8,
       marginBottom: 8,
@@ -311,13 +317,13 @@ const getStyles = ({ colors }: ThemeType) =>
       marginTop: 24,
       paddingTop: 24,
       borderTopWidth: 1,
-      borderTopColor: colors.textColor + '20',
+      borderTopColor: hexWithOpacity(colors.textColor, 12),
     },
     footerText: {
       color: colors.primary,
       marginBottom: 4,
     },
     footerSubtext: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
   });

package/MMTemplate/src/screens/LoginScreen.tsx

@@ -1,25 +1,28 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
-import AppText from '../components/AppText';
+
 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';
+
+import AnimationView from '@components/AnimationView';
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import TextInput from '@components/TextInput';
+import { useAuth } from '@context/AuthContext';
+import { useTheme } from '@context/ThemeContext';
+import { userMockData } from '@mock';
+import Routes from '@navigation/routes';
+import { ThemeType } from '@src/theme/colors';
+import { resetAndNavigate } from '@utils/navigationUtils';
+import { hexWithOpacity } from '@utils/utilsHelper';
+import { LoginSchema } from '@utils/validationSchemas';
 
 const LoginScreen: FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
   const { updateUser } = useAuth();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   const formik = useFormik({
     initialValues: {
@@ -183,17 +186,17 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 8,
     },
     subtitle: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
     formContainer: {
       width: '100%',
     },
     hintBanner: {
-      backgroundColor: colors.primary + '10',
+      backgroundColor: hexWithOpacity(colors.primary, 6),
       padding: 16,
       borderRadius: 12,
       borderWidth: 1,
-      borderColor: colors.primary + '30',
+      borderColor: hexWithOpacity(colors.primary, 18),
       marginBottom: 24,
     },
     hintTitle: {
@@ -208,7 +211,7 @@ const getStyles = ({ colors }: ThemeType) =>
       color: colors.textColor,
     },
     hintValue: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
     forgotPassword: {
       alignSelf: 'flex-end',
@@ -233,7 +236,7 @@ const getStyles = ({ colors }: ThemeType) =>
       alignItems: 'center',
     },
     signupText: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
     signupLink: {
       color: colors.primary,