@modhamanish/rn-mm-template 1.0.2 → 1.0.4

package/MMTemplate/src/components/TextInput.tsx

@@ -1,11 +1,21 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   TextInput as RNTextInput,
   TextInputProps,
   View,
-  Text,
   StyleSheet,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
 } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  interpolate,
+  Extrapolate,
+} from 'react-native-reanimated';
+import AppText from './AppText';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
 
@@ -13,6 +23,17 @@ interface CustomTextInputProps extends TextInputProps {
   label?: string;
   error?: string;
   touched?: boolean;
+  renderLeft?: () => React.ReactNode;
+  renderRight?: () => React.ReactNode;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  prefix?: string;
+  suffix?: string;
+  prefixStyle?: StyleProp<TextStyle>;
+  suffixStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  labelBackgroundColor?: string;
 }
 
 const TextInput: React.FC<CustomTextInputProps> = ({
@@ -20,22 +41,161 @@ const TextInput: React.FC<CustomTextInputProps> = ({
   error,
   touched,
   style,
+  renderLeft,
+  renderRight,
+  leftIcon,
+  rightIcon,
+  prefix,
+  suffix,
+  prefixStyle,
+  suffixStyle,
+  containerStyle,
+  inputContainerStyle,
+  labelBackgroundColor,
+  value,
+  placeholder,
+  onFocus,
+  onBlur,
   ...props
 }) => {
   const theme = useTheme();
   const styles = getStyles(theme);
+  const [isFocused, setIsFocused] = useState(false);
+  const [leftWidth, setLeftWidth] = useState(0);
 
+  const hasValue = value !== undefined && value !== '';
   const hasError = touched && error;
+  const labelBg = labelBackgroundColor || theme.colors.backgroundColor;
+
+  const labelAnimation = useSharedValue(hasValue ? 1 : 0);
+
+  useEffect(() => {
+    labelAnimation.value = withTiming(isFocused || hasValue ? 1 : 0, {
+      duration: 200,
+    });
+  }, [isFocused, hasValue, labelAnimation]);
+
+  const animatedLabelStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            labelAnimation.value,
+            [0, 1],
+            [0, -28],
+            Extrapolate.CLAMP,
+          ),
+        },
+        {
+          translateX: interpolate(
+            labelAnimation.value,
+            [0, 1],
+            [leftWidth, -4],
+            Extrapolate.CLAMP,
+          ),
+        },
+        {
+          scale: interpolate(
+            labelAnimation.value,
+            [0, 1],
+            [1, 0.85],
+            Extrapolate.CLAMP,
+          ),
+        },
+      ],
+      backgroundColor: labelAnimation.value === 1 ? labelBg : 'transparent',
+      paddingHorizontal: interpolate(
+        labelAnimation.value,
+        [0, 1],
+        [0, 4],
+        Extrapolate.CLAMP,
+      ),
+      color:
+        isFocused || hasValue
+          ? hasError
+            ? theme.colors.primary
+            : theme.colors.primary
+          : theme.colors.textColor + '80',
+    };
+  });
+
+  const handleFocus = (e: any) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: any) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const onLeftLayout = (event: any) => {
+    setLeftWidth(event.nativeEvent.layout.width);
+  };
+
+  const showPlaceholder = label ? isFocused : true;
 
   return (
-    <View style={styles.container}>
-      {label && <Text style={styles.label}>{label}</Text>}
-      <RNTextInput
-        style={[styles.input, hasError && styles.inputError, style]}
-        placeholderTextColor={theme.colors.textColor + '60'}
-        {...props}
-      />
-      {hasError && <Text style={styles.errorText}>{error}</Text>}
+    <View style={[styles.container, containerStyle]}>
+      <View
+        style={[
+          styles.inputWrapper,
+          isFocused && styles.inputWrapperFocused,
+          hasError && styles.inputWrapperError,
+          inputContainerStyle,
+        ]}
+      >
+        {label && (
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.labelContainer, animatedLabelStyle]}
+          >
+            <AppText variant="medium">{label}</AppText>
+          </Animated.View>
+        )}
+
+        <View style={styles.leftElements} onLayout={onLeftLayout}>
+          {renderLeft ? (
+            renderLeft()
+          ) : typeof leftIcon === 'string' ? (
+            <AppText style={styles.iconLeft}>{leftIcon}</AppText>
+          ) : (
+            leftIcon
+          )}
+
+          {prefix && (
+            <AppText style={[styles.prefix, prefixStyle]}>{prefix}</AppText>
+          )}
+        </View>
+
+        <RNTextInput
+          style={[styles.input, style]}
+          placeholder={showPlaceholder ? placeholder : ''}
+          placeholderTextColor={theme.colors.textColor + '60'}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          value={value}
+          {...props}
+        />
+
+        {suffix && (
+          <AppText style={[styles.suffix, suffixStyle]}>{suffix}</AppText>
+        )}
+
+        {renderRight ? (
+          renderRight()
+        ) : typeof rightIcon === 'string' ? (
+          <AppText style={styles.iconRight}>{rightIcon}</AppText>
+        ) : (
+          rightIcon
+        )}
+      </View>
+
+      {hasError && (
+        <AppText size="small" style={styles.errorText}>
+          {error}
+        </AppText>
+      )}
     </View>
   );
 };
