Skip to main content

ManuallyRequestSheet.Image

Platform-specific imagery component that displays illustrations for health-platform prompts with built-in support for Apple, Google, and Fitbit. It is presentation-only: the selected provider does not change authorization or synchronization behavior.

Quick Example​

import { DataSync } from "@ovok/native/data-sync";
import React from "react";

const ImageExample = () => {
  return <DataSync.ManuallyRequestSheet.Image for="apple" />;
};

export default ImageExample;

Props​

PropTypeRequiredDefaultDescription
for"apple" | "google" | "fitbit"--Platform provider for automatic image
sourceImageSourcePropType--Custom image source (ignored if for is set)
containerPropsViewProps--Props for the image container
styleImageStyle--Additional image styling
testIDstring--Test identifier for testing

Inherits all ImageProps from React Native except source when for is provided

Component Behavior​

The Image component provides:

  1. Platform Images: Built-in illustrations for major health platforms
  2. Custom Images: Support for custom image sources when no platform is specified
  3. Container Styling: Themed container with proper spacing and background
  4. Responsive Sizing: Images automatically size to fit container
  5. Theme Integration: Container styling adapts to app theme

Built-in platform imagery​

Apple Health​

<ManuallyRequestSheet.Image for="apple" />

Displays the Apple Health Connect illustration with:

  • Apple Health logo and branding
  • Health data visualization graphics
  • iOS-style interface elements

Google Health Connect​

<ManuallyRequestSheet.Image for="google" />

Displays the Google Health Connect illustration with:

  • Health Connect logo and branding
  • Android health data graphics
  • Material Design interface elements

Fitbit​

<ManuallyRequestSheet.Image for="fitbit" />

The fitbit value selects the bundled Fitbit illustration. It does not add a Fitbit health provider or data importer; use it only as imagery in an app-owned flow.

App-owned imagery​

Omit for and pass a normal React Native image source when the authorization screen belongs to another provider:

<DataSync.ManuallyRequestSheet.Image
  source={require("./assets/provider.png")}
  accessibilityLabel="Connect the app's health provider"
/>

If for is present, its bundled asset takes precedence over source.

Container Styling​

Theme Values Used​

  • theme.colors.surface - Container background color
  • theme.colors.outline - Container border color
  • theme.borderRadius(5) - Container border radius
  • The container uses width: "100%" and aspectRatio: 1
  • The image uses width: "100%", height: "100%", and resizeMode: "contain"

Styling​

Theme Colors Used​

  • theme.colors.surface - Default container background
  • theme.colors.outline - Default container border
  • theme.borderRadius(5) - Container corner radius

containerProps.style and style are merged after the defaults. The component does not add padding or a fixed height.