@modhamanish/rn-mm-template 1.0.1 → 1.0.3

package/MMTemplate/src/screens/WelcomeScreen.tsx

@@ -1,10 +1,4 @@
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-  Linking,
-} from 'react-native';
+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';
@@ -21,6 +15,7 @@ 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';
 
 const WelcomeScreen: FC = () => {
   const theme = useTheme();
@@ -83,14 +78,20 @@ const WelcomeScreen: FC = () => {
       </View>
 
       <Animated.View style={[styles.contentContainer, { opacity }]}>
-        <Text style={styles.titleText}>
-          <Text style={styles.titleBoldText}>{t('welcome.titleBold')}</Text>
+        <AppText style={styles.titleText}>
+          <AppText variant="bold" size="xxlarge" style={styles.titleBoldText}>
+            {t('welcome.titleBold')}
+          </AppText>
           {t('welcome.titleText')}
-        </Text>
-        <Text style={styles.matchBoldText}>{t('welcome.appName')}</Text>
+        </AppText>
+        <AppText variant="h1" size={36} style={styles.matchBoldText}>
+          {t('welcome.appName')}
+        </AppText>
 
         <Animated.View style={[styles.infoContainer, animatedContentStyle]}>
-          <Text style={styles.subtitleText}>{t('welcome.subtitle')}</Text>
+          <AppText variant="body1" style={styles.subtitleText}>
+            {t('welcome.subtitle')}
+          </AppText>
         </Animated.View>
 
         <FullScreenContainer
@@ -103,9 +104,13 @@ const WelcomeScreen: FC = () => {
             style={styles.githubButton}
             activeOpacity={0.8}
           >
-            <Text style={styles.githubButtonText}>
+            <AppText
+              variant="semiBold"
+              size={15}
+              style={styles.githubButtonText}
+            >
               📦 {t('welcome.githubButton')}
-            </Text>
+            </AppText>
           </TouchableOpacity>
 
           <TouchableOpacity
@@ -113,7 +118,9 @@ const WelcomeScreen: FC = () => {
             style={styles.button}
             activeOpacity={0.8}
           >
-            <Text style={styles.buttonText}>{t('welcome.loginButton')}</Text>
+            <AppText variant="bold" size={18} style={styles.buttonText}>
+              {t('welcome.loginButton')}
+            </AppText>
           </TouchableOpacity>
         </FullScreenContainer>
       </Animated.View>
@@ -150,13 +157,11 @@ const getStyles = ({ colors }: ThemeContextType) =>
       fontSize: 32,
     },
     titleBoldText: {
-      fontWeight: '700',
+      color: colors.white,
     },
     matchBoldText: {
       color: colors.white,
-      fontWeight: '800',
       textAlign: 'center',
-      fontSize: 36,
       marginTop: 4,
     },
     infoContainer: {
@@ -165,7 +170,6 @@ const getStyles = ({ colors }: ThemeContextType) =>
     },
     subtitleText: {
       color: colors.white + 'CC',
-      fontSize: 16,
       textAlign: 'center',
       lineHeight: 24,
     },
@@ -190,8 +194,6 @@ const getStyles = ({ colors }: ThemeContextType) =>
     },
     githubButtonText: {
       color: colors.white,
-      fontSize: 15,
-      fontWeight: '600',
     },
     button: {
       alignSelf: 'center',
@@ -208,8 +210,6 @@ const getStyles = ({ colors }: ThemeContextType) =>
     },
     buttonText: {
       color: colors.textColor,
-      fontSize: 18,
       textAlign: 'center',
-      fontWeight: '700',
     },
   });

package/MMTemplate/src/services/axiosInstance.ts

@@ -0,0 +1,41 @@
+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';
+
+const axiosInstance = axios.create({
+  baseURL: 'https://user-driven-mock-api-generator-serv.vercel.app/man',
+});
+
+const ResponseInterceptor = (response: AxiosResponse) => {
+  return response;
+};
+
+const RequestInterceptor = (config: AxiosRequestConfig | any) => {
+  const token = storageHelper.getItem(storageHelper.STORAGE_KEYS.AUTH_TOKEN);
+  config.headers.device = Platform.OS;
+
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+};
+
+axiosInstance.interceptors.request.use(RequestInterceptor);
+
+axiosInstance.interceptors.response.use(ResponseInterceptor, error => {
+  if (error.response) {
+    if (error.response.status === 403) {
+      // Unauthorized
+      resetAndNavigate(Routes.AuthStack);
+    }
+    return Promise.reject(error);
+  } else if (error.request) {
+    return Promise.reject(error);
+  } else {
+    return Promise.reject(error);
+  }
+});
+
+export { axiosInstance };

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

