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.

SkinFirts uses React Navigation to manage all in-app routing. The entire screen hierarchy is rooted in a single NavigationContainer rendered by StackNavigator, which creates a native-stack navigator set to open on the Splash screen. From there, authenticated users are directed into MainTabs — a floating bottom tab bar — while auth-flow screens (Register, Login, SignUp, SetPassword) and utility screens (profile settings, payments) live at the root stack level so they can be reached from anywhere in the app without nesting concerns. The full tree from container to leaf screen is laid out below. 
NavigationContainer
└── StackNavigator  (NativeStack, initialRouteName="Splash")
    ├── Splash
    ├── Register
    ├── Login
    ├── SignUp
    ├── SetPassword
    ├── Home
    ├── MainTabs  ──────────────────────────────────────────┐
    │                                                        │  TabNavigator (Bottom Tabs)
    │   ├── Home tab   → DoctorStackNavigator (NativeStack) │
    │   │     ├── Home                                       │
    │   │     ├── Doctors                                    │
    │   │     ├── DoctorInfo                                 │
    │   │     ├── Notifications                              │
    │   │     ├── Schedule                                   │
    │   │     └── ScheduleDetail                             │
    │   │                                                    │
    │   ├── Chat tab   → ChatScreen                          │
    │   │                                                    │
    │   ├── Profile tab → ProfileScreen                      │
    │   │                                                    │
    │   └── Appointment tab → AppointmentStackNavigator      │
    │         ├── Appointment                                │
    │         ├── CancelAppointment                          │
    │         └── ReviewAppointment    ─────────────────────┘
    │
    ├── EditProfile / Favorites
    ├── Settings
    ├── NotificationSetting
    ├── PasswordManager
    ├── PrivacyPage
    ├── Help
    ├── Payment
    ├── AddPaymentCard
    ├── PaymentSummary
    └── PaymentConfirmation

​
Root Stack — StackNavigator

StackNavigator wraps NavigationContainer and acts as the single entry point for the whole app. All screens are defined in a screens array that is mapped to Stack.Screen elements at render time, keeping the JSX compact. Global screenOptions disable the default header (headerShown: false) so each individual screen can mount its own CustomHeader component with full control over appearance. 
// src/navigation/StackNavigator.jsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
// ... screen imports

const Stack = createNativeStackNavigator();

const screens = [
  { name: "Splash",               component: SplashScreen },
  { name: "MainTabs",             component: TabNavigator },
  { name: "Register",             component: Register },
  { name: "Login",                component: Login1 },
  { name: "SignUp",               component: SignUp },
  { name: "SetPassword",          component: SetPassword },
  { name: "Home",                 component: HomeScreen },
  { name: "EditProfile",          component: EditProfile },
  { name: "Favorites",            component: EditProfile },
  { name: "Payment",              component: PaymentMethod },
  { name: "AddPaymentCard",       component: AddPaymentCard },
  { name: "PaymentSummary",       component: PaymentSummary },
  { name: "PaymentConfirmation",  component: PaymentConfirmation },
  { name: "PrivacyPage",          component: PrivacyPage },
  { name: "Settings",             component: Settings },
  { name: "Help",                 component: HelpCenter },
  { name: "NotificationSetting",  component: NotificationSetting },
  { name: "PasswordManager",      component: PasswordManager },
];

const StackNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName='Splash'
        screenOptions={{
          headerStyle: { backgroundColor: colors.secondary },
          headerTintColor: colors.primary,
          headerTitleStyle: { fontFamily: fontFamilies.bold, fontSize: fonts.md },
          headerTitleAlign: 'center',
          contentStyle: { backgroundColor: colors.secondary },
          headerShadowVisible: false,
          headerShown: false,
        }}>
        {screens.map((screen) => (
          <Stack.Screen
            key={screen.name}
            name={screen.name}
            component={screen.component}
            options={screen.options}
          />
        ))}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default StackNavigator;

​
Bottom Tab Bar — TabNavigator

TabNavigator is rendered as the MainTabs screen inside the root stack. It creates a bottom-tab navigator with four tabs, each backed by either a nested stack navigator or a single screen component.

