@modhamanish/rn-mm-template 1.0.3 → 1.0.5

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,

package/MMTemplate/src/screens/NoteScreen.tsx

@@ -1,3 +1,4 @@
+import React, { FC, useMemo } from 'react';
 import {
   StyleSheet,
   FlatList,
@@ -6,23 +7,24 @@ import {
   ActivityIndicator,
   RefreshControl,
 } from 'react-native';
-import AppText from '../components/AppText';
-import React, { FC, useMemo } from 'react';
-import FullScreenContainer from '../components/FullScreenContainer';
-import { useTheme } from '../context/ThemeContext';
+
 import { useTranslation } from 'react-i18next';
-import { ThemeType } from '../theme/Colors';
-import { useGetNotesQuery } from '../services/note.query';
-import { Note } from '../types/services.types';
-import AnimationView from '../components/AnimationView';
 
-import { navigate } from '../utils/navigationUtils';
-import Routes from '../navigation/routes';
+import { Note } from '@app-types/services.types';
+import AnimationView from '@components/AnimationView';
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import { useTheme } from '@context/ThemeContext';
+import Routes from '@navigation/routes';
+import { useGetNotesQuery } from '@services/note.query';
+import { ThemeType } from '@src/theme/colors';
+import { navigate } from '@utils/navigationUtils';
+import { hexWithOpacity } from '@utils/utilsHelper';
 
 const NoteScreen: FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
 
   const { data: notes, isLoading, refetch, isRefetching } = useGetNotesQuery();
 
@@ -156,7 +158,7 @@ const getStyles = ({ colors }: ThemeType) =>
       letterSpacing: -0.5,
     },
     headerSubtitle: {
-      color: colors.textColor + '80',
+      color: hexWithOpacity(colors.textColor, 50),
       marginTop: 4,
     },
     noteCard: {
@@ -165,7 +167,7 @@ const getStyles = ({ colors }: ThemeType) =>
       padding: 16,
       marginBottom: 16,
       borderWidth: 1,
-      borderColor: colors.textColor + '15',
+      borderColor: hexWithOpacity(colors.textColor, 8),
       shadowColor: colors.black,
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.05,
@@ -184,7 +186,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginRight: 8,
     },
     noteTag: {
-      backgroundColor: colors.primary + '15',
+      backgroundColor: hexWithOpacity(colors.primary, 8),
       paddingHorizontal: 8,
       paddingVertical: 4,
       borderRadius: 8,
@@ -194,7 +196,7 @@ const getStyles = ({ colors }: ThemeType) =>
       textTransform: 'uppercase',
     },
     noteContent: {
-      color: colors.textColor + 'B3',
+      color: hexWithOpacity(colors.textColor, 70),
       lineHeight: 20,
     },
     emptyContainer: {
@@ -207,7 +209,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 16,
     },
     emptyText: {
-      color: colors.textColor + '80',
+      color: hexWithOpacity(colors.textColor, 50),
       marginBottom: 24,
     },
     addNoteButtonSmall: {

package/MMTemplate/src/screens/ProfileScreen.tsx

@@ -1,20 +1,23 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { View, TouchableOpacity, StyleSheet, Alert } 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 AnimationView from '../components/AnimationView';
-import { useAuth } from '../context/AuthContext';
-import InfoCard from '../components/InfoCard';
-import { navigate } from '../utils/navigationUtils';
-import Routes from '../navigation/routes';
+
+import AnimationView from '@components/AnimationView';
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import InfoCard from '@components/InfoCard';
+import { useAuth } from '@context/AuthContext';
+import { useTheme } from '@context/ThemeContext';
+import Routes from '@navigation/routes';
+import { ThemeType } from '@src/theme/colors';
+import { navigate } from '@utils/navigationUtils';
+import { hexWithOpacity } from '@utils/utilsHelper';
 
 const ProfileScreen: FC = () => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
   const { user, handleLogout } = useAuth();
 
   const confirmLogout = () => {
@@ -133,7 +136,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 4,
     },
     email: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
     infoRow: {
       flexDirection: 'row',
@@ -145,7 +148,7 @@ const getStyles = ({ colors }: ThemeType) =>
       color: colors.textColor,
     },
     infoValue: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
     logoutButton: {
       backgroundColor: colors.primary,

package/MMTemplate/src/screens/SettingsScreen.tsx

@@ -1,18 +1,21 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { View, StyleSheet, 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 AnimationView from '../components/AnimationView';
-import LanguageSwitcher from '../components/LanguageSwitcher';
-import ThemeSwitcher from '../components/ThemeSwitcher';
+
+import AnimationView from '@components/AnimationView';
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import LanguageSwitcher from '@components/LanguageSwitcher';
+import ThemeSwitcher from '@components/ThemeSwitcher';
+import { useTheme } from '@context/ThemeContext';
+import { ThemeType } from '@src/theme/colors';
+import { hexWithOpacity } from '@utils/utilsHelper';
 
 const SettingsScreen: 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">
@@ -81,7 +84,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 8,
     },
     subtitle: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
     },
     section: {
       marginBottom: 32,
@@ -91,7 +94,7 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 8,
     },
     sectionDescription: {
-      color: colors.textColor + 'CC',
+      color: hexWithOpacity(colors.textColor, 80),
       marginBottom: 16,
     },
   });