AMS UI Components: Buttons, Inputs, Headers, and Cards

import PrimaryButton from '../components/PrimaryButton';

// Primary (solid blue)
<PrimaryButton
  title="Book Appointment"
  onPress={() => navigation.navigate('Booking')}
/>

// Secondary (soft blue)
<PrimaryButton
  title="Cancel"
  type="secondary"
  onPress={() => navigation.goBack()}
/>

import ButtonComp from '../components/ButtonComp';

// Full-width (default)
<ButtonComp
  text="Continue"
  onPress={handleContinue}
/>

// Fixed width
<ButtonComp
  text="Save"
  width={200}
  onPress={handleSave}
/>

import SocialButton from '../components/SocialButton';

<SocialButton
  image={require('../assets/icons/google.png')}
  onPress={handleGoogleLogin}
/>

<SocialButton
  image={require('../assets/icons/apple.png')}
  onPress={handleAppleLogin}
/>

import TabButton from '../components/TabButtons';

const [activeTab, setActiveTab] = React.useState('Upcoming');

<View style={{ flexDirection: 'row', gap: 8 }}>
  {['Completed', 'Upcoming', 'Cancelled'].map(tab => (
    <TabButton
      key={tab}
      title={tab}
      active={activeTab === tab}
      onPress={() => setActiveTab(tab)}
    />
  ))}
</View>

import CustomInput from '../components/CustomInput';
import Ionicons from 'react-native-vector-icons/Ionicons';

<CustomInput
  label="Email Address"
  placeholder="you@example.com"
  value={email}
  onChangeText={setEmail}
  keyboardType="email-address"
  leftIcon={<Ionicons name="mail-outline" size={18} color={colors.primary} />}
/>

// Multiline notes field
<CustomInput
  label="Reason for visit"
  placeholder="Describe your symptoms..."
  value={notes}
  onChangeText={setNotes}
  multiline
  numberOfLines={4}
  textAlignVertical="top"
/>

import PasswordInput from '../components/PasswordManager/PasswordInput';

<PasswordInput
  placeholder="Enter your password"
  value={password}
  onChangeText={setPassword}
/>

import PaymentInput from '../components/PaymentInput';
import VisaIcon from '../assets/icons/Visa.svg';

const [selectedMethod, setSelectedMethod] = React.useState('');

<PaymentInput
  text="Visa Card"
  icon={<VisaIcon width={28} height={28} />}
  selected={selectedMethod}
  setSelected={setSelectedMethod}
  onPress={() => navigation.navigate('AddCard')}
/>

<PaymentInput
  text="Apple Pay"
  icon={<ApplePayIcon width={28} height={28} />}
  selected={selectedMethod}
  setSelected={setSelectedMethod}
  onPress={() => handleApplePay()}
/>

import Header from '../components/Headers';

// Standard back-button header
<Header title="Appointment Details" />

// Header with custom right action
<Header
  title="My Profile"
  showRightIcon
  onRightPress={() => navigation.navigate('Settings')}
/>

// Header with custom right component
<Header
  title="Doctors"
  rightComponent={
    <TouchableOpacity onPress={openFilter}>
      <FilterIcon />
    </TouchableOpacity>
  }
/>

import DoctorsHeader from '../components/DoctorsHeader';

const [sortTab, setSortTab] = React.useState(0);

<DoctorsHeader
  title="All Doctors"
  selectedTab={sortTab}
  setSelectedTab={setSortTab}
/>

import HomeHeaders from '../components/HomeHeaders';

// Drop in at the top of the Home screen
<HomeHeaders />

import ScheduleHeader from '../components/ScheduleHeader';

// Doctor info mode
<ScheduleHeader
  title="Dr. Sarah Jones"
  qualification=", MD"
  onBack={() => navigation.goBack()}
/>

// Scheduling mode
<ScheduleHeader
  title="Dr. Sarah Jones"
  qualification=", MD"
  onBack={() => navigation.goBack()}
  showSchedule
/>

import DoctorCard from '../components/DoctorCard';

<DoctorCard
  doctors={doctorsList}
  navigation={navigation}
/>

import RatingCard from '../components/RatingCard';

// Typically used when the sort tab is set to "Top Rated"
<RatingCard
  doctors={sortedByRating}
  navigation={navigation}
/>

import Favourties from '../components/Favourites';

const [tab, setTab] = React.useState('DOCTORS');
const [expandedService, setExpandedService] = React.useState(null);

<Favourties
  favoriteTab={tab}
  setFavoriteTab={setTab}
  displayDoctors={doctors}
  services={services}
  expandedService={expandedService}
  setExpandedService={setExpandedService}
  navigation={navigation}
/>

import ProfileAvatar from '../components/ProfileAvatar';

// Place at the top of the Profile screen
<ProfileAvatar />

import ProfileMenuList from '../components/ProfileMenuList';

// Renders the complete profile menu including logout confirmation modal
<ProfileMenuList />

import ProfileMenuItem from '../components/ProfileMenuItems';

<ProfileMenuItem
  icon="person-outline"
  title="Edit Profile"
  onPress={() => navigation.navigate('EditProfile')}
/>

// No chevron for destructive actions
<ProfileMenuItem
  icon="log-out-outline"
  title="Logout"
  showChevron={false}
  onPress={handleLogout}
/>

import SettingsItem from '../components/SettingsItem';
import NotificationIcon from '../assets/icons/Notification.svg';
import LockIcon from '../assets/icons/Lock.svg';

<SettingsItem
  icon={<NotificationIcon width={20} height={20} />}
  title="Notifications"
  onPress={() => navigation.navigate('NotificationSettings')}
/>

<SettingsItem
  icon={<LockIcon width={20} height={20} />}
  title="Change Password"
  onPress={() => navigation.navigate('ChangePassword')}
/>

import { showSnackbar } from '../redux/slices/snackBarSlice';

// Trigger from anywhere in the app
dispatch(showSnackbar({ message: 'Appointment booked!', type: 'success' }));
dispatch(showSnackbar({ message: 'Something went wrong', type: 'error' }));
dispatch(showSnackbar({ message: 'Check your connection', type: 'warning' }));

import GlobalSnackbar from '../components/GlobalSnackbar';

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <RootNavigator />
        {/* Renders above all screens */}
        <GlobalSnackbar />
      </NavigationContainer>
    </Provider>
  );
}