Skip to main content

Overriding Screen Contents

Use screen overrides to replace the default content, layout, and behavior of specific Doctor App SDK screens. Override content to align the UI with your brand, apply proprietary logic, or fully control interaction flows. Routing, lifecycle management, and backend communication remain handled by the SDK.

important

The SDK does not yet expose formal APIs or structured methods for full screen overrides. The guidance here reflects practical customization approaches based on UI framework conventions. Contact Air Doctor support to confirm compatibility with your integration.

When to Use​

Apply a full override when your use case requires one or more of the following:

  • Replace default SDK layouts with custom visual design.
  • Inject app-specific logic, conditional UI states, or platform analytics.
  • Use an alternative UI framework or library in place of the SDK’s built-in components.
  • Localize text and flows in a way that differs from the SDK default.

For simple adjustments like changing text or colors, use slot-based injection or CSS theme tokens instead.

note

Full overrides give complete layout control but increase responsibility for maintaining usability, accessibility, and consistency.

Supported Screens​

Only predefined SDK routes support overrides. These include:

  • appointments/details
  • appointments/approve
  • profile/settings
  • login

Refer to the Doctor App Overview for a full list of supported paths.

Overrides must match the SDK route exactly. This ensures internal routing and lifecycle logic continue to function correctly.

Implementation​

Create a component that renders the screen content and handles required props and UI behavior. The SDK will replace the default screen with your component.

Example Override Component​

import { useAppointment } from 'dr-sdk';

export default function CustomDetailsScreen({ id }) {
  const { appointment, loading } = useAppointment(id);

  if (loading) return <LoadingSkeleton />;

  return (
    <section className="custom-screen">
      <h2>Appointment for {appointment.doctorName}</h2>
      <p>Status: {appointment.status}</p>
      <button onClick={() => navigate('/home')}>Back</button>
    </section>
  );
}

Registering the Override​

Register your custom component by linking it to a route string using the SDK override method:

import { registerOverride } from 'dr-sdk';
import CustomDetailsScreen from './CustomDetailsScreen';

registerOverride('appointments/details', CustomDetailsScreen);

The SDK performs strict path matching. Make sure the route string is accurate.

Best Practices​

To ensure reliable integration:

  • Match the data shape and prop structure expected by the original screen.
  • Use SDK-provided hooks for data retrieval and session state.
  • Preserve your app’s UI conventions and accessibility standards.
  • Provide graceful fallbacks for missing or invalid data.
  • Add ARIA roles and keyboard navigation support.

Adhering to these practices helps maintain a consistent and accessible user experience.

Limitations​

Keep the following in mind:

  • Navigation transitions remain controlled by the SDK.
  • Overrides replace the full content area; partial injection is not supported.
  • Transitions and animation states from the original screen do not persist.

For partial customization of UI sections, use slot-based injection where available.