Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/BhushanBadhe39/SkinFirts/llms.txt

Use this file to discover all available pages before exploring further.

The Profile tab is the central hub for managing a patient’s account in SkinFirts. From here users can update personal information, control notification preferences, manage their password, review the privacy policy, and access help resources — all reachable through a consistent menu-driven navigation pattern.

​
ProfileScreen

ProfileScreen is the root of the profile section. It renders three main elements:
  1. Profile image — a circular avatar with an overlay edit button (pencil icon via RoundButtons)
  2. ProfileMenu — the scrollable list of navigation items and account actions
  3. LogoutModal — a bottom-sheet modal that appears when the user initiates logout
// ProfileScreen.jsx — core structure
const ProfileScreen = () => {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [logoutVisible, setLogoutVisible] = useState(false);

  const handleLogout = async () => {
    await logoutUser(dispatch);
    setLogoutVisible(false);
    navigation.dispatch(
      CommonActions.reset({ index: 0, routes: [{ name: 'Splash' }] })
    );
  };

  return (
    <View style={commonStyles.container}>
      <CustomHeader title='My Profile' />
      <View style={styles.profileImageHolder}>
        <Image source={require('../assets/images/ProfileImg2.png')} style={styles.profileImage} />
        <View style={styles.edit}>
          <RoundButtons iconName='pencil' size={scale(30)} color={colors.primary} />
        </View>
      </View>
      <ProfileMenu onLogout={() => setLogoutVisible(true)} />
      <LogoutModal
        visible={logoutVisible}
        onCancel={() => setLogoutVisible(false)}
        onConfirm={handleLogout}
      />
    </View>
  );
};

​
Profile Menu Items

ProfileMenu reads the logged-in user’s name from Redux state (state.user.user) and displays it above the menu list. The Profile and Favorite items are rendered as standalone MenuItem components with inline onPress handlers, while the remaining four items come from a menuList array rendered in a FlatList. The Logout row is also rendered outside the FlatList with arrow='none' to suppress the trailing chevron.
Menu ItemIconNavigates To
Profileperson-outlineEditProfile (passes user data as route param)
Favoriteheart-outlineHome → Doctors tab with selectedSort: 2
Payment Methodwallet-outlinePayment
Privacy Policylock-closed-outlinePrivacyPage
Settingssettings-outlineSettings
Helphelp-outlineHelp
Logoutlog-out-outlineOpens LogoutModal (no arrow rendered)

​
Edit Profile

The EditProfile screen allows patients to update their personal details. It receives the current user object through route.params.data and pre-populates a local formData state with the existing values. Editable fields: Full Name, Email, Mobile Number, Date of Birth. Tapping Update Profile calls editUserDetails, which sends a PATCH request to /users/:id, then updates both AsyncStorage and the Redux store on success before navigating back. 
// authService.js — editUserDetails
export const editUserDetails = async (id, updates, dispatch) => {
  try {
    const newUser = await updateUser(id, updates);    // PATCH /users/:id
    if (!newUser) return false;
    await AsyncStorage.setItem('@user_account_details', JSON.stringify(newUser));
    dispatch(setUser(newUser));
    return true;
  } catch (error) {
    console.log('Error');
  }
};
The handler in EditProfile calls editUserDetails(data.id, formData, dispatch) and, if it returns true, calls navigation.goBack().

​
Settings

The Settings screen presents a short FlatList of account-level actions, each rendered as a MenuItem row with iconBgc={colors.secondary}:
Setting ItemIconNavigates To
Notification Settingsbulb-outlineNotificationSetting
Password Managerkey-outlinePasswordManager
Delete Accountperson-outlinePayment

​
Notification Settings

The NotificationSetting screen provides toggle switches for eight individual notification categories. Each toggle is managed by a shared settings state object; toggling any switch flips its corresponding boolean value without affecting the others. All toggles start as false.
ToggleState Key
General NotificationgeneralNotification
Soundsound
Sound CallsoundCall
Vibratevibrate
Special OffersspecialOffers
Paymentspayments
Promo and DiscountpromoDiscount
Cashbackcashback
Each row pairs the toggle label with a CustomSwitch component and is rendered inside a FlatList.

​
Password Manager

