Tile.TaskIcon

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

Quick ExampleCopy Anchor Link

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

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>
  );
};

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/tile API reference.

Component BehaviorCopy Anchor Link

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

LocalizationCopy Anchor Link

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>
  );
};

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

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

Technical ImplementationCopy Anchor Link

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 ComponentsCopy Anchor Link

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