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

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

@@ -1,33 +1,86 @@
-import {StyleSheet, View} from 'react-native';
-import React, {FC} from 'react';
+import React, {FC, useState} from 'react';
+import {StyleSheet} from 'react-native';
 import {AuthStackScreenProps} from '@types';
 import {colors, perfectSize} from '@theme';
-import {PrimaryButton, PrimaryText} from '@components';
+import {
+  Container,
+  PrimaryButton,
+  PrimaryText,
+  PrimaryTextInput,
+} from '@components';
 import {fonts} from '@fonts';
-import {showDangerMessage} from '@common';
+import {prettyPrint, showDangerMessage, showSuccessMessage} from '@common';
 import {useTranslation} from 'react-i18next';
 import {dispatch, initialState, setUserData} from '@appRedux';
+import {loginService} from '@services';
+import {isEmail, isEmpty} from 'validator';
 
 const LogIn: FC<AuthStackScreenProps<'LogIn'>> = ({navigation}) => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [isBtnLoading, setIsBtnLoading] = useState<boolean>(false);
+
   const {t: translate} = useTranslation();
+  const handleLogin = async () => {
+    if (isEmpty(email)) {
+      showDangerMessage(translate('validations.email'));
+    } else if (!isEmail(email)) {
+      showDangerMessage(translate('validations.validEmail'));
+    } else if (isEmpty(password)) {
+      showDangerMessage(translate('validations.password'));
+    } else {
+      setIsBtnLoading(true);
+      setTimeout(() => {
+        setIsBtnLoading(false);
+        showSuccessMessage(translate('messages.loginSuccessful'));
+        dispatch(setUserData(initialState.userData));
+      }, 5000);
+
+      // This is the api calling function for yours reference how to call api
+
+      // const res = await loginService({
+      //   email: email,
+      //   password: password,
+      // });
+      // setIsBtnLoading(false);
+      // if (res.success && res.data) {
+      //   dispatch(setUserData(res.data.user));
+      //   showSuccessMessage('Login successful!');
+      // } else {
+      //   prettyPrint({res});
+      //   // showDangerMessage(res.message);
+      // }
+    }
+  };
+
   return (
-    <View style={styles.mainView}>
+    <Container
+      padding={perfectSize(20)}
+      style={styles.mainView}
+      backgroundColor={colors.white}>
       <PrimaryText style={styles.lblLoginScreen}>
-        {translate('loginScreen.loginScreen')}
+        {translate('loginScreen.logIn')}
       </PrimaryText>
-      <PrimaryButton
-        label={translate('loginScreen.login')}
-        onPress={() => {
-          dispatch(setUserData(initialState.userData));
-        }}
+      <PrimaryTextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+      />
+      <PrimaryTextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        isPassword
       />
       <PrimaryButton
-        label={translate('loginScreen.showErrorMessage')}
+        label={translate('loginScreen.login')}
         onPress={() => {
-          showDangerMessage(translate('validations.testError'));
+          handleLogin();
         }}
+        loading={isBtnLoading}
       />
-    </View>
+    </Container>
   );
 };
 