The PasswordManager screen presents a straightforward password-change form with three PasswordBox fields:
  • Current Password
  • New Password
  • Confirm Password
A Forgot Password link is styled in the primary colour, right-aligned, and positioned between the Current Password field and the New Password field. There is no submit button — the screen is a UI prototype only.

​
Privacy Page

The PrivacyPage screen (PrivacyPage route) displays a privacy policy stub and a Terms & Conditions sub-section with four numbered clauses. The last-updated date shown at the top is 14/08/2024. Both the policy body and the numbered clauses are filled with placeholder lorem ipsum text in the current implementation — the content is static text rendered via Text components inside a padded View.
The privacy policy and Terms & Conditions text in PrivacyPage.jsx are lorem ipsum placeholder content. Real policy language has not yet been written into the app.

​
Help Center

The HelpCenter screen has a primary-coloured header that shows a “How Can We Help You?” heading and a search bar ('Search...' placeholder). Below the header, two tab buttons — FAQ and Contact Us — toggle the active view via a primaryState boolean.
  • FAQ tab — renders the Faq component, which provides three topic filter buttons (Popular Topic, General, Services) and an accordion list of five questions/answers powered by accordion-collapse-react-native. Each accordion item uses Collapse, CollapseHeader, and CollapseBody with a chevron-down-outline indicator. The questions and answers in Faq.jsx are currently lorem ipsum placeholder text.
  • Contact Us tab — renders the ContactUs component, which lists five contact channels as MenuItem rows using a chevron-down-outline arrow (not the default forward chevron):
ChannelIcon
Customer Serviceheadset-outline
Websiteglobe-outline
WhatsApplogo-whatsapp
FaceBooklogo-facebook
Instagramlogo-instagram

​
Logout Flow

1

Tap Logout in ProfileMenu

The Logout MenuItem in ProfileMenu has no navigation redirect. Instead it calls the onLogout prop, which sets logoutVisible to true in ProfileScreen state, causing the LogoutModal bottom sheet to slide up.
2

Confirm in LogoutModal

LogoutModal is a transparent Modal with animationType='slide'. It presents a title “Logout”, the body text “Are you sure you want to logout?”, and two buttons — Cancel (dismisses the modal, styled with colors.shade background) and Yes, Logout (calls onConfirm). The onConfirm handler in ProfileScreen is handleLogout.
3

logoutUser clears session data

handleLogout calls logoutUser(dispatch), which removes the persisted user record from AsyncStorage and dispatches clearUser() to reset the Redux user slice.
// authService.js — logoutUser
export const logoutUser = async (dispatch) => {
  await AsyncStorage.removeItem('@user_account_details');
  dispatch(clearUser());
};
4

Navigation reset to Splash

After logoutUser resolves, handleLogout calls navigation.dispatch(CommonActions.reset(...)) with routes: [{ name: 'Splash' }]. This replaces the entire navigation stack so the user cannot navigate back to authenticated screens via the back button.
MenuItem is the foundational building block used throughout the Profile section — in ProfileMenu, Settings, ContactUs, and anywhere a tappable row with an icon, label, and optional arrow is needed. 
// MenuItem.jsx — component signature
// props: { name, iconName, arrow, arrowColor, redirect, navigation, marginBottom, iconBgc, onPress }

const MenuItem = ({ arrow = 'chevron-forward-outline', arrowColor = colors.shade, ...props }) => {
  const navigation = useNavigation();
  return (
    <Pressable
      style={styles.MenuItem}
      onPress={props.onPress ? props.onPress : () => navigation.navigate(props.redirect)}>
      <RoundButtons iconName={props.iconName} size={scale(40)} color={colors.primary} bgc={props.iconBgc} />
      <Text style={commonStyles.profileTextRegular}>{props.name}</Text>
      {arrow !== 'none' && <Ionicons name={arrow} size={scale(28)} color={arrowColor} />}
    </Pressable>
  );
};
MenuItem supports two navigation modes: pass a redirect string to use navigation.navigate(redirect) automatically, or pass an onPress function to handle custom behaviour (like opening a modal). Setting arrow='none' suppresses the trailing chevron, as used for the Logout row. This makes MenuItem highly reusable — new profile menu entries only require a name, an Ionicons icon name, and a destination route.

Build docs developers (and LLMs) love

Get started for freeTalk to us