@vijayp-07/react-native-boiler-plate 1.0.0 → 1.1.1

package/template/src/api/apiMethods.ts

@@ -0,0 +1,65 @@
+import {AxiosRequestConfig} from 'axios';
+import axiosInstance from './axiosInstance';
+import {prettyPrint} from '@common';
+import {ApiResponseType} from '@types';
+
+type Method = 'get' | 'post' | 'put' | 'patch' | 'delete';
+
+const request = async <T>(
+  method: Method,
+  url: string,
+  body?: any,
+  config?: AxiosRequestConfig,
+): Promise<ApiResponseType<T>> => {
+  try {
+    const response = await axiosInstance[method]<T>(
+      url,
+      body ?? config,
+      body ? config : undefined,
+    );
+    prettyPrint({
+      [`API_${method.toUpperCase()}_SUCCESS`]: {url, status: response.status},
+    });
+    return {
+      success: true,
+      data: response.data,
+      message: 'Success',
+      status: response.status,
+    };
+  } catch (error: any) {
+    prettyPrint({[`API_${method.toUpperCase()}_ERROR`]: {url, error}});
+    return {
+      success: false,
+      data: null,
+      message:
+        error?.response?.data?.message ??
+        error?.message ??
+        'Something went wrong',
+      status: error?.response?.status ?? 0,
+    };
+  }
+};
+
+export const apiGet = <T = any>(url: string, config?: AxiosRequestConfig) =>
+  request<T>('get', url, undefined, config);
+
+export const apiPost = <T = any>(
+  url: string,
+  body?: any,
+  config?: AxiosRequestConfig,
+) => request<T>('post', url, body, config);
+
+export const apiPut = <T = any>(
+  url: string,
+  body?: any,
+  config?: AxiosRequestConfig,
+) => request<T>('put', url, body, config);
+
+export const apiPatch = <T = any>(
+  url: string,
+  body?: any,
+  config?: AxiosRequestConfig,
+) => request<T>('patch', url, body, config);
+
+export const apiDelete = <T = any>(url: string, config?: AxiosRequestConfig) =>
+  request<T>('delete', url, undefined, config);

package/template/src/api/axiosInstance.ts

@@ -21,23 +21,14 @@ axiosInstance.interceptors.request.use(
       if (accessToken) {
         config.headers.Authorization = `Bearer ${accessToken}`;
       }
-
-      const platform = Platform.OS;
-      if (platform) {
-        config.headers['app-platform'] = platform;
-      }
-
-      const appVersion = DeviceInfo.getVersion();
-      if (appVersion) {
-        config.headers['app-version'] = appVersion;
-      }
+      config.headers['app-platform'] = Platform.OS;
+      config.headers['app-version'] = DeviceInfo.getVersion();
     } catch (error) {
-      console.warn('Failed to attach auth token:', error);
+      console.warn('Failed to attach request headers:', error);
     }
     return config;
   },
   error => {
-    // Handle request errors (e.g., network issues).
     prettyPrint({AXIOS_INSTANCE_INTERCEPTORS_REQUEST_USE_ERROR: error});
     return Promise.reject(error);
   },
@@ -51,23 +42,22 @@ axiosInstance.interceptors.response.use(
     return response;
   },
   function (error) {
+    prettyPrint({RESPONSE_ERROR: error});
     if (axios.isAxiosError(error)) {
-      if (error.response?.status === 401) {
-        showDangerMessage('Something went wrong! please login again'); // this message need to be changed as per the client requirement
+      const status = error.response?.status;
+      if (status === 401) {
+        showDangerMessage('Something went wrong! please login again');
         clearAsyncData();
         dispatch(resetUserData());
-        dispatch(toggleLoader(false));
-      } else if (error.response?.status === 500) {
+      } else if (status === 500) {
         showDangerMessage(
-          '500 Internal Server Error on ' + error.response?.config.url,
+          `500 Internal Server Error on ${error.response?.config.url}`,
         );
-        dispatch(toggleLoader(false));
       } else if (!error.response) {
         showDangerMessage('Network error. Please check your connection.');
-        dispatch(toggleLoader(false));
       }
+      dispatch(toggleLoader(false));
     }
-    prettyPrint({AXIOS_INSTANCE_INTERCEPTORS_REQUEST_RESPONSE_ERROR: error});
     return Promise.reject(error);
   },
 );