@@ -36,12 +89,11 @@ export default LogIn;
 const styles = StyleSheet.create({
   mainView: {
     flex: 1,
-    backgroundColor: colors.white,
-    justifyContent: 'center',
-    alignItems: 'center',
     rowGap: perfectSize(20),
   },
   lblLoginScreen: {
+    marginTop: perfectSize(60),
+    alignSelf: 'center',
     fontFamily: fonts.bold,
     fontSize: perfectSize(20),
   },

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

@@ -1,4 +1,4 @@
-import {Pressable, StyleSheet, Text} from 'react-native';
+import {Pressable, StyleSheet} from 'react-native';
 import React, {FC} from 'react';
 import {AppStackScreenProps} from '@types';
 import {colors, perfectSize} from '@theme';

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

@@ -6,6 +6,7 @@ import {fonts} from '@fonts';
 import {PrimaryButton, PrimaryText} from '@components';
 import {useTranslation} from 'react-i18next';
 import {dispatch, resetUserData, setLanguage} from '@appRedux';
+import {showSuccessMessage} from '@common';
 
 const Profile: FC<TabNavigationWithAppStackScreenProps<'Profile'>> = ({
   navigation,
@@ -30,13 +31,17 @@ const Profile: FC<TabNavigationWithAppStackScreenProps<'Profile'>> = ({
           text: translate('languages.es'),
           onPress: async () => dispatch(setLanguage('es')),
         },
+        {
+          text: translate('languages.hi'),
+          onPress: async () => dispatch(setLanguage('hi')),
+        },
       ],
     );
   };
 
   return (
     <View style={styles.mainView}>
-      <PrimaryText style={styles.lblLoginScreen}>
+      <PrimaryText style={styles.lblProfileScreen}>
         {translate('profileScreen.profileScreen')}
       </PrimaryText>
       <PrimaryButton
@@ -45,7 +50,10 @@ const Profile: FC<TabNavigationWithAppStackScreenProps<'Profile'>> = ({
       />
       <PrimaryButton
         label={translate('profileScreen.logout')}
-        onPress={() => dispatch(resetUserData())}
+        onPress={() => {
+          dispatch(resetUserData());
+          showSuccessMessage(translate('messages.logoutSuccessful'));
+        }}
       />
     </View>
   );
@@ -61,7 +69,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     rowGap: perfectSize(20),
   },
-  lblLoginScreen: {
+  lblProfileScreen: {
     fontFamily: fonts.bold,
     fontSize: perfectSize(20),
   },

package/template/src/services/authService.ts

@@ -0,0 +1,23 @@
+// ─────────────────────────────────────────────────────
+// AUTH SERVICE
+// All authentication-related API calls live here.
+// ─────────────────────────────────────────────────────
+
+import {apiPost, endPoints} from '@api';
+import {ApiResponseType, LoginPayload, LoginResponse} from '@types';
+import {getDetailForAPI} from '@common';
+
+// ── API Calls ───────────────────────────────────────
+
+/**
+ * Login user with email & password
+ */
+export const loginService = async (
+  payload: LoginPayload,
+): Promise<ApiResponseType<LoginResponse>> => {
+  const deviceInfo = getDetailForAPI();
+  return apiPost<LoginResponse>(endPoints.auth.login, {
+    ...payload,
+    ...deviceInfo,
+  });
+};

package/template/src/services/index.ts

@@ -0,0 +1 @@
+export * from './authService';

package/template/src/types/index.ts

@@ -5,34 +5,68 @@ import {
 } from '@react-navigation/native';
 import {NativeStackScreenProps} from '@react-navigation/native-stack';
 
+/**
+ * Authentication stack routes
+ * Used for screens before user login/authentication
+ */
 export type AuthStackParamList = {
   LogIn: undefined;
 };
 
+/**
+ * Main application stack routes
+ * Contains app-level screens and nested navigators
+ */
 export type AppStackParamList = {
   // https://reactnavigation.org/docs/typescript#nesting-navigators
   TabNavigation?: NavigatorScreenParams<TabScreenRouteProp>;
   ModalScreen: undefined;
 };
 
+/**
+ * Bottom tab navigator routes
+ */
 export type TabScreenRouteProp = {
   Home: undefined;
   Profile: undefined;
 };
 
-// Auth stack screen props — for screens inside AuthStack (e.g. LogIn)
+/**
+ * Screen props type for Auth stack screens
+ *
+ * Example:
+ * type Props = AuthStackScreenProps<'LogIn'>
+ */
 export type AuthStackScreenProps<T extends keyof AuthStackParamList> =
   NativeStackScreenProps<AuthStackParamList, T>;
 
-// App stack screen props — for screens inside AppStack (e.g. ModalScreen)
+/**
+ * Screen props type for App stack screens
+ *
+ * Example:
+ * type Props = AppStackScreenProps<'ModalScreen'>
+ */
 export type AppStackScreenProps<T extends keyof AppStackParamList> =
   NativeStackScreenProps<AppStackParamList, T>;
 
-// Tab screen props — for screens inside TabNavigator
+/**
+ * Screen props type for Bottom Tab screens
+ *
+ * Example:
+ * type Props = TabNavigationScreenProps<'Home'>
+ */
 export type TabNavigationScreenProps<T extends keyof TabScreenRouteProp> =
   BottomTabScreenProps<TabScreenRouteProp, T>;
 
-// Composite props — for tab screens that also need to navigate to AppStack screens
+/**
+ * Combined screen props type
+ *
+ * Used when a Tab screen also needs access
+ * to AppStack navigation methods/screens
+ *
+ * Example:
+ * type Props = TabNavigationWithAppStackScreenProps<'Home'>
+ */
 export type TabNavigationWithAppStackScreenProps<
   T extends keyof TabScreenRouteProp,
 > = CompositeScreenProps<
@@ -40,6 +74,10 @@ export type TabNavigationWithAppStackScreenProps<
   NativeStackScreenProps<AppStackParamList, keyof AppStackParamList>
 >;
 
+/**
+ * User model type
+ * Represents logged-in user data received from API
+ */
 export type UserTypes = {
   _id: string;
   user_name: string;
@@ -57,8 +95,36 @@ export type UserTypes = {
   token: string;
 };
 
-export type ResponseType<Data = any> = {
-  data?: Data;
+/**
+ * User Language type
+ * Represents user selected language
+ */
+export type Languages = 'en' | 'es' | 'hi';
+
+/**
+ * Common API response structure
+ *
+ * @template Data - Expected response data type
+ */
+export type ApiResponseType<Data = any> = {
+  success: boolean;
+  data?: Data | null;
   status: number;
   message: string;
 };
+
+/**
+ * Login API request payload
+ */
+export interface LoginPayload {
+  email: string;
+  password: string;
+}
+
+/**
+ * Login API response data
+ */
+export interface LoginResponse {
+  user: UserTypes;
+  token: string;
+}