@modhamanish/rn-mm-template 1.0.4 → 1.1.0

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

package/MMTemplate/src/screens/WelcomeScreen.tsx

@@ -1,8 +1,7 @@
+import React, { FC, useEffect, useMemo } from 'react';
 import { StyleSheet, TouchableOpacity, View, Linking } from 'react-native';
-import React, { FC, useEffect } from 'react';
+
 import { useTranslation } from 'react-i18next';
-import { ThemeContextType, useTheme } from '../context/ThemeContext';
-import { Images } from '../assets/images';
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -11,15 +10,22 @@ import Animated, {
   Easing,
   ReduceMotion,
 } from 'react-native-reanimated';
-import { mobileScreenHeight, mobileScreenWidth } from '../utils/utilsHelper';
-import FullScreenContainer from '../components/FullScreenContainer';
-import { navigate } from '../utils/navigationUtils';
-import Routes from '../navigation/routes';
-import AppText from '../components/AppText';
+
+import { Images } from '@assets/images';
+import AppText from '@components/AppText';
+import FullScreenContainer from '@components/FullScreenContainer';
+import { ThemeContextType, useTheme } from '@context/ThemeContext';
+import Routes from '@navigation/routes';
+import { navigate } from '@utils/navigationUtils';
+import {
+  hexWithOpacity,
+  mobileScreenHeight,
+  mobileScreenWidth,
+} from '@utils/utilsHelper';
 
 const WelcomeScreen: FC = () => {
   const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useMemo(() => getStyles(theme), [theme]);
   const { t } = useTranslation();
 
   const height = useSharedValue(mobileScreenHeight);
@@ -42,7 +48,7 @@ const WelcomeScreen: FC = () => {
     );
     opacity.value = withDelay(1000, withTiming(1, { duration: 1000 }));
     contentOpacity.value = withDelay(1200, withTiming(1, { duration: 800 }));
-  }, []);
+  }, [height, width, opacity, contentOpacity]);
 
   const animatedLogoStyle = useAnimatedStyle(() => {
     return {
@@ -169,7 +175,7 @@ const getStyles = ({ colors }: ThemeContextType) =>
       width: '100%',
     },
     subtitleText: {
-      color: colors.white + 'CC',
+      color: hexWithOpacity(colors.white, 80),
       textAlign: 'center',
       lineHeight: 24,
     },
@@ -184,11 +190,11 @@ const getStyles = ({ colors }: ThemeContextType) =>
       alignSelf: 'center',
       paddingVertical: 12,
       paddingHorizontal: 30,
-      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+      backgroundColor: hexWithOpacity(colors.white, 15),
       borderRadius: 12,
       marginBottom: 16,
       borderWidth: 1,
-      borderColor: 'rgba(255, 255, 255, 0.3)',
+      borderColor: hexWithOpacity(colors.white, 30),
       width: '100%',
       alignItems: 'center',
     },

package/MMTemplate/src/services/axiosInstance.ts

@@ -1,8 +1,10 @@
 import { Platform } from 'react-native';
-import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
-import Routes from '../navigation/routes';
-import storageHelper from '../utils/storageHelper';
-import { resetAndNavigate } from '../utils/navigationUtils';
+
+import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+
+import Routes from '@navigation/routes';
+import { resetAndNavigate } from '@utils/navigationUtils';
+import storageHelper from '@utils/storageHelper';
 
 const axiosInstance = axios.create({
   baseURL: 'https://user-driven-mock-api-generator-serv.vercel.app/man',
@@ -12,7 +14,7 @@ const ResponseInterceptor = (response: AxiosResponse) => {
   return response;
 };
 
-const RequestInterceptor = (config: AxiosRequestConfig | any) => {
+const RequestInterceptor = (config: InternalAxiosRequestConfig) => {
   const token = storageHelper.getItem(storageHelper.STORAGE_KEYS.AUTH_TOKEN);
   config.headers.device = Platform.OS;
 

package/MMTemplate/src/services/note.query.ts

@@ -1,10 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { QUERY_KEY } from './queryKeys';
-import { axiosInstance } from './axiosInstance';
-import { GetNotesResponse, Note } from '../types/services.types';
-import Toast from 'react-native-toast-message';
 import { useTranslation } from 'react-i18next';
-import { goBack } from '../utils/navigationUtils';
+import Toast from 'react-native-toast-message';
+
+import { GetNotesResponse, Note } from '@app-types/services.types';
+import { goBack } from '@utils/navigationUtils';
+
+import { axiosInstance } from './axiosInstance';
+import { QUERY_KEY } from './queryKeys';
 
 export const useGetNotesQuery = () => {
   return useQuery({

package/MMTemplate/src/theme/{Colors.ts → colors.ts}

@@ -8,6 +8,9 @@ const lightTheme = {
     backgroundColor: '#FFFFFF',
     white: '#FFFFFF',
     black: '#000000',
+    borderColor: '#E1E1E1',
+    error: '#D32F2F',
+    success: '#4CD964',
   },
 };
 
@@ -19,6 +22,9 @@ const darkTheme = {
     backgroundColor: '#121212',
     white: '#FFFFFF',
     black: '#000000',
+    borderColor: '#333333',
+    error: '#D32F2F',
+    success: '#4CD964',
   },
 };
 

package/MMTemplate/src/types/components.types.ts

@@ -6,6 +6,7 @@ import {
   TextStyle,
   ViewStyle,
 } from 'react-native';
+
 import { Edges } from 'react-native-safe-area-context';
 
 export type AppTextSize =
@@ -57,3 +58,40 @@ export type FullScreenContainerProps = {
   keyboardAvoidingViewStyle?: StyleProp<ViewStyle>;
   isKeyboardAvoidingView?: boolean;
 };
+
+export interface AlertOptionsProps {
+  title?: string;
+  message?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  onClose?: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  boxStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  messageStyle?: TextStyle;
+  confirmButtonStyle?: ViewStyle;
+  cancelButtonStyle?: ViewStyle;
+  confirmTextStyle?: TextStyle;
+  cancelTextStyle?: TextStyle;
+  isCancellable?: boolean;
+  isError?: boolean;
+}
+
+export type ShowAlert = (opts: AlertOptionsProps) => void;
+
+export interface AnimationViewProps {
+  children: React.ReactNode;
+  animType:
+    | 'FadeIn'
+    | 'FadeOut'
+    | 'ZoomIn'
+    | 'ZoomOut'
+    | 'RotateIn'
+    | 'RotateOut'
+    | 'SlideInDown';
+  duration?: number;
+  delay?: number;
+  rotateValue?: number;
+  style?: StyleProp<ViewStyle | TextStyle>;
+}

package/MMTemplate/src/types/navigation.types.ts

@@ -1,6 +1,6 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
-import Routes from '../navigation/routes';
+import Routes from '@navigation/routes';
 
 export type VerifyNumberScreenProps =
   NativeStackScreenProps<RootStackParamList>;

package/MMTemplate/src/utils/i18n.ts

@@ -1,15 +1,17 @@
-import i18n from 'i18next';
+import appI18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import StorageHelper from './storageHelper';
-import en from '../locales/en.json';
-import hi from '../locales/hi.json';
+
+import en from '@locales/en.json';
+import hi from '@locales/hi.json';
+import StorageHelper from '@utils/storageHelper';
 
 // Get saved language or default to English
 const savedLanguage = StorageHelper.getItem(
   StorageHelper.STORAGE_KEYS.LANGUAGE,
 );
 
-i18n.use(initReactI18next).init({
+// eslint-disable-next-line import/no-named-as-default-member
+appI18n.use(initReactI18next).init({
   resources: {
     en: {
       translation: en,
@@ -25,4 +27,4 @@ i18n.use(initReactI18next).init({
   },
 });
 
-export default i18n;
+export default appI18n;

package/MMTemplate/src/utils/navigationUtils.ts

@@ -4,7 +4,8 @@ import {
   StackActions,
 } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { ParamsType } from '../types/navigation.types';
+
+import { ParamsType } from '@app-types/navigation.types';
 
 export const navigationRef =
   createNavigationContainerRef<NativeStackNavigationProp<ParamsType>>();

package/MMTemplate/src/utils/storageHelper.ts

@@ -13,8 +13,8 @@ const saveItem = (key: STORAGE_KEYS, value: string) => {
   try {
     storage.set(key, value);
     return true;
-  } catch (error) {
-    console.log(error);
+  } catch {
+    // Silent catch
   }
 };
 
@@ -22,8 +22,8 @@ const removeItem = (key: STORAGE_KEYS) => {
   try {
     storage.remove(key);
     return true;
-  } catch (error) {
-    console.log(error);
+  } catch {
+    // Silent catch
   }
 };
 
@@ -31,16 +31,16 @@ const getItem = (key: STORAGE_KEYS) => {
   try {
     const value = storage.getString(key);
     return value ? value : undefined;
-  } catch (error) {
-    console.log(error);
+  } catch {
+    // Silent catch
   }
 };
 
 const clearStorage = () => {
   try {
     storage.clearAll();
-  } catch (error) {
-    console.log(error);
+  } catch {
+    // Silent catch
   }
 };
 

package/MMTemplate/src/utils/utilsHelper.ts

@@ -15,6 +15,7 @@ export {
 };
 
 export const hexWithOpacity = (hex: string, opacityPercent: number) => {
+  'worklet';
   hex = hex.replace('#', '');
 
   if (hex.length === 3) {

package/MMTemplate/tsconfig.json

@@ -2,6 +2,33 @@
   "extends": "@react-native/typescript-config",
   "compilerOptions": {
     "types": ["jest"],
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": ["src/*"],
+      "@src": ["src/index"],
+      "@assets/*": ["src/assets/*"],
+      "@assets": ["src/assets/index"],
+      "@components/*": ["src/components/*"],
+      "@components": ["src/components/index"],
+      "@context/*": ["src/context/*"],
+      "@context": ["src/context/index"],
+      "@locales/*": ["src/locales/*"],
+      "@locales": ["src/locales/index"],
+      "@mock/*": ["src/mock/*"],
+      "@mock": ["src/mock/index"],
+      "@navigation/*": ["src/navigation/*"],
+      "@navigation": ["src/navigation/index"],
+      "@screens/*": ["src/screens/*"],
+      "@screens": ["src/screens/index"],
+      "@services/*": ["src/services/*"],
+      "@services": ["src/services/index"],
+      "@theme/*": ["src/theme/*"],
+      "@theme": ["src/theme/index"],
+      "@app-types/*": ["src/types/*"],
+      "@app-types": ["src/types/index"],
+      "@utils/*": ["src/utils/*"],
+      "@utils": ["src/utils/index"]
+    }
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["**/node_modules", "**/Pods"]

package/README.md

@@ -18,9 +18,10 @@ This template includes the following key libraries and configurations:
 
 *   **Core**: React Native (0.83.1), React (19.2.0)
 *   **Language**: TypeScript (v5) for static type checking
-*   **Navigation**: [React Navigation v7](https://reactnavigation.org/) (Native Stack)
+*   **Navigation**: [React Navigation v7](https://reactnavigation.org/) (Native Stack & Bottom Tabs)
 *   **Internationalization**: [react-i18next](https://react.i18next.com/) with multi-language support (English/Hindi)
 *   **Storage**: [react-native-mmkv](https://github.com/mrousavy/react-native-mmkv) for high-performance persistence
+*   **Forms**: [Formik](https://formik.org/) & [Yup](https://github.com/jquense/yup) for form state management and validation
 *   **Animations**: [React Native Reanimated v4](https://docs.swmansion.com/react-native-reanimated/) & Worklets
 *   **UI/UX**:
     *   **Theme Support**: Light/Dark mode with persistence
@@ -28,6 +29,7 @@ This template includes the following key libraries and configurations:
     *   [React Native Safe Area Context](https://github.com/th3rdwave/react-native-safe-area-context) for handling safe areas
     *   [React Native Keyboard Controller](https://github.com/kirillzyusko/react-native-keyboard-controller) for advanced keyboard handling
     *   [React Native Toast Message](https://github.com/calintamas/react-native-toast-message) for in-app notifications
+*   **Error Handling**: [react-native-error-boundary](https://github.com/cawfree/react-native-error-boundary) for robust error catching
 *   **Testing**: Jest & React Test Renderer
 
 ## 📂 Project Structure

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@modhamanish/rn-mm-template",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A robust and modern React Native template built with TypeScript, designed to jumpstart your mobile application development.",
   "repository": "https://github.com/modhamanish/mm-template.git",
   "author": "Manish Modha",
   "license": "ISC",
+  "scripts": {
+    "release": "node release.js"
+  },
   "keywords": [
     "react-native",
     "typescript",

package/release.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const readline = require('readline');
+const fs = require('fs');
+const path = require('path');
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+const run = (command, cwd = process.cwd()) => {
+  try {
+    console.log(`\x1b[36mRunning: ${command}\x1b[0m`);
+    execSync(command, { stdio: 'inherit', cwd });
+  } catch (error) {
+    console.error(`\x1b[31mError running command: ${command}\x1b[0m`);
+    process.exit(1);
+  }
+};
+
+const pkgPath = path.join(__dirname, 'package.json');
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+console.log(`\x1b[35m\x1b[1mCurrent version: ${pkg.version}\x1b[0m`);
+
+rl.question('Select release type (patch, minor, major) [patch]: ', (type) => {
+  const releaseType = type.trim() || 'patch';
+  
+  if (!['patch', 'minor', 'major'].includes(releaseType)) {
+    console.error('\x1b[31mInvalid release type!\x1b[0m');
+    process.exit(1);
+  }
+
+  // 1. Linting inside MMTemplate
+  console.log('\n\x1b[33m\x1b[1mStep 1: Linting check...\x1b[0m');
+  const mmTemplatePath = path.join(__dirname, 'MMTemplate');
+  
+  if (!fs.existsSync(path.join(mmTemplatePath, 'node_modules'))) {
+    console.log('\x1b[33mNode modules missing in MMTemplate. Installing...\x1b[0m');
+    run('yarn install', mmTemplatePath);
+  }
+  
+  run('yarn lint', mmTemplatePath);
+
+  // 2. Version Bump
+  console.log('\n\x1b[33m\x1b[1mStep 2: Bumping version...\x1b[0m');
+  run(`npm version ${releaseType} --no-git-tag-version`);
+  
+  const newPkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  const newVersion = newPkg.version;
+  
+  // 3. Git Operations
+  console.log('\n\x1b[33m\x1b[1mStep 3: Git commit and tag...\x1b[0m');
+  run('git add .');
+  run(`git commit -m "chore: release v${newVersion}"`);
+  run(`git tag v${newVersion}`);
+  
+  // 4. Final confirmation
+  rl.question(`\n\x1b[35m\x1b[1mPush to git and publish v${newVersion} to npm? (y/n) [n]: \x1b[0m`, (answer) => {
+    if (answer.toLowerCase() === 'y') {
+      console.log('\n\x1b[33m\x1b[1mStep 4: Pushing to Git...\x1b[0m');
+      run('git push origin main --tags');
+      
+      console.log('\n\x1b[33m\x1b[1mStep 5: Publishing to npm...\x1b[0m');
+      run('npm publish --access public --registry https://registry.npmjs.org/');
+      
+      console.log(`\n\x1b[32m\x1b[1mSuccessfully released v${newVersion}! 🚀✨\x1b[0m`);
+    } else {
+      console.log(`\n\x1b[33mVersion bumped to v${newVersion} and tagged locally, but not pushed/published.\x1b[0m`);
+    }
+    rl.close();
+  });
+});