Tile.TaskIcon

Displays healthcare measurement type icons using SVG graphics with theme integration and support for various medical device types.

Quick Example

import React from "react";
import { Tile, useAppTheme } from "@ovok/mobile";
import { MeasurementTypeKey } from "@ovok/core";

export const TaskIconExample = () => {
  const theme = useAppTheme();

  return (
    <Tile>
      <Tile.StartSection
        isCompleted={false}
        left={() => (
          <Tile.TaskIcon
            measurementTypeKey={MeasurementTypeKey.bloodPressure}
            size={24}
            color={theme.colors.primary}
            testID="blood-pressure-icon"
          />
        )}
      />
    </Tile>
  );
};

Props

Prop	Type	Required	Default	Description
measurementTypeKey	MeasurementTypeKey	✓	-	Type of measurement to display icon for
size	number	-	20	Width and height of the icon in pixels
color	string	-	theme.colors.primary	Fill color for the SVG icon
testID	string	-	-	Test identifier for automated testing

Component Behavior

The TaskIcon component:

1. Icon Selection: Uses measurementTypeKey to select the appropriate SVG icon
2. Color Application: Applies the specified color (or theme primary) to the SVG fill
3. Size Control: Sets both width and height to the same value for square icons
4. Fallback: Returns null if no icon is found for the measurement type
5. Memoization: Uses React.useMemo to optimize SVG generation

Localization

This component does not use localization directly as it displays visual icons. However, it's often used alongside localized text:

import { useTranslation } from "react-i18next";

export const LocalizedIconExample = () => {
  const { t } = useTranslation();

  return (
    <Tile>
      <Tile.StartSection
        isCompleted={false}
        left={() => (
          <Tile.TaskIcon
            measurementTypeKey={MeasurementTypeKey.bloodPressure}
          />
        )}
      />
      <Tile.Title>{t("tile.bloodPressure.label")}</Tile.Title>
    </Tile>
  );
};

Styling

Theme Colors Used

• theme.colors.primary - Default icon fill color when no custom color is provided

Technical Implementation

The component uses:

• react-native-svg: For SVG rendering
• Memoization: Performance optimization for icon generation
• Dynamic SVG: Icons are generated as SVG strings with dynamic color injection

Related Components

• Tile.StartSection - Common container for TaskIcon
• Tile.Title - Often used together to identify measurement type
• Tile.Status - Alternative status display for device states