Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jay-byte389/AMS/llms.txt

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

AMS uses React Navigation to orchestrate every screen in the app. A single root NativeStackNavigator — AppNavigator — owns the top-level routing decision: send unauthenticated users into the Auth stack, or drop authenticated users straight into the BottomTabs experience. All modal-style screens (settings, payments, profile editing) live at the root stack level so they slide over any tab or nested screen without disrupting the underlying navigation state. 
AppNavigator (NativeStack)
├── Auth (AuthStack)
│   ├── Register (RegisterScreen)       ← initial route
│   ├── Login (LoginScreen)
│   ├── SignUp (SignUpScreen)
│   └── SetPassword (SetPassword)
└── BottomTabs (BottomTabsNavigator)
    ├── Home (DoctorsStack)
    │   ├── HomeScreen                  ← initial route
    │   ├── Doctors
    │   ├── Info (DoctorInfo)
    │   ├── NotificationScreen
    │   ├── Schedule (ScheduleScreen)
    │   ├── YourAppointment (YourAppoinmentScreen)
    │   ├── CancelAppointment
    │   └── Review
    ├── Chat (ChatScreen)
    ├── Profile (ProfileScreen)
    └── Appointments (AllAppointmentsScreen)

Modal / Root-level Screens
├── EditProfile
├── Settings
├── NotificationSetting
├── PasswordManager
├── PrivacyPolicy
├── HelpCenter
├── Payment (PaymentMethod)
├── Debit (AddCard)
├── PaymentComplete
└── PaymentSummary

​
AppNavigator

AppNavigator is the entry point rendered directly inside App.tsx. On mount it dispatches checkAuthSession, which reads @logged_in_user from AsyncStorage. Only after that promise resolves does the component render the NavigationContainer, ensuring the splash screen is visible for the minimum time required to make an auth decision. 
// src/navigator/AppNavigator.jsx
export default function AppNavigator() {
  const dispatch = useDispatch();
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    dispatch(checkAuthSession()).finally(() => {
      setIsReady(true);
      BootSplash.hide({ fade: true }); // hide splash after session check
    });
  }, [dispatch]);

  if (!isReady) return null; // keep splash visible while checking

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={isAuthenticated ? 'BottomTabs' : 'Auth'}
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Auth" component={AuthStack} />
        <Stack.Screen name="BottomTabs" component={BottomTabsNavigator} />
        <Stack.Screen name="EditProfile" component={EditProfileScreen} />
        <Stack.Screen name="Settings" component={SettingScreen} />
        <Stack.Screen name="NotificationSetting" component={NotificationSettingScreen} />
        <Stack.Screen name="PasswordManager" component={PasswordManager} />
        <Stack.Screen name="PrivacyPolicy" component={PrivacyPolicy} />
        <Stack.Screen name="HelpCenter" component={HelpCenter} />
        <Stack.Screen name="Payment" component={PaymentMethod} />
        <Stack.Screen name="Debit" component={AddCard} />
        <Stack.Screen name="PaymentComplete" component={PaymentComplete} />
        <Stack.Screen name="PaymentSummary" component={PaymentSummary} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
1

App mounts

App.tsx renders <Provider store={store}><AppNavigator /></Provider>. The Redux store is available before any navigation occurs.
2

Session check

checkAuthSession thunk calls getLoggedInUser() from AsyncStorage and returns the stored user object (or null).
3

Auth state resolves

The auth slice sets isAuthenticated based on the payload. setIsReady(true) triggers a re-render.
4

Splash hidden

BootSplash.hide({ fade: true }) plays a fade-out transition and the correct initial route is displayed.

​
AuthStack

AuthStack is a NativeStackNavigator with initialRouteName="Register". New users flow Register → SignUp → SetPassword; returning users tap “Login” from the Register screen and land on LoginScreen. 
// src/navigator/AuthNavigator.jsx
export default function AuthStack() {
  return (
    <Stack.Navigator
      initialRouteName="Register"
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
      <Stack.Screen name="SignUp" component={SignUpScreen} />
      <Stack.Screen name="SetPassword" component={SetPassword} />
    </Stack.Navigator>
  );
}

New User Flow

Register → SignUp (enter personal details) → SetPassword (choose a password) → signupUser thunk saves the account and sets isAuthenticated = true, causing AppNavigator to swap to BottomTabs.

Returning User Flow

Register → Login (enter email/phone + password) → loginUser thunk validates credentials and sets isAuthenticated = true.

​
BottomTabsNavigator

The bottom tab bar uses @react-navigation/bottom-tabs. It is styled as a floating pill — positioned absolutely above the bottom edge of the screen with rounded corners and a solid blue (#2260FF) background. Labels are hidden; each tab shows only an icon image. 
// src/navigator/BottomTabsNavigator.jsx (style excerpt)
tabBarStyle: {
  position: 'absolute',
  bottom: vs(40),
  height: vs(40),
  marginHorizontal: ms(40),
  borderRadius: ms(35),
  backgroundColor: '#2260FF',
},
tabBarIcon: ({ focused, color }) => (
  <Image
    source={icon}
    style={{
      width: 24,
      height: 24,
      resizeMode: 'contain',
      tintColor: focused ? '#000000' : '#FFFFFF', // black when active, white when inactive
    }}
  />
),
Renders the DoctorsStack nested navigator. This tab is the primary entry point for browsing doctors and booking appointments.

​
DoctorsStack

DoctorsStack is a NativeStackNavigator nested inside the Home tab. All screens share a white contentStyle background and no visible header. 
// src/navigator/DoctorsStack.jsx
export default function DoctorsStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        contentStyle: { backgroundColor: 'white' },
      }}
    >
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="Doctors" component={Doctors} />
      <Stack.Screen name="Info" component={DoctorsInfo} />
      <Stack.Screen name="NotificationScreen" component={NotificationScreen} />
      <Stack.Screen name="Schedule" component={ScheduleScreen} />
      <Stack.Screen name="YourAppointment" component={YourAppointment} />
      <Stack.Screen name="CancelAppointment" component={CancelAppointment} />
      <Stack.Screen name="Review" component={Review} />
    </Stack.Navigator>
  );
}
The typical booking journey through DoctorsStack is:
1

HomeScreen

Displays featured doctors and categories. Tapping a doctor dispatches setSelectedDoctor and navigates to Info.
2

Info (DoctorInfo)

Shows full doctor profile. The user selects a date/time and taps Book Appointment.
3

Schedule

Confirms the appointment slot and dispatches addAppointment.
4

YourAppointment

Shows the newly created appointment summary. From here the user can navigate to PaymentSummary (root stack) or cancel via CancelAppointment.

​
Passing Data Between Screens

Data flows between screens through route.params. Because doctor objects are stored in Redux (state.doctors.selectedDoctor), most screens read from the store rather than from params, but the pattern is available for lightweight payloads. 
// Navigating with params — e.g. from HomeScreen to Info
navigation.navigate('Info', { doctor: selectedDoctor });

// Reading params in DoctorInfo
const { doctor } = route.params;
For larger objects (full doctor profiles, appointment records) prefer reading from Redux state via useSelector rather than serialising the whole object into route.params. This keeps navigation params small and avoids stale data if the store updates.

​
App Entry Point

App.tsx wraps everything in SafeAreaProvider and the Redux Provider before rendering AppNavigator. A GlobalSnackbar component sits outside the navigator so it can overlay any screen. 
// App.tsx
function App() {
  return (
    <SafeAreaProvider>
      <Provider store={store}>
        <AppNavigator />
        <GlobalSnackbar />
      </Provider>
    </SafeAreaProvider>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us