@@ -0,0 +1,40 @@
+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';
+
+export const useGetNotesQuery = () => {
+  return useQuery({
+    queryKey: [QUERY_KEY.GET_NOTES],
+    queryFn: async () => {
+      const response = await axiosInstance.get<GetNotesResponse>('/notes');
+      if (response.status === 200) {
+        return response.data;
+      }
+      throw new Error('Something went wrong');
+    },
+  });
+};
+
+export const useAddNoteMutation = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  return useMutation({
+    mutationFn: async (note: Omit<Note, 'id'>) => {
+      const response = await axiosInstance.post<Note>('/notes', note);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.GET_NOTES] });
+      Toast.show({
+        type: 'success',
+        text1: t('common.success'),
+        text2: t('common.noteCreated'),
+      });
+      goBack();
+    },
+  });
+};

package/MMTemplate/src/services/queryKeys.ts

@@ -0,0 +1,4 @@
+export enum QUERY_KEY {
+  GET_NOTES = 'GET-NOTES',
+  CREATE_NOTE = 'CREATE-NOTE',
+}

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

@@ -1,7 +1,53 @@
 import { ReactNode } from 'react';
-import { StatusBarStyle, StyleProp, ViewStyle } from 'react-native';
+import {
+  StatusBarStyle,
+  StyleProp,
+  TextProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import { Edges } from 'react-native-safe-area-context';
 
+export type AppTextSize =
+  | 'xxsmall' // 8
+  | 'xsmall' // 10
+  | 'small' // 12
+  | 'normal' // 14
+  | 'body' // 16
+  | 'large' // 20
+  | 'xlarge' // 24
+  | 'xxlarge' // 32
+  | number;
+
+export type AppTextVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'body1'
+  | 'body2'
+  | 'caption'
+  | 'bold'
+  | 'semiBold'
+  | 'medium'
+  | 'regular'
+  | 'light';
+
+export type AppTextTransform =
+  | 'uppercase'
+  | 'lowercase'
+  | 'capitalize'
+  | 'none';
+
+export type AppTextProps = TextProps & {
+  children?: ReactNode;
+  size?: AppTextSize;
+  variant?: AppTextVariant;
+  color?: string;
+  fontFamily?: string;
+  transform?: AppTextTransform;
+  style?: StyleProp<TextStyle>;
+};
+
 export type FullScreenContainerProps = {
   children: ReactNode;
   style?: StyleProp<ViewStyle>;

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

@@ -13,6 +13,7 @@ export type RootStackParamList = {
 
 export type MainTabParamList = {
   [Routes.HomeScreen]: undefined;
+  [Routes.NoteScreen]: undefined;
   [Routes.ProfileScreen]: undefined;
 };
 
@@ -24,6 +25,7 @@ export type AuthStackParamList = {
 export type AppStackParamList = {
   [Routes.MainTab]: undefined;
   [Routes.SettingsScreen]: undefined;
+  [Routes.AddNoteScreen]: undefined;
 };
 
 export type ParamsType = RootStackParamList &

package/MMTemplate/src/types/services.types.ts

@@ -0,0 +1,6 @@
+export type Note = {
+  id: string;
+  title: string;
+  description: string;
+};
+export type GetNotesResponse = Note[];

package/MMTemplate/src/utils/storageHelper.ts

@@ -5,6 +5,8 @@ export const storage = createMMKV();
 enum STORAGE_KEYS {
   USER = 'user',
   LANGUAGE = 'language',
+  THEME = 'theme',
+  AUTH_TOKEN = 'auth_token',
 }
 
 const saveItem = (key: STORAGE_KEYS, value: string) => {

package/MMTemplate/src/utils/validationSchemas.ts

@@ -56,3 +56,9 @@ export const ProfileUpdateSchema = Yup.object().shape({
     .matches(/^[0-9]{10}$/, 'Phone number must be 10 digits')
     .optional(),
 });
+
+// Note Validation Schema
+export const NoteSchema = Yup.object().shape({
+  title: Yup.string().required('Title is required'),
+  description: Yup.string().required('Description is required'),
+});

package/README.md

@@ -7,7 +7,7 @@ Welcome to **MMTemplate**! This is a robust and modern React Native template bui
 To initialize a new project using this template, run the following command:
 
 ```bash
-npx @react-native-community/cli@latest init AwesomeProject --template https://github.com/modhamanish/mm-template
+npx @react-native-community/cli@latest init AwesomeProject --template @modhamanish/rn-mm-template
 ```
 
 Replace `AwesomeProject` with your desired project name.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modhamanish/rn-mm-template",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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",