Skip to main content

ManuallyRequestSheet.Image

Platform-specific imagery component that displays illustrations for health platform integrations with built-in support for Apple, Google, and Fitbit.

Quick Example​

import { DataSync } from "@ovok/native";
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 Support​

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

Container Styling​

Theme Values Used​

  • theme.colors.surface - Container background color
  • theme.borderRadius(5) - Container border radius
  • theme.spacing(4) - Container padding
  • Fixed height: 180px
  • Center alignment for images

Styling​

Theme Colors Used​

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