​
Tab Icon Mapping

Icons come from the react-native-vector-icons/Ionicons library. Each tab’s icon is resolved at render time by looking up route.name in the icons object: 
// src/navigation/TabNavigator.jsx
const icons = {
  Home:        "home-outline",
  Chat:        "chatbubbles-outline",
  Profile:     "person-outline",
  Appointment: "calendar-outline",
};

​
Floating Pill Styling

The tab bar is styled as a floating pill that sits above the system home indicator, using react-native-safe-area-context insets for bottom spacing: 
// src/navigation/TabNavigator.jsx
const styles = StyleSheet.create({
  tabHolder: {
    position: 'absolute',
    height: verticalScale(60),
    marginHorizontal: scale(30),
    borderRadius: scale(30),
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabs: {
    paddingTop: verticalScale(10),
    bottom: 0,
  },
});
Key screenOptions applied to the tab navigator:
OptionValue
tabBarShowLabelfalse — icons only, no text labels
tabBarActiveTintColorcolors.black
tabBarInactiveTintColorcolors.secondary
headerShownfalse
tabBarStyle.position'absolute' (floating over content)
tabBarStyle.borderRadiusscale(30) (full pill shape)

​
Doctor Sub-Stack — DoctorStackNavigator

The Home tab hosts its own NativeStack navigator so the user can drill from the home screen into doctor listings, a specific doctor’s profile, and then the scheduling flow — all within the same tab, preserving tab state when switching away and back. 
// src/navigation/DoctorStackNavigator.jsx
const DoctorStackNavigator = () => {
  return (
    <DoctorStack.Navigator screenOptions={{ headerShown: false }}>
      <DoctorStack.Screen name='Home'         component={HomeScreen} />
      <DoctorStack.Screen name='Doctors'      component={DoctorsScreen} />
      <DoctorStack.Screen name='DoctorInfo'   component={DoctorInfo} />
      <DoctorStack.Screen name='Notifications' component={Notifications} />
      <DoctorStack.Screen name='Schedule'     component={Schedule} />
      <DoctorStack.Screen name='ScheduleDetail' component={ScheduleDetail} />
    </DoctorStack.Navigator>
  );
};

​
Appointment Sub-Stack — AppointmentStackNavigator

The Appointment tab similarly uses its own NativeStack to move between the appointments list and the cancel/review flows without leaving the tab. 
// src/navigation/AppointmentStack.jsx
const AppointmentStackNavigator = () => {
  return (
    <AppointmentStack.Navigator screenOptions={{ headerShown: false }}>
      <AppointmentStack.Screen name='Appointment'       component={Appointment} />
      <AppointmentStack.Screen name='CancelAppointment' component={CancelAppointment} />
      <AppointmentStack.Screen name='ReviewAppointment' component={ReviewAppointment} />
    </AppointmentStack.Navigator>
  );
};

​
Header Configuration

Every navigator sets headerShown: false in its screenOptions. Individual screens mount a CustomHeader component directly in their JSX, giving each screen full control over the back button, title text, and any action icons without being constrained by React Navigation’s built-in header API.

Root Stack

headerShown: false globally via screenOptions. Per-screen headers are rendered as in-component UI elements.

Tab Navigator

headerShown: false — the floating pill is the only persistent chrome; screens own their own top bars.

DoctorStackNavigator

headerShown: false — consistent with the root; CustomHeader is rendered inside each doctor/schedule screen.

AppointmentStackNavigator

headerShown: false — appointment screens manage their own navigation headers.

​
Deep-Linking Into a Screen

Because all navigators use string-based route names, you can navigate directly to any screen and pass params at the same time.
To open the DoctorsScreen with a pre-selected sort tab, pass the selectedSort param from anywhere in the app:
navigation.navigate('Doctors', { selectedSort: 2 });
DoctorsScreen reads route.params.selectedSort to activate the correct filter tab on mount, so the user lands directly on the desired sorted view.

Build docs developers (and LLMs) love

Get started for freeTalk to us