package/template/src/api/endPoints.ts

@@ -0,0 +1,18 @@
+// ─────────────────────────────────────────────────────
+// API ENDPOINTS
+// Add all your endpoint paths here grouped by feature.
+// Usage:  import { endPoints } from '@api';
+// ─────────────────────────────────────────────────────
+
+export const endPoints = {
+  // ── Auth ──────────────────────────────────────────
+  auth: {
+    login: '/auth/login',
+    register: '/auth/register',
+    forgotPassword: '/auth/forgot-password',
+  },
+
+  // Add more feature groups below as your app grows
+  // home: { ... },
+  // user: { ... },
+} as const;

package/template/src/api/index.ts

@@ -2,6 +2,9 @@ import axiosInstance from './axiosInstance';
 
 export {axiosInstance};
 
+export * from './endPoints';
+export * from './apiMethods';
+
 export const PER_PAGE_LIMIT = 10;
 
 export const apiStatusCodes = {

package/template/src/appRedux/modules/ProfileSlice.ts

@@ -1,11 +1,11 @@
-import {UserTypes} from '@types';
+import {Languages, UserTypes} from '@types';
 import {PayloadAction, createSlice} from '@reduxjs/toolkit';
 import {ASYNC_KEY, removeAsyncData, setAsyncData} from '@common';
 import {onChangeLanguage} from '@i18n';
 
 interface ProfileState {
   userData: UserTypes;
-  language: 'en' | 'es';
+  language: Languages;
   isLogIn: boolean;
 }
 
@@ -44,7 +44,7 @@ export const profileSlice = createSlice({
       state.userData = initialState.userData;
       removeAsyncData(ASYNC_KEY.USER);
     },
-    setLanguage: (state, action: PayloadAction<'en' | 'es'>) => {
+    setLanguage: (state, action: PayloadAction<Languages>) => {
       state.language = action.payload;
       onChangeLanguage(action.payload);
     },

package/template/src/assets/images/IC_HidePassword.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8" stroke="#222222" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.87868 7.87868C3 8.75736 3 10.1716 3 13V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V13C21 10.1716 21 8.75736 20.1213 7.87868C19.2426 7 17.8284 7 15 7H9C6.17157 7 4.75736 7 3.87868 7.87868ZM12 15C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14C11 14.5523 11.4477 15 12 15ZM15 14C15 15.3062 14.1652 16.4175 13 16.8293V19H11V16.8293C9.83481 16.4175 9 15.3062 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14Z" fill="#222222"/>
+</svg>

package/template/src/assets/images/IC_ShowPassword.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.87868 7.87868C3 8.75736 3 10.1716 3 13V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V13C21 10.1716 21 8.75736 20.1213 7.87868C19.2426 7 17.8284 7 15 7H9C6.17157 7 4.75736 7 3.87868 7.87868ZM12 15C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14C11 14.5523 11.4477 15 12 15ZM15 14C15 15.3062 14.1652 16.4175 13 16.8293V19H11V16.8293C9.83481 16.4175 9 15.3062 9 14C9 12.3431 10.3431 11 12 11C13.6569 11 15 12.3431 15 14Z" fill="#222222"/>
+<path d="M16.5 7.99981C16.8043 6.17359 16.0108 4.33842 14.4717 3.30935L14.0979 3.05946C12.0734 1.70579 9.3937 1.87263 7.55269 3.46699L6.66992 4.23149" stroke="#222222" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/template/src/assets/images/index.ts

@@ -2,10 +2,14 @@ import IC_Home_Active from './IC_Home_Active.svg';
 import IC_Home_UnActive from './IC_Home_UnActive.svg';
 import IC_Setting_Active from './IC_Setting_Active.svg';
 import IC_Setting_UnActive from './IC_Setting_UnActive.svg';
+import IC_HidePassword from './IC_HidePassword.svg';
+import IC_ShowPassword from './IC_ShowPassword.svg';
 
 export {
   IC_Home_Active,
   IC_Home_UnActive,
   IC_Setting_Active,
   IC_Setting_UnActive,
+  IC_HidePassword,
+  IC_ShowPassword,
 };

package/template/src/components/Container.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {View, StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+interface ContainerProps {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  hideBottomSafeArea?: boolean;
+  hideTopSafeArea?: boolean;
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Container: React.FC<ContainerProps> = ({
+  children,
+  backgroundColor,
+  hideBottomSafeArea,
+  hideTopSafeArea,
+  padding,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  style,
+}) => {
+  const {top, bottom} = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        style,
+        {backgroundColor: backgroundColor ?? 'transparent'},
+        padding !== undefined && {padding},
+        paddingLeft !== undefined && {paddingLeft},
+        paddingRight !== undefined && {paddingRight},
+        {
+          paddingTop:
+            (paddingTop ?? padding ?? 0) + (!hideTopSafeArea ? top : 0),
+        },
+        {
+          paddingBottom:
+            (paddingBottom ?? padding ?? 0) +
+            (!hideBottomSafeArea ? bottom : 0),
+        },
+      ]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default Container;

package/template/src/components/PrimaryFlashMessage.tsx

@@ -3,7 +3,6 @@ import {View, StyleSheet, Animated} from 'react-native';
 import FlashMessage, {FlashMessageProps} from 'react-native-flash-message';
 import {colors, perfectSize} from '@theme';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {prettyPrint} from '@common';
 import PrimaryText from './PrimaryText';
 import {fonts} from '@fonts';
 
@@ -17,7 +16,6 @@ const TYPE_CONFIG: Record<string, {bg: string; accent: string; icon: string}> =
   };
 
 const FlashMessageComponent: FC<{message: any}> = ({message}) => {
-  prettyPrint({message});
   const type = message?.type ?? 'default';
   const {bg, accent, icon} = TYPE_CONFIG[type] ?? TYPE_CONFIG.default;
   const {top, bottom} = useSafeAreaInsets();

package/template/src/components/PrimaryLoader.tsx

@@ -7,7 +7,7 @@ interface PrimaryLoaderProps {
   isLocalLoading?: boolean;
 }
 
-const PrimaryLoader: FC<PrimaryLoaderProps> = ({isLocalLoading = false}) => {
+const PrimaryLoader: FC<PrimaryLoaderProps> = ({isLocalLoading}) => {
   const {isLoading} = useAppSelector(state => state.loader);
   const isVisible = isLocalLoading ?? isLoading;
   return isVisible ? (

package/template/src/components/PrimaryTextInput.tsx

@@ -0,0 +1,84 @@
+import {fonts} from '@fonts';
+import {IC_HidePassword, IC_ShowPassword} from '@images';
+import {colors, perfectSize} from '@theme';
+import {forwardRef, useState} from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+interface PrimaryTextInputProps extends TextInputProps {
+  containerStyle?: StyleProp<ViewStyle> | undefined;
+  isPassword?: boolean;
+}
+
+const PrimaryTextInput = forwardRef(
+  (props: PrimaryTextInputProps, ref: any) => {
+    const {style, containerStyle, isPassword, ...restProps} = props;
+
+    const [hidePassword, setHidPassword] = useState<boolean>(true);
+    return (
+      <View style={[styles.container, containerStyle]}>
+        <TextInput
+          ref={ref}
+          style={[styles.textInput, style]}
+          autoCapitalize={'none'}
+          autoCorrect={false}
+          placeholderTextColor={colors.black60}
+          secureTextEntry={isPassword && hidePassword}
+          {...restProps}
+        />
+        {isPassword && (
+          <TouchableOpacity
+            activeOpacity={0.6}
+            onPress={() => setHidPassword(!hidePassword)}>
+            {hidePassword ? (
+              <IC_HidePassword
+                width={perfectSize(24)}
+                height={perfectSize(24)}
+              />
+            ) : (
+              <IC_ShowPassword
+                width={perfectSize(24)}
+                height={perfectSize(24)}
+              />
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: perfectSize(45),
+    borderRadius: perfectSize(6),
+    backgroundColor: colors.white,
+    paddingHorizontal: perfectSize(16),
+    paddingVertical: 0,
+    borderWidth: perfectSize(1),
+    borderColor: colors.black,
+    includeFontPadding: false,
+    columnGap: perfectSize(10),
+  },
+  textInput: {
+    flex: 1,
+    backgroundColor: colors.white,
+    includeFontPadding: false,
+    fontFamily: fonts.primary,
+    fontSize: perfectSize(14),
+    color: colors.black,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+  },
+});
+
+export default PrimaryTextInput;

package/template/src/components/index.ts

@@ -4,12 +4,16 @@ import PrimaryButton from './PrimaryButton';
 import PrimaryText from './PrimaryText';
 import NoInternetModalPopUp from './NoInternetModalPopUp';
 import PrimaryScrollView from './PrimaryScrollView';
+import Container from './Container';
+import PrimaryTextInput from './PrimaryTextInput';
 
 export {
   PrimaryLoader,
   PrimaryFlashMessage,
   PrimaryButton,
   PrimaryText,
+  PrimaryTextInput,
   PrimaryScrollView,
   NoInternetModalPopUp,
+  Container,
 };

package/template/src/i18n/en.json

@@ -1,8 +1,7 @@
 {
   "loginScreen": {
-    "loginScreen": "LogIn Screen",
-    "login": "Login",
-    "showErrorMessage": "Show Error Message"
+    "logIn": "LogIn",
+    "login": "Login"
   },
   "modalScreen": {
     "modalScreen": "Modal Screen",
@@ -10,8 +9,7 @@
   },
   "homeScreen": {
     "homeScreen": "Home Screen",
-    "openModalScreen": "Open Modal Screen",
-    "showSuccessMessage": "Show Success Message"
+    "openModalScreen": "Open Modal Screen"
   },
   "profileScreen": {
     "profileScreen": "Profile Screen",
@@ -20,11 +18,17 @@
     "cancel": "Cancel"
   },
   "validations": {
-    "testError": "This is error message",
-    "testSuccess": "This is success message"
+    "email": "Please enter email",
+    "validEmail": "Please enter valid email",
+    "password": "Please enter password"
+  },
+  "messages": {
+    "loginSuccessful": "Login successful!",
+    "logoutSuccessful": "Logout successful!"
   },
   "languages": {
     "en": "English",
-    "es": "Spanish"
+    "es": "Spanish",
+    "hi": "Hindi"
   }
 }

package/template/src/i18n/es.json

@@ -1,17 +1,15 @@
 {
   "loginScreen": {
-    "loginScreen": "Pantalla de Inicio de Sesión",
-    "login": "Iniciar sesión",
-    "showErrorMessage": "Mostrar mensaje de error"
+    "logIn": "Iniciar sesión",
+    "login": "Acceso"
   },
   "modalScreen": {
     "modalScreen": "Pantalla Modal",
     "modalDescription": "Esta es una pantalla modal. Toque afuera para cerrarla."
   },
   "homeScreen": {
-    "homeScreen": "Pantalla de Inicio",
-    "openModalScreen": "Abrir pantalla modal",
-    "showSuccessMessage": "Mostrar mensaje de éxito"
+    "homeScreen": "Pantalla Principal",
+    "openModalScreen": "Abrir Pantalla Modal"
   },
   "profileScreen": {
     "profileScreen": "Pantalla de Perfil",
@@ -20,11 +18,17 @@
     "cancel": "Cancelar"
   },
   "validations": {
-    "testError": "Este es un mensaje de error",
-    "testSuccess": "Este es un mensaje de éxito"
+    "email": "Por favor ingrese el correo electrónico",
+    "validEmail": "Por favor ingrese un correo electrónico válido",
+    "password": "Por favor ingrese la contraseña"
+  },
+  "messages": {
+    "loginSuccessful": "¡Inicio de sesión exitoso!",
+    "logoutSuccessful": "¡Cierre de sesión exitoso!"
   },
   "languages": {
     "en": "Inglés",
-    "es": "Español"
+    "es": "Español",
+    "hi": "Hindi"
   }
 }

package/template/src/i18n/hi.json

@@ -0,0 +1,34 @@
+{
+  "loginScreen": {
+    "logIn": "लॉग इन",
+    "login": "लॉगिन"
+  },
+  "modalScreen": {
+    "modalScreen": "मोडल स्क्रीन",
+    "modalDescription": "यह एक मोडल स्क्रीन है। बंद करने के लिए बाहर टैप करें।"
+  },
+  "homeScreen": {
+    "homeScreen": "होम स्क्रीन",
+    "openModalScreen": "मोडल स्क्रीन खोलें"
+  },
+  "profileScreen": {
+    "profileScreen": "प्रोफाइल स्क्रीन",
+    "logout": "लॉगआउट",
+    "changeLanguage": "भाषा बदलें",
+    "cancel": "रद्द करें"
+  },
+  "validations": {
+    "email": "कृपया ईमेल दर्ज करें",
+    "validEmail": "कृपया मान्य ईमेल दर्ज करें",
+    "password": "कृपया पासवर्ड दर्ज करें"
+  },
+  "messages": {
+    "loginSuccessful": "लॉगिन सफल हुआ!",
+    "logoutSuccessful": "लॉगआउट सफल हुआ!"
+  },
+  "languages": {
+    "en": "अंग्रेज़ी",
+    "es": "स्पेनिश",
+    "hi": "हिंदी"
+  }
+}

package/template/src/i18n/i18n.ts

@@ -2,17 +2,21 @@ import i18n from 'i18next';
 import {initReactI18next} from 'react-i18next';
 import en from './en.json';
 import es from './es.json';
+import hi from './hi.json';
 import moment from 'moment';
 
 require('moment/locale/es');
+require('moment/locale/hi');
 
 import {ASYNC_KEY, setAsyncData} from '@common';
+import {Languages} from '@types';
 
 i18n.use(initReactI18next).init({
   compatibilityJSON: 'v4',
   resources: {
     en: {translation: en},
     es: {translation: es},
+    hi: {translation: hi},
   },
   lng: 'en',
   fallbackLng: 'en',
@@ -29,7 +33,7 @@ i18n.on('languageChanged', lng => {
 // Set initial moment locale
 moment.locale(i18n.language);
 
-export const onChangeLanguage = async (lang: string) => {
+export const onChangeLanguage = async (lang: Languages) => {
   await i18n.changeLanguage(lang);
   await setAsyncData(ASYNC_KEY.LANGUAGE, lang);
 };

package/template/src/screens/Home/index.tsx

@@ -4,7 +4,6 @@ import {TabNavigationWithAppStackScreenProps} from '@types';
 import {colors, perfectSize} from '@theme';
 import {fonts} from '@fonts';
 import {PrimaryButton, PrimaryText} from '@components';
-import {showSuccessMessage} from '@common';
 import {useTranslation} from 'react-i18next';
 import moment from 'moment';
 
@@ -14,22 +13,16 @@ const Home: FC<TabNavigationWithAppStackScreenProps<'Home'>> = ({
   const {t: translate} = useTranslation();
   return (
     <View style={styles.mainView}>
-      <PrimaryText style={styles.lblLoginScreen}>
+      <PrimaryText style={styles.lblHomeScreen}>
         {translate('homeScreen.homeScreen')}
       </PrimaryText>
-      <PrimaryText style={styles.lblLoginScreen}>
+      <PrimaryText style={styles.lblHomeScreen}>
         {moment().format('LLLL')}
       </PrimaryText>
       <PrimaryButton
         label={translate('homeScreen.openModalScreen')}
         onPress={() => navigation.navigate('ModalScreen')}
       />
-      <PrimaryButton
-        label={translate('homeScreen.showSuccessMessage')}
-        onPress={() => {
-          showSuccessMessage(translate('validations.testSuccess'));
-        }}
-      />
     </View>
   );
 };
@@ -44,7 +37,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     rowGap: perfectSize(20),
   },
-  lblLoginScreen: {
+  lblHomeScreen: {
     fontFamily: fonts.bold,
     fontSize: perfectSize(20),
   },