@@ -45,30 +205,61 @@ export default TextInput;
 const getStyles = ({ colors }: ThemeType) =>
   StyleSheet.create({
     container: {
-      marginBottom: 20,
-    },
-    label: {
-      fontSize: 14,
-      fontWeight: '600',
-      color: colors.textColor,
-      marginBottom: 8,
+      marginBottom: 24,
+      marginTop: 12,
     },
-    input: {
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
       backgroundColor: colors.backgroundColor,
       borderWidth: 1,
       borderColor: colors.textColor + '30',
       borderRadius: 12,
-      padding: 16,
+      paddingHorizontal: 12,
+      minHeight: 56,
+    },
+    inputWrapperFocused: {
+      borderColor: colors.primary,
+    },
+    inputWrapperError: {
+      borderColor: colors.primary,
+    },
+    labelContainer: {
+      position: 'absolute',
+      left: 12,
+      top: 16,
+      zIndex: 1,
+    },
+    input: {
+      flex: 1,
       fontSize: 16,
       color: colors.textColor,
+      paddingVertical: 12,
+      paddingHorizontal: 4,
     },
-    inputError: {
-      borderColor: colors.primary,
+    leftElements: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconLeft: {
+      marginRight: 8,
+      fontSize: 20,
+    },
+    iconRight: {
+      marginLeft: 8,
+      fontSize: 20,
+    },
+    prefix: {
+      marginRight: 4,
+      color: colors.textColor + '80',
+    },
+    suffix: {
+      marginLeft: 4,
+      color: colors.textColor + '80',
     },
     errorText: {
       color: colors.primary,
-      fontSize: 12,
-      marginTop: 4,
+      marginTop: 6,
       marginLeft: 4,
     },
   });

package/MMTemplate/src/components/ThemeSwitcher.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import AppText from './AppText';
 import { useTheme } from '../context/ThemeContext';
 import { ThemeType } from '../theme/Colors';
 
@@ -15,17 +16,23 @@ const ThemeSwitcher = () => {
         style={[styles.button, !isDark && styles.activeButton]}
         onPress={() => !isDark || toggleTheme()}
       >
-        <Text style={[styles.buttonText, !isDark && styles.activeButtonText]}>
+        <AppText
+          variant="semiBold"
+          style={[styles.buttonText, !isDark && styles.activeButtonText]}
+        >
           ☀️ Light
-        </Text>
+        </AppText>
       </TouchableOpacity>
       <TouchableOpacity
         style={[styles.button, isDark && styles.activeButton]}
         onPress={() => isDark || toggleTheme()}
       >
-        <Text style={[styles.buttonText, isDark && styles.activeButtonText]}>
+        <AppText
+          variant="semiBold"
+          style={[styles.buttonText, isDark && styles.activeButtonText]}
+        >
           🌙 Dark
-        </Text>
+        </AppText>
       </TouchableOpacity>
     </View>
   );
@@ -53,8 +60,6 @@ const getStyles = ({ colors }: ThemeType) =>
       backgroundColor: colors.primary,
     },
     buttonText: {
-      fontSize: 14,
-      fontWeight: '600',
       color: colors.primary,
     },
     activeButtonText: {

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,
+    },
+  });