@fadyshawky/react-native-magic 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.7] - 2024-12-27
+
+### Changed
+- Enhanced UI components for better user experience:
+  - Improved form input styling
+  - Updated button states for better feedback
+  - Refined error message displays
+  - Added loading spinners for async actions
+  - Standardized form layouts across authentication flows
+
+### Added
+- Responsive design improvements for mobile devices
+- Visual feedback for form validation states
+- Transition animations for state changes
+- Consistent error message styling
+
+## [1.0.6] - 2024-12-25
+
+### Added
+- Added missing password reset handlers (`resetPasswordErrorHandler` and `resetPasswordLoadingHandler`) to user slice
+- Added password reset flow with the following states:
+  - Loading state during password reset request
+  - Error handling for failed password reset attempts
+  - Success handling for completed password reset
+- Added complete user registration flow:
+  - User input validation
+  - Registration request handling
+  - Success state with automatic login
+  - Error handling for failed registration attempts
+  - Loading states during registration process
+
+### Fixed
+- Fixed password reset error handling in user slice
+- Resolved undefined handler errors in password reset flow
+- Improved registration flow error handling
+
 ## [1.0.5] - 2024-12-23
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
   "keywords": [
     "react-native-magic",

package/template/src/common/components/PrimaryButton.tsx

@@ -16,7 +16,7 @@ import {
   IIconPlatformProps,
   TouchablePlatformProps,
 } from '../../../types';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {IconPlatform} from './IconPlatform';
@@ -203,7 +203,7 @@ const commonIcon: ImageStyle = {
 const solidStyles = StyleSheet.create({
   button: {
     ...commonButtonStyle,
-    backgroundColor: Colors.primary100,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
   label: {
     ...commonLabelStyle,
@@ -217,12 +217,12 @@ const solidStyles = StyleSheet.create({
 const outlineStyles = StyleSheet.create({
   button: {
     ...commonButtonStyle,
-    borderColor: Colors.primary100,
+    borderColor: NewColors.blueNormalActive,
     borderWidth: 2,
   } as ViewStyle,
   label: {
     ...commonLabelStyle,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
   } as TextStyle,
   icon: {
     ...commonIcon,
@@ -255,7 +255,7 @@ const borderlessStyles = StyleSheet.create({
   } as ViewStyle,
   label: {
     ...commonLabelStyle,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textDecorationLine: 'underline',
   } as TextStyle,
   icon: {
@@ -278,7 +278,7 @@ const roundedButtonStyle: ViewStyle = {
 const smallSolidStyles = StyleSheet.create({
   button: {
     ...roundedButtonStyle,
-    backgroundColor: Colors.primary100,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
   label: {
     ...CommonStyles.normalText,

package/template/src/common/components/PrimaryTextInput.tsx

@@ -21,7 +21,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {isIos} from '../../core/theme/commonConsts';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
@@ -192,7 +192,7 @@ function getInputContainerStyle(
   }
 }
 
-const selectionColor = Colors.primary100;
+const selectionColor = NewColors.blueNormalActive;
 
 const commonInputContainer: TextStyle = {
   flexDirection: 'row',

package/template/src/common/components/RadioIcon.tsx

@@ -1,6 +1,6 @@
 import React, {FC, memo, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 
 interface IProps {
   isSelected: boolean;
@@ -42,14 +42,14 @@ const commonInnerCircle: ViewStyle = {
 const styles = StyleSheet.create({
   outerCircle: {
     ...commonOuterCircle,
-    borderColor: Colors.primary100,
+    borderColor: NewColors.blueNormalActive,
   } as ViewStyle,
   outerCircleSelected: {
     ...commonOuterCircle,
-    borderColor: Colors.primary100,
+    borderColor: NewColors.blueNormalActive,
   } as ViewStyle,
   innerCircle: {
     ...commonInnerCircle,
-    backgroundColor: Colors.primary100,
+    backgroundColor: NewColors.blueNormalActive,
   } as ViewStyle,
 });

package/template/src/common/components/TryAgain.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

package/template/src/common/localization/translations/loginLocalization.ts

@@ -6,9 +6,25 @@ export const loginLocalization = {
     EnterEmail: 'Enter email',
     Password: 'Password',
     EnterPassword: 'Enter password',
-    forgetPassword: 'Forget Password',
+    forgetPassword: 'Forgot Password?',
     continue: 'continue',
-    notMember: 'not a member yet?',
+    notMember: 'Not a member? Register now',
     findNursery: 'Find nursery',
+    registration: {
+      title: 'Create Account',
+      fullName: 'Full Name',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm Password',
+      register: 'Register',
+      alreadyHaveAccount: 'Already have an account? Login',
+    },
+    forgotPassword: {
+      title: 'Forgot Password',
+      description:
+        "Enter your email address and we'll send you instructions to reset your password.",
+      resetPassword: 'Reset Password',
+      backToLogin: 'Back to Login',
+    },
   },
 };

package/template/src/core/store/user/userActions.ts

@@ -25,3 +25,50 @@ export const userLogin = createAsyncThunk(
     }
   },
 );
+
+export const userRegister = createAsyncThunk(
+  'user/register',
+  async (
+    {
+      fullName,
+      email,
+      password,
+    }: {
+      fullName: string;
+      email: string;
+      password: string;
+    },
+    {rejectWithValue},
+  ) => {
+    try {
+      const response = await post({
+        url: '/register',
+        data: {
+          fullName,
+          email,
+          password,
+        },
+      });
+
+      return handleFetchJsonResponse(response);
+    } catch (e: any) {
+      return rejectWithValue(e?.response);
+    }
+  },
+);
+
+export const resetPassword = createAsyncThunk(
+  'user/resetPassword',
+  async ({email}: {email: string}, {rejectWithValue}) => {
+    try {
+      const response = await post({
+        url: '/reset-password',
+        data: {email},
+      });
+
+      return handleFetchJsonResponse(response);
+    } catch (e: any) {
+      return rejectWithValue(e?.response);
+    }
+  },
+);

package/template/src/core/store/user/userSlice.ts

@@ -2,7 +2,7 @@ import {createSlice} from '@reduxjs/toolkit';
 import {LoadState} from '../../../../types';
 import {newState} from '../../../common/utils/newState';
 import {handleErrorResponse} from '../../api/responseHandlers';
-import {userLogin} from './userActions';
+import {resetPassword, userLogin, userRegister} from './userActions';
 import {UserInitialState, UserPayload, UserState} from './userState';
 
 function loginHandler(state: UserState, payload: {payload: UserPayload}) {
@@ -32,6 +32,47 @@ function logoutHandler(state: UserState) {
   return newState(state, UserInitialState);
 }
 
+function resetPasswordHandler(
+  state: UserState,
+  payload: {payload: UserPayload},
+) {
+  return newState(state, {
+    user: payload.payload.user,
+    accessToken: payload.payload.token,
+    loginLoading: LoadState['allIsLoaded'],
+  });
+}
+
+function resetPasswordLoadingHandler(state: UserState) {
+  return newState(state, {
+    loginLoading: LoadState['pullToRefresh'],
+  });
+}
+
+function registerHandler(state: UserState, payload: {payload: UserPayload}) {
+  return newState(state, {
+    user: payload.payload.user,
+    accessToken: payload.payload.token,
+    loginLoading: LoadState['allIsLoaded'],
+  });
+}
+
+function registerLoadingHandler(state: UserState) {
+  return newState(state, {
+    loginLoading: LoadState['pullToRefresh'],
+  });
+}
+
+function registerErrorHandler(
+  state: UserState,
+  payload: {payload: string | unknown},
+) {
+  handleErrorResponse((payload.payload as string) || 'Register failed');
+  return newState(state, {
+    loginLoading: LoadState['error'],
+  });
+}
+
 function updateHandler(state: UserState, payload: any) {
   return newState(state, {
     user: {
@@ -41,6 +82,16 @@ function updateHandler(state: UserState, payload: any) {
   });
 }
 
+function resetPasswordErrorHandler(
+  state: UserState,
+  payload: {payload: string | unknown},
+) {
+  handleErrorResponse((payload.payload as string) || 'Password reset failed');
+  return newState(state, {
+    loginLoading: LoadState['error'],
+  });
+}
+
 export const {reducer: UserReducer, actions} = createSlice({
   name: 'user',
   initialState: UserInitialState,
@@ -55,7 +106,13 @@ export const {reducer: UserReducer, actions} = createSlice({
     builder
       .addCase(userLogin.fulfilled, loginHandler)
       .addCase(userLogin.rejected, loginErrorHandler)
-      .addCase(userLogin.pending, loginLoadingHandler);
+      .addCase(userLogin.pending, loginLoadingHandler)
+      .addCase(resetPassword.fulfilled, resetPasswordHandler)
+      .addCase(resetPassword.rejected, resetPasswordErrorHandler)
+      .addCase(resetPassword.pending, resetPasswordLoadingHandler)
+      .addCase(userRegister.fulfilled, registerHandler)
+      .addCase(userRegister.rejected, registerErrorHandler)
+      .addCase(userRegister.pending, registerLoadingHandler);
   },
 });
 

package/template/src/navigation/AuthStack.tsx

@@ -1,6 +1,8 @@
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {Login} from '../screens/Login/Login';
 import {Splash} from '../screens/splash/Splash';
+import RegistrationScreen from '../screens/registration/RegistrationScreen';
+import ForgotPasswordScreen from '../screens/resetPassword/ForgotPasswordScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -19,6 +21,20 @@ const AuthScreens = [
       headerShown: false,
     },
   },
+  {
+    id: 'Registration',
+    component: RegistrationScreen,
+    options: {
+      headerShown: false,
+    },
+  },
+  {
+    id: 'ForgotPassword',
+    component: ForgotPasswordScreen,
+    options: {
+      headerShown: false,
+    },
+  },
 ];
 
 export function AuthStack() {

package/template/src/navigation/MainNavigation.tsx

@@ -27,24 +27,7 @@ function AppNavigator() {
           border: '#000',
           notification: '#ff0000',
         },
-        fonts: {
-          regular: {
-            fontFamily: Fonts.regular,
-            fontWeight: 'normal',
-          },
-          medium: {
-            fontFamily: Fonts.medium,
-            fontWeight: '500',
-          },
-          bold: {
-            fontFamily: Fonts.bold,
-            fontWeight: '700',
-          },
-          heavy: {
-            fontFamily: Fonts.bold,
-            fontWeight: '900',
-          },
-        },
+        fonts: DefaultTheme.fonts,
       }}
       onReady={() => {
         routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;

package/template/src/navigation/TabBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
 import {CommonStyles} from '../core/theme/commonStyles';
-import {Colors} from '../core/theme/colors';
+import {Colors, NewColors} from '../core/theme/colors';
 import {
   BottomTabBarProps,
   BottomTabNavigationOptions,
@@ -89,6 +89,6 @@ const styles = StyleSheet.create({
     color: Colors.gray,
   },
   labelFocused: {
-    color: Colors.primary100,
+    color: NewColors.blueNormalActive,
   },
 });

package/template/src/navigation/types.ts

@@ -1,5 +1,11 @@
 export type RootStackParamList = {
   Home: undefined;
   Details: {id: string};
-  // ... add other screens as needed
+  Login: undefined;
+  Registration: undefined;
+  ForgotPassword: undefined;
+  Main: undefined;
+  Profile: undefined;
+  Settings: undefined;
+  Splash: undefined;
 };

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

@@ -1,30 +1,54 @@
+import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
 import {toLower} from 'lodash';
 import React, {useRef, useState} from 'react';
 import {
+  findNodeHandle,
   NativeSyntheticEvent,
   StyleSheet,
   Text,
   TextInputFocusEventData,
-  findNodeHandle,
 } from 'react-native';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {ButtonType} from '../../../types';
 import {PrimaryButton} from '../../common/components/PrimaryButton';
 import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
 import {localization} from '../../common/localization/localization';
+import {emptyValidation} from '../../common/validations/commonValidations';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {emailValidations} from '../../common/validations/profileValidations';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 import {userLogin} from '../../core/store/user/userActions';
-import {Colors} from '../../core/theme/colors';
+import {Colors, NewColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
+import type {RootStackParamList} from '../../navigation/types';
 
 export function Login(): JSX.Element {
   const dispatch = useAppDispatch();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+
+  const {error: emailError, recheckValue: recheckEmail} = useInputError(
+    email,
+    emailValidations,
+  );
+  const {error: passwordError, recheckValue: recheckPassword} = useInputError(
+    password,
+    emptyValidation,
+  );
 
   async function loginUser() {
+    const emailValid = recheckEmail() === null;
+    const passwordValid = recheckPassword() === null;
+
+    if (!emailValid || !passwordValid) {
+      return;
+    }
+
     setLoading(true);
     await dispatch(
       userLogin({
@@ -32,7 +56,6 @@ export function Login(): JSX.Element {
         password,
       }),
     );
-
     setLoading(false);
   }
   const scroll = useRef<KeyboardAwareScrollView>(null);
@@ -43,6 +66,15 @@ export function Login(): JSX.Element {
     scroll.current?.scrollToFocusedInput(reactNode);
     // }, 500);
   }
+
+  const goToRegistration = () => {
+    navigation.navigate('Registration');
+  };
+
+  const goToForgotPassword = () => {
+    navigation.navigate('ForgotPassword');
+  };
+
   return (
     <KeyboardAwareScrollView
       ref={scroll}
@@ -64,6 +96,7 @@ export function Login(): JSX.Element {
         containerStyle={CommonStyles.textInputContainer}
         label={localization.login.Email}
         placeholder={localization.login.EnterEmail}
+        error={emailError}
       />
       <PrimaryTextInput
         onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -76,6 +109,12 @@ export function Login(): JSX.Element {
         containerStyle={CommonStyles.textInputContainer}
         label={localization.login.Password}
         placeholder={localization.login.EnterPassword}
+        error={passwordError}
+      />
+      <PrimaryButton
+        onPress={goToForgotPassword}
+        label={localization.login.forgetPassword}
+        type={ButtonType.borderless}
       />
       <PrimaryButton
         isLoading={loading}
@@ -83,6 +122,11 @@ export function Login(): JSX.Element {
         label={localization.login.continue}
         type={ButtonType.solid}
       />
+      <PrimaryButton
+        onPress={goToRegistration}
+        label={localization.login.notMember}
+        type={ButtonType.borderless}
+      />
     </KeyboardAwareScrollView>
   );
 }
@@ -105,4 +149,17 @@ const styles = StyleSheet.create({
     paddingVertical: 26,
     gap: 16,
   },
+  forgotPassword: {
+    ...CommonStyles.normalText,
+    color: NewColors.blueNormalActive,
+    textAlign: 'right',
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  registerLink: {
+    ...CommonStyles.normalText,
+    color: NewColors.blueNormalActive,
+    textAlign: 'center',
+    marginTop: 16,
+  },
 });

package/template/src/screens/registration/RegistrationScreen.tsx

@@ -0,0 +1,198 @@
+import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  Text,
+  TextInputFocusEventData,
+  findNodeHandle,
+} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
+import {localization} from '../../common/localization/localization';
+import {emptyValidation} from '../../common/validations/commonValidations';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {
+  emailValidations,
+  fullNameValidations,
+} from '../../common/validations/profileValidations';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {userRegister} from '../../core/store/user/userActions';
+import {Colors, NewColors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import type {RootStackParamList} from '../../navigation/types';
+
+export default function RegistrationScreen(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+
+  // Add validation hooks
+  const {error: fullNameError, recheckValue: recheckFullName} = useInputError(
+    formData.fullName,
+    fullNameValidations,
+  );
+  const {error: emailError, recheckValue: recheckEmail} = useInputError(
+    formData.email,
+    emailValidations,
+  );
+  const {error: passwordError, recheckValue: recheckPassword} = useInputError(
+    formData.password,
+    emptyValidation,
+  );
+  const {error: confirmPasswordError, recheckValue: recheckConfirmPassword} =
+    useInputError(formData.confirmPassword, emptyValidation);
+
+  function scrollToInput(reactNode: any) {
+    scroll.current?.scrollToFocusedInput(reactNode);
+  }
+
+  async function handleRegistration() {
+    // Validate all fields
+    const isFullNameValid = recheckFullName() === null;
+    const isEmailValid = recheckEmail() === null;
+    const isPasswordValid = recheckPassword() === null;
+    const isConfirmPasswordValid = recheckConfirmPassword() === null;
+
+    if (
+      !isFullNameValid ||
+      !isEmailValid ||
+      !isPasswordValid ||
+      !isConfirmPasswordValid
+    ) {
+      return;
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      // Add error handling for password mismatch
+      return;
+    }
+
+    setLoading(true);
+    await dispatch(
+      userRegister({
+        fullName: formData.fullName,
+        email: formData.email.toLowerCase(),
+        password: formData.password,
+      }),
+    );
+    setLoading(false);
+  }
+
+  const goToLogin = () => {
+    navigation.navigate('Login');
+  };
+
+  return (
+    <KeyboardAwareScrollView
+      ref={scroll}
+      resetScrollToCoords={{x: 0, y: 0}}
+      scrollEnabled={true}
+      enableOnAndroid={true}
+      contentContainerStyle={styles.contentContainer}
+      contentInsetAdjustmentBehavior={'automatic'}
+      style={styles.container}>
+      <Text style={CommonStyles.h1_semiBold}>
+        {localization.login.registration.title}
+      </Text>
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        value={formData.fullName}
+        onChangeText={text => setFormData({...formData, fullName: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.fullName}
+        placeholder={localization.login.registration.fullName}
+        error={fullNameError}
+      />
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        autoCapitalize="none"
+        value={formData.email}
+        onChangeText={text => setFormData({...formData, email: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.email}
+        placeholder={localization.login.EnterEmail}
+        error={emailError}
+      />
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        secureTextEntry
+        value={formData.password}
+        onChangeText={text => setFormData({...formData, password: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.password}
+        placeholder={localization.login.EnterPassword}
+        error={passwordError}
+      />
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        secureTextEntry
+        value={formData.confirmPassword}
+        onChangeText={text => setFormData({...formData, confirmPassword: text})}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.registration.confirmPassword}
+        placeholder={localization.login.registration.confirmPassword}
+        error={confirmPasswordError}
+      />
+
+      <PrimaryButton
+        isLoading={loading}
+        onPress={handleRegistration}
+        label={localization.login.registration.register}
+        type={ButtonType.solid}
+      />
+      <PrimaryButton
+        onPress={goToLogin}
+        label={localization.login.registration.alreadyHaveAccount}
+        type={ButtonType.borderless}
+      />
+    </KeyboardAwareScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: Colors.white,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingVertical: 26,
+    gap: 16,
+  },
+  loginLink: {
+    ...CommonStyles.normalText,
+    color: NewColors.blueNormalActive,
+    textAlign: 'center',
+    marginTop: 16,
+  },
+});

package/template/src/screens/resetPassword/ForgotPasswordScreen.tsx

@@ -0,0 +1,129 @@
+import {useNavigation} from '@react-navigation/native';
+import type {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import React, {useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  Text,
+  TextInputFocusEventData,
+  findNodeHandle,
+} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
+import {localization} from '../../common/localization/localization';
+import {useInputError} from '../../common/validations/hooks/useInputError';
+import {emailValidations} from '../../common/validations/profileValidations';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {resetPassword} from '../../core/store/user/userActions';
+import {Colors, NewColors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+import type {RootStackParamList} from '../../navigation/types';
+
+export default function ForgotPasswordScreen(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+
+  const {error: emailError, recheckValue: recheckEmail} = useInputError(
+    email,
+    emailValidations,
+  );
+
+  function scrollToInput(reactNode: any) {
+    scroll.current?.scrollToFocusedInput(reactNode);
+  }
+
+  async function handleResetPassword() {
+    const isEmailValid = recheckEmail() === null;
+    if (!isEmailValid) {
+      return;
+    }
+
+    setLoading(true);
+    await dispatch(resetPassword({email: email.toLowerCase()}));
+    setLoading(false);
+  }
+
+  const goToLogin = () => {
+    navigation.navigate('Login');
+  };
+
+  return (
+    <KeyboardAwareScrollView
+      ref={scroll}
+      resetScrollToCoords={{x: 0, y: 0}}
+      scrollEnabled={true}
+      enableOnAndroid={true}
+      contentContainerStyle={styles.contentContainer}
+      contentInsetAdjustmentBehavior={'automatic'}
+      style={styles.container}>
+      <Text style={CommonStyles.h1_semiBold}>
+        {localization.login.forgotPassword.title}
+      </Text>
+
+      <Text style={styles.description}>
+        {localization.login.forgotPassword.description}
+      </Text>
+
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        autoCapitalize="none"
+        value={email}
+        onChangeText={setEmail}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.Email}
+        placeholder={localization.login.EnterEmail}
+        error={emailError}
+      />
+
+      <PrimaryButton
+        isLoading={loading}
+        onPress={handleResetPassword}
+        label={localization.login.forgotPassword.resetPassword}
+        type={ButtonType.solid}
+      />
+
+      <PrimaryButton
+        onPress={goToLogin}
+        label={localization.login.forgotPassword.backToLogin}
+        type={ButtonType.borderless}
+      />
+    </KeyboardAwareScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    backgroundColor: Colors.white,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingVertical: 26,
+    gap: 16,
+  },
+  description: {
+    ...CommonStyles.normalText,
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  loginLink: {
+    ...CommonStyles.normalText,
+    color: NewColors.blueNormalActive,
+    textAlign: 'center',
+    marginTop: 16,
+  },
+});