@modhamanish/rn-mm-template 1.0.1 → 1.0.3

package/MMTemplate/src/context/ThemeContext.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react';
 import { darkTheme, lightTheme, ThemeType } from '../theme/Colors';
 import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
+import storageHelper from '../utils/storageHelper';
 
 export type ThemeContextType = {
   colors: ThemeType['colors'];
@@ -31,6 +32,11 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
     lightTheme.colors,
   );
 
+  useEffect(() => {
+    const theme = storageHelper.getItem(storageHelper.STORAGE_KEYS.THEME);
+    setCurrentTheme(theme === 'dark' ? 'dark' : 'light');
+  }, []);
+
   useEffect(() => {
     if (currentTheme === 'dark') {
       setColors(darkTheme.colors);
@@ -40,7 +46,15 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
   }, [currentTheme]);
 
   const toggleTheme = useCallback(() => {
-    setCurrentTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
+    setCurrentTheme(prev => {
+      if (prev === 'dark') {
+        storageHelper.saveItem(storageHelper.STORAGE_KEYS.THEME, 'light');
+        return 'light';
+      } else {
+        storageHelper.saveItem(storageHelper.STORAGE_KEYS.THEME, 'dark');
+        return 'dark';
+      }
+    });
   }, []);
 
   return (

package/MMTemplate/src/locales/en.json

@@ -15,11 +15,25 @@
     "error": "Error",
     "success": "Success",
     "home": "Home",
-    "profile": "Profile"
+    "profile": "Profile",
+    "note": "Note",
+    "notes": "Notes",
+    "noNotesFound": "No notes found",
+    "addNote": "Add Note",
+    "searchNotes": "Search notes...",
+    "title": "Title",
+    "description": "Description",
+    "enterTitle": "Enter title",
+    "enterDescription": "Enter description",
+    "creating": "Creating...",
+    "noteCreated": "Note created successfully",
+    "titleRequired": "Title is required",
+    "descriptionRequired": "Description is required"
   },
   "auth": {
     "welcomeBack": "Welcome Back!",
     "signInToContinue": "Sign in to continue",
+    "mockCredentialsHint": "Use the following credentials to login:",
     "email": "Email",
     "password": "Password",
     "enterEmail": "Enter your email",
@@ -62,7 +76,10 @@
     "storageSupport": "Fast Storage",
     "storageDescription": "High-performance persistence with react-native-mmkv",
     "localesDescription": "Translation files for multi-language support.",
-    "mockDescription": "Mock data for development and testing."
+    "mockDescription": "Mock data for development and testing.",
+    "assetsDescription": "Global assets like images, icons, and fonts.",
+    "servicesDescription": "API calls and external service integrations.",
+    "typesDescription": "TypeScript interfaces and type definitions."
   },
   "settings": {
     "settings": "Settings",

package/MMTemplate/src/locales/hi.json

@@ -15,11 +15,25 @@
     "error": "त्रुटि",
     "success": "सफलता",
     "home": "होम",
-    "profile": "प्रोफ़ाइल"
+    "profile": "प्रोफ़ाइल",
+    "note": "नोट",
+    "notes": "नोट्स",
+    "noNotesFound": "कोई नोट्स नहीं मिले",
+    "addNote": "नोट जोड़ें",
+    "searchNotes": "नोट्स खोजें...",
+    "title": "शीर्षक",
+    "description": "विवरण",
+    "enterTitle": "शीर्षक दर्ज करें",
+    "enterDescription": "विवरण दर्ज करें",
+    "creating": "बनाया जा रहा है...",
+    "noteCreated": "नोट सफलतापूर्वक बनाया गया",
+    "titleRequired": "शीर्षक आवश्यक है",
+    "descriptionRequired": "विवरण आवश्यक है"
   },
   "auth": {
     "welcomeBack": "वापसी पर स्वागत है!",
     "signInToContinue": "जारी रखने के लिए साइन इन करें",
+    "mockCredentialsHint": "लॉगिन करने के लिए निम्न क्रेडेंशियल का उपयोग करें:",
     "email": "ईमेल",
     "password": "पासवर्ड",
     "enterEmail": "अपना ईमेल दर्ज करें",
@@ -62,7 +76,10 @@
     "storageSupport": "तेज़ स्टोरेज",
     "storageDescription": "react-native-mmkv के साथ उच्च प्रदर्शन दृढ़ता",
     "localesDescription": "बहु-भाषा समर्थन के लिए अनुवाद फ़ाइलें।",
-    "mockDescription": "विकास और परीक्षण के लिए मॉक डेटा।"
+    "mockDescription": "विकास और परीक्षण के लिए मॉक डेटा।",
+    "assetsDescription": "छवियों, आइकन और फोंट जैसे वैश्विक एसेट्स।",
+    "servicesDescription": "API कॉल और बाहरी सेवा एकीकरण।",
+    "typesDescription": "TypeScript इंटरफेस और टाइप परिभाषाएं।"
   },
   "settings": {
     "settings": "सेटिंग्स",

package/MMTemplate/src/navigation/AppStack.tsx

@@ -7,6 +7,7 @@ import { AppStackParamList } from '../types/navigation.types';
 // Screens
 import MainTab from './MainTab';
 import SettingsScreen from '../screens/SettingsScreen';
+import AddNoteScreen from '../screens/AddNoteScreen';
 
 const Stack = createNativeStackNavigator<AppStackParamList>();
 
@@ -20,6 +21,7 @@ const AppStack: FC = () => {
     >
       <Stack.Screen name={Routes.MainTab} component={MainTab} />
       <Stack.Screen name={Routes.SettingsScreen} component={SettingsScreen} />
+      <Stack.Screen name={Routes.AddNoteScreen} component={AddNoteScreen} />
     </Stack.Navigator>
   );
 };

package/MMTemplate/src/navigation/MainTab.tsx

@@ -1,12 +1,15 @@
 import React, { FC } from 'react';
-import { Text } from 'react-native';
+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';
+
+// Screens
 import HomeScreen from '../screens/HomeScreen';
 import ProfileScreen from '../screens/ProfileScreen';
-import { useTheme } from '../context/ThemeContext';
+import NoteScreen from '../screens/NoteScreen';
 
 const BottomTab = createBottomTabNavigator<MainTabParamList>();
 
@@ -32,7 +35,15 @@ const MainTab: FC = () => {
         component={HomeScreen}
         options={{
           tabBarLabel: t('common.home'),
-          tabBarIcon: () => <Text>🏠</Text>,
+          tabBarIcon: () => <AppText>🏠</AppText>,
+        }}
+      />
+      <BottomTab.Screen
+        name={Routes.NoteScreen}
+        component={NoteScreen}
+        options={{
+          tabBarLabel: t('common.note'),
+          tabBarIcon: () => <AppText>📝</AppText>,
         }}
       />
       <BottomTab.Screen
@@ -40,7 +51,7 @@ const MainTab: FC = () => {
         component={ProfileScreen}
         options={{
           tabBarLabel: t('common.profile'),
-          tabBarIcon: () => <Text>👤</Text>,
+          tabBarIcon: () => <AppText>👤</AppText>,
         }}
       />
     </BottomTab.Navigator>

package/MMTemplate/src/navigation/routes.ts

@@ -10,8 +10,10 @@ enum Routes {
 
   // App Stack Screens
   HomeScreen = 'HomeScreen',
+  NoteScreen = 'NoteScreen',
   ProfileScreen = 'ProfileScreen',
   SettingsScreen = 'SettingsScreen',
+  AddNoteScreen = 'AddNoteScreen',
 }
 
 export default Routes;

package/MMTemplate/src/screens/AddNoteScreen.tsx

@@ -0,0 +1,155 @@
+import React, { FC } from 'react';
+import {
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  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';
+
+const AddNoteScreen: FC = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const { mutate: addNote, isPending } = useAddNoteMutation();
+
+  const formik = useFormik({
+    initialValues: {
+      title: '',
+      description: '',
+    },
+    validationSchema: NoteSchema,
+    onSubmit: values => {
+      addNote(values);
+    },
+  });
+
+  const { values, errors, touched, handleChange, handleBlur, handleSubmit } =
+    formik;
+
+  return (
+    <FullScreenContainer style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={() => goBack()}>
+          <AppText size="xlarge" style={styles.backIcon}>
+            ←
+          </AppText>
+        </TouchableOpacity>
+        <AppText variant="h3" style={styles.headerTitle}>
+          {t('common.addNote')}
+        </AppText>
+        <View style={{ width: 40 }} />
+      </View>
+
+      <ScrollView contentContainerStyle={styles.content}>
+        <AnimationView animType="FadeIn" duration={500}>
+          <TextInput
+            label={t('common.title')}
+            placeholder={t('common.enterTitle')}
+            value={values.title}
+            onChangeText={handleChange('title')}
+            onBlur={handleBlur('title')}
+            error={errors.title}
+            touched={touched.title}
+          />
+
+          <TextInput
+            label={t('common.description')}
+            placeholder={t('common.enterDescription')}
+            value={values.description}
+            onChangeText={handleChange('description')}
+            onBlur={handleBlur('description')}
+            error={errors.description}
+            touched={touched.description}
+            multiline
+            numberOfLines={10}
+            style={styles.textArea}
+          />
+
+          <TouchableOpacity
+            style={[styles.saveButton, isPending && styles.saveButtonDisabled]}
+            onPress={() => handleSubmit()}
+            disabled={isPending}
+            activeOpacity={0.8}
+          >
+            {isPending ? (
+              <ActivityIndicator color={theme.colors.white} />
+            ) : (
+              <AppText variant="bold" size={18} style={styles.saveButtonText}>
+                {t('common.save')}
+              </AppText>
+            )}
+          </TouchableOpacity>
+        </AnimationView>
+      </ScrollView>
+    </FullScreenContainer>
+  );
+};
+
+export default AddNoteScreen;
+
+const getStyles = ({ colors }: ThemeType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundColor,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.textColor + '10',
+    },
+    backButton: {
+      width: 40,
+      height: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    backIcon: {
+      color: colors.textColor,
+    },
+    headerTitle: {
+      color: colors.textColor,
+    },
+    content: {
+      padding: 20,
+    },
+    textArea: {
+      height: 150,
+      textAlignVertical: 'top',
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      alignItems: 'center',
+      marginTop: 24,
+      shadowColor: colors.primary,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.3,
+      shadowRadius: 8,
+      elevation: 5,
+    },
+    saveButtonDisabled: {
+      opacity: 0.6,
+    },
+    saveButtonText: {
+      color: colors.white,
+    },
+  });

package/MMTemplate/src/screens/HomeScreen.tsx

@@ -1,4 +1,5 @@
-import { Image, StyleSheet, Text, View, ScrollView } from 'react-native';
+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';
@@ -33,10 +34,10 @@ const HomeScreen: FC = () => {
               />
             </AnimationView>
             <AnimationView delay={400} animType="SlideInDown" duration={800}>
-              <Text style={styles.welcomeText}>
+              <AppText variant="h2" style={styles.welcomeText}>
                 {t('home.welcomeToTemplate')}
-              </Text>
-              <Text style={styles.subtitle}>{t('home.subtitle')}</Text>
+              </AppText>
+              <AppText style={styles.subtitle}>{t('home.subtitle')}</AppText>
             </AnimationView>
           </View>
         </AnimationView>
@@ -44,15 +45,23 @@ const HomeScreen: FC = () => {
         {/* Quick Start Section */}
         <AnimationView delay={600} animType="FadeIn" duration={800}>
           <InfoCard title={`🚀 ${t('home.quickStart')}`} icon="">
-            <Text style={styles.cardText}>{t('home.quickStartDesc')}</Text>
+            <AppText style={styles.cardText}>
+              {t('home.quickStartDesc')}
+            </AppText>
             <View style={styles.codeBlock}>
-              <Text style={styles.codeText}>yarn install</Text>
+              <AppText size={13} style={styles.codeText}>
+                yarn install
+              </AppText>
             </View>
             <View style={styles.codeBlock}>
-              <Text style={styles.codeText}>cd ios && pod install</Text>
+              <AppText size={13} style={styles.codeText}>
+                cd ios && pod install
+              </AppText>
             </View>
             <View style={styles.codeBlock}>
-              <Text style={styles.codeText}>yarn ios / yarn android</Text>
+              <AppText size={13} style={styles.codeText}>
+                yarn ios / yarn android
+              </AppText>
             </View>
           </InfoCard>
         </AnimationView>
@@ -100,6 +109,21 @@ const HomeScreen: FC = () => {
               title="context/"
               description="React Context for global state management."
             />
+            <FeatureItem
+              icon="🖼️"
+              title="assets/"
+              description={t('home.assetsDescription')}
+            />
+            <FeatureItem
+              icon="⚡"
+              title="services/"
+              description={t('home.servicesDescription')}
+            />
+            <FeatureItem
+              icon="🏷️"
+              title="types/"
+              description={t('home.typesDescription')}
+            />
           </InfoCard>
         </AnimationView>
 
@@ -183,33 +207,45 @@ const HomeScreen: FC = () => {
         {/* Next Steps Section */}
         <AnimationView delay={1400} animType="FadeIn" duration={800}>
           <InfoCard title={`🎯 ${t('home.nextSteps')}`} icon="">
-            <Text style={styles.cardText}>
+            <AppText style={styles.cardText}>
               1. Customize the theme in{' '}
-              <Text style={styles.highlight}>theme/Colors.ts</Text>
-            </Text>
-            <Text style={styles.cardText}>
+              <AppText variant="semiBold" style={styles.highlight}>
+                theme/Colors.ts
+              </AppText>
+            </AppText>
+            <AppText style={styles.cardText}>
               2. Add your screens in{' '}
-              <Text style={styles.highlight}>screens/</Text>
-            </Text>
-            <Text style={styles.cardText}>
+              <AppText variant="semiBold" style={styles.highlight}>
+                screens/
+              </AppText>
+            </AppText>
+            <AppText style={styles.cardText}>
               3. Update navigation in{' '}
-              <Text style={styles.highlight}>navigation/</Text>
-            </Text>
-            <Text style={styles.cardText}>
+              <AppText variant="semiBold" style={styles.highlight}>
+                navigation/
+              </AppText>
+            </AppText>
+            <AppText style={styles.cardText}>
               4. Create reusable components in{' '}
-              <Text style={styles.highlight}>components/</Text>
-            </Text>
-            <Text style={styles.cardText}>
+              <AppText variant="semiBold" style={styles.highlight}>
+                components/
+              </AppText>
+            </AppText>
+            <AppText style={styles.cardText}>
               5. Configure your app name and bundle ID
-            </Text>
+            </AppText>
           </InfoCard>
         </AnimationView>
 
         {/* Footer */}
         <AnimationView delay={1600} animType="FadeIn" duration={800}>
           <View style={styles.footer}>
-            <Text style={styles.footerText}>{t('home.happyCoding')}</Text>
-            <Text style={styles.footerSubtext}>{t('home.builtWith')}</Text>
+            <AppText variant="semiBold" size={18} style={styles.footerText}>
+              {t('home.happyCoding')}
+            </AppText>
+            <AppText size={13} style={styles.footerSubtext}>
+              {t('home.builtWith')}
+            </AppText>
           </View>
         </AnimationView>
       </ScrollView>
@@ -241,19 +277,15 @@ const getStyles = ({ colors }: ThemeType) =>
       marginBottom: 16,
     },
     welcomeText: {
-      fontSize: 24,
-      fontWeight: '700',
       color: colors.textColor,
       textAlign: 'center',
       marginBottom: 8,
     },
     subtitle: {
-      fontSize: 14,
       color: colors.textColor + 'CC',
       textAlign: 'center',
     },
     cardText: {
-      fontSize: 14,
       color: colors.textColor,
       lineHeight: 20,
       marginBottom: 8,
@@ -268,12 +300,10 @@ const getStyles = ({ colors }: ThemeType) =>
     },
     codeText: {
       fontFamily: 'monospace',
-      fontSize: 13,
       color: colors.textColor,
     },
     highlight: {
       color: colors.primary,
-      fontWeight: '600',
       fontFamily: 'monospace',
     },
     footer: {
@@ -284,13 +314,10 @@ const getStyles = ({ colors }: ThemeType) =>
       borderTopColor: colors.textColor + '20',
     },
     footerText: {
-      fontSize: 18,
-      fontWeight: '600',
       color: colors.primary,
       marginBottom: 4,
     },
     footerSubtext: {
-      fontSize: 13,
       color: colors.textColor + 'CC',
     },
   });