@hedia/recommendation-screen 2.1.75-alpha.0 → 2.2.0-alpha.0

package/{lib/typescript → dist/src}/components/Remeasure.d.ts

@@ -8,15 +8,25 @@ export interface IProps {
      */
     onSliderChange(value: number): void;
 }
-export interface IState {
-    remeasureTime: number;
-}
 /**
  * The Remeasure component has a slider child component that the user can drag to change
  * when they will get a reminder notification about measuring their BGL again.
  */
-export default class Remeasure extends React.Component<IProps, IState> {
-    constructor(props: IProps);
+export default class Remeasure extends React.Component<IProps> {
+    /** For holding a reference to the slider component so its initial value can be set (only one time) when the Remeasure component has been mounted. */
+    private slider?;
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * If the value of a slider component in React Native is set to track an outside state,
+     * the slider indicator may jump back and forth while updates to the value are propagated through the affected objects and components.
+     * Since we don’t need to change the value of the slider from the outside after initialising it to the default value,
+     * we simply set the default value (using setNativeProp) upon initialisation instead of using the slider’s normal value prop to set it.
+     *
+     * Steps:
+     * 1. Call the setNativeProps() method on the slider to set its value to the remeasureTime prop.
+     */
+    componentDidMount(): void;
     /**
      * Steps:
      * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.
@@ -37,4 +47,3 @@ export default class Remeasure extends React.Component<IProps, IState> {
      */
     render(): JSX.Element;
 }
-//# sourceMappingURL=Remeasure.d.ts.map

package/dist/src/components/Remeasure.js

@@ -0,0 +1,130 @@
+import { t } from "@lingui/macro";
+import Slider from "@react-native-community/slider";
+import React from "react";
+import { Dimensions, Platform, StyleSheet, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { infoStyles } from "./InfoBars";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+/**
+ * The Remeasure component has a slider child component that the user can drag to change
+ * when they will get a reminder notification about measuring their BGL again.
+ */
+export default class Remeasure extends React.Component {
+    /** For holding a reference to the slider component so its initial value can be set (only one time) when the Remeasure component has been mounted. */
+    slider;
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * If the value of a slider component in React Native is set to track an outside state,
+     * the slider indicator may jump back and forth while updates to the value are propagated through the affected objects and components.
+     * Since we don’t need to change the value of the slider from the outside after initialising it to the default value,
+     * we simply set the default value (using setNativeProp) upon initialisation instead of using the slider’s normal value prop to set it.
+     *
+     * Steps:
+     * 1. Call the setNativeProps() method on the slider to set its value to the remeasureTime prop.
+     */
+    componentDidMount() {
+        this.slider?.setNativeProps({
+            value: this.props.remeasureTime,
+        });
+    }
+    /**
+     * Steps:
+     * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.
+     * 2. Call the onSliderChange prop callback function with the limited value as argument.
+     * @param remeasureTime The value of the remeasurement slider.
+     */
+    handleSliderChange = (remeasureTime) => {
+        const limited = this.limitTime(remeasureTime);
+        this.props.onSliderChange(limited);
+    };
+    /**
+     * Steps:
+     * 1.Use Math.min() and Math.max() to clamp remeasureTime in the range 0 to 6 and return the result.
+     * @param remeasureTime The value of the remeasurement slider.
+     * @returns The limited remeasurement time in hours
+     */
+    limitTime = (remeasureTime) => {
+        return Math.min(Math.max(0, remeasureTime), 6);
+    };
+    /**
+     * Compose a JSX element for displaying the currently selected remeasurement time along
+     * with a horizontal slider for changing it in increments of 0.5 hours in the range 0 to 6.
+     */
+    render() {
+        const measure = this.props.remeasureTime > 0;
+        const limited = this.limitTime(this.props.remeasureTime);
+        const marginHorizontal = Platform.OS === `ios` ? `3%` : `0%`;
+        const valueContainer = measure ? remeasureStyles.valueContainer : variantStyles.centeredValueContainer;
+        return (<View style={remeasureStyles.container}>
+				<View style={remeasureStyles.borderContainer}>
+					<View style={remeasureStyles.remeasureContainer}>
+						<TextBold style={remeasureStyles.remeasureLabel}>
+							{i18n._(t `Remind me to remeasure in`)}
+						</TextBold>
+					</View>
+					<View style={remeasureStyles.valueUnitContainer}>
+						<View style={valueContainer}>
+							<TextBold style={remeasureStyles.value} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
+								{measure ? limited : i18n._(t `OFF`)}
+							</TextBold>
+						</View>
+						{measure ? (<View style={remeasureStyles.unitContainer}>
+								<TextRegular style={remeasureStyles.units}>{i18n._(t `hours`)}</TextRegular>
+							</View>) : null}
+					</View>
+				</View>
+				<Slider ref={(slider) => {
+                if (slider !== null) {
+                    this.slider = slider;
+                }
+            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={colors.mistBlue} minimumTrackTintColor={colors.teal} thumbTintColor={colors.teal} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
+			</View>);
+    }
+}
+const remeasureStyles = StyleSheet.create({
+    container: {
+        flexDirection: `column`,
+        padding: `3%`,
+    },
+    borderContainer: {
+        ...infoStyles.borderContainer,
+        alignItems: `center`,
+    },
+    remeasureContainer: {
+        flex: 7,
+    },
+    remeasureLabel: {
+        color: `white`,
+        fontSize: Dimensions.get(`screen`).width / 28,
+    },
+    valueUnitContainer: {
+        ...infoStyles.valueUnitContainer,
+    },
+    valueContainer: {
+        ...infoStyles.valueContainer,
+    },
+    value: {
+        ...infoStyles.value,
+    },
+    unitContainer: {
+        ...infoStyles.unitContainer,
+        marginRight: `7%`,
+    },
+    units: {
+        ...infoStyles.units,
+    },
+    sliderStyle: {
+        marginTop: `3%`,
+        marginBottom: `2%`,
+    },
+});
+const variantStyles = StyleSheet.create({
+    centeredValueContainer: {
+        ...remeasureStyles.valueContainer,
+        alignItems: `center`,
+    },
+});

package/{lib/typescript/components/TransferToLogbook.d.ts → dist/src/components/SaveButton.d.ts}

@@ -13,7 +13,7 @@ export interface IState {
  * Render a button for transferring the recommendation to a logbook entry.
  * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
  */
-export default class TransferToLogbook extends React.Component<IProps, IState> {
+export default class SaveButton extends React.Component<IProps, IState> {
     /** Initialise the state pressed variable with false */
     state: IState;
     /**
@@ -30,6 +30,5 @@ export default class TransferToLogbook extends React.Component<IProps, IState> {
      * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
      * @returns JSX element for displaying the transfer button
      */
-    render(): JSX.Element | undefined;
+    render(): JSX.Element;
 }
-//# sourceMappingURL=TransferToLogbook.d.ts.map

package/dist/src/components/SaveButton.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import { t } from "@lingui/macro";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import TextBold from "./text/TextBold";
+/**
+ * Render a button for transferring the recommendation to a logbook entry.
+ * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
+ */
+export default class SaveButton extends React.Component {
+    /** Initialise the state pressed variable with false */
+    state = {
+        pressed: false,
+    };
+    /**
+     * Handle what happens when the button is pressed.
+     *
+     * Steps:
+     * 1. Toggle the pressed state to the opposite of its current value.
+     * 2. Call the transfer prop callback function.
+     */
+    handlePress = () => {
+        this.setState({
+            pressed: !this.state.pressed,
+        });
+        this.props.transfer();
+    };
+    /**
+     * Steps:
+     * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
+     * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
+     * @returns JSX element for displaying the transfer button
+     */
+    render() {
+        if (!this.props.visible) {
+            return <View style={styles.marginContainer}/>;
+        }
+        return (<View style={styles.wrapper}>
+				<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={styles.button}>
+					<TextBold style={styles.text}>{i18n._(t `Save to logbook`)}</TextBold>
+				</TouchableOpacity>
+			</View>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
+    marginContainer: {
+        marginVertical: `3%`,
+    },
+    wrapper: {
+        flexDirection: `row`,
+        alignSelf: `center`,
+    },
+    button: {
+        backgroundColor: colors.teal,
+        borderRadius: 40,
+        marginTop: width / 5,
+        marginBottom: width / 18,
+    },
+    text: {
+        fontFamily: `Poppins-Bold`,
+        paddingVertical: width / 26,
+        paddingHorizontal: width / 10,
+        textAlign: `center`,
+        color: colors.semiDarkBlue,
+        fontSize: width / 22,
+        lineHeight: width / 16,
+    },
+});

package/dist/src/components/TwoOptionModal.d.ts

@@ -0,0 +1,136 @@
+import * as React from "react";
+export interface ITwoOptionModalProps {
+    /** The title of the modal. */
+    title: string;
+    /** The message to show in the modal. */
+    message: string;
+    /** The label of the first option. */
+    textFirstOption: string;
+    /**  The label of the second option. */
+    textSecondOption: string;
+    /** Whether or not the modal shall have a cancel button in the corner to close the modal. */
+    isCancelable?: boolean;
+    /**  If true the buttons will be displayed side-by-side. If false the buttons will be displayed on top of each other. */
+    rowAsButtonLayout: boolean;
+    /** To be called if the user taps the first option button. */
+    firstOption(): void;
+    /** To be called if the user taps the second option button. */
+    secondOption(): void;
+    /** To be called if the user taps the optionally shown close button. */
+    onClose?(): void;
+}
+/** Display a modal with two buttons for the user to choose between. */
+export default class TwoOptionModal extends React.Component<ITwoOptionModalProps> {
+    /** Compose a JSX element for displaying the modal. */
+    render(): JSX.Element;
+}
+/** @internal */
+export declare const modalStyle: {
+    container: {
+        justifyContent: "center";
+        backgroundColor: string;
+        height: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    modalContainer: {
+        margin: string;
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    iconWrapper: {
+        alignSelf: "flex-end";
+        marginRight: string;
+        marginTop: string;
+    };
+    icon: {
+        color: string;
+        fontSize: number;
+    };
+    textContainer: {
+        marginHorizontal: string;
+        marginBottom: string;
+        marginTop: string;
+        alignSelf: "flex-start";
+    };
+    textContainerNotCancelable: {
+        marginHorizontal: string;
+        marginVertical: string;
+        alignSelf: "flex-start";
+    };
+    titleRowLayout: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+        marginBottom: string;
+    };
+    titleColumnLayout: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+        marginBottom: string;
+    };
+    message: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    buttonContainerRow: {
+        flexDirection: "row";
+        justifyContent: "space-around";
+        marginHorizontal: string;
+        marginVertical: string;
+    };
+    buttonContainerColumn: {
+        flexDirection: "column";
+        justifyContent: "space-around";
+        margin: string;
+    };
+    buttonRow: {
+        height: number;
+        marginTop: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: number;
+        alignSelf: "center";
+        justifyContent: "center";
+    };
+    firstButtonColumn: {
+        height: number;
+        width: number;
+        marginTop: number;
+        backgroundColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        alignSelf: "center";
+        justifyContent: "center";
+    };
+    secondButtonColumn: {
+        alignSelf: "center";
+        justifyContent: "center";
+        height: number;
+        width: number;
+        marginTop: string;
+    };
+    textButtonRow: {
+        textAlign: "center";
+        fontSize: number;
+        color: string;
+    };
+    textFirstButtonColumn: {
+        textAlign: "center";
+        fontSize: number;
+        paddingHorizontal: number;
+        color: string;
+    };
+    textSecondButtonColumn: {
+        textAlign: "center";
+        fontSize: number;
+        color: string;
+    };
+};

package/dist/src/components/TwoOptionModal.js

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { Dimensions, StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import Icon from "./Icon";
+import { stylesModal } from "./RecommendationModal";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+const { TwoOptionModalTestIds } = Testing.Id;
+/** Display a modal with two buttons for the user to choose between. */
+export default class TwoOptionModal extends React.Component {
+    /** Compose a JSX element for displaying the modal. */
+    render() {
+        const { rowAsButtonLayout, isCancelable } = this.props;
+        return (<View style={modalStyle.container}>
+				<StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
+				<View style={modalStyle.modalContainer}>
+					{isCancelable ? (<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={modalStyle.iconWrapper}>
+							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={modalStyle.icon}/>
+						</TouchableOpacity>) : null}
+
+					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
+						<TextBold style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
+							{this.props.title}
+						</TextBold>
+						<TextRegular style={modalStyle.message}>{this.props.message}</TextRegular>
+					</View>
+					<View style={rowAsButtonLayout ? modalStyle.buttonContainerRow : modalStyle.buttonContainerColumn}>
+						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.firstButtonColumn}>
+							<TextBold style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textFirstButtonColumn}>
+								{this.props.textFirstOption}
+							</TextBold>
+						</TouchableOpacity>
+						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.secondButtonColumn}>
+							<TextBold style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textSecondButtonColumn}>
+								{this.props.textSecondOption}
+							</TextBold>
+						</TouchableOpacity>
+					</View>
+				</View>
+			</View>);
+    }
+}
+const { height, width } = Dimensions.get(`screen`);
+/** @internal */
+export const modalStyle = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: `center`,
+        backgroundColor: `rgba(0, 0, 0, 0.9)`,
+        height,
+    },
+    modalContainer: {
+        margin: `4%`,
+        backgroundColor: colors.darkBlue,
+        borderRadius: width / 25,
+    },
+    iconWrapper: {
+        alignSelf: `flex-end`,
+        marginRight: `4%`,
+        marginTop: `3%`,
+    },
+    icon: {
+        color: colors.mistBlue,
+        fontSize: width / 12,
+    },
+    textContainer: {
+        marginHorizontal: `4%`,
+        marginBottom: `5%`,
+        marginTop: `2%`,
+        alignSelf: `flex-start`,
+    },
+    textContainerNotCancelable: {
+        marginHorizontal: `4%`,
+        marginVertical: `5%`,
+        alignSelf: `flex-start`,
+    },
+    titleRowLayout: {
+        color: colors.fadeBlue,
+        fontSize: width / 17,
+        textAlign: `center`,
+        marginBottom: `10%`,
+    },
+    titleColumnLayout: {
+        color: colors.fadeBlue,
+        fontSize: width / 17,
+        textAlign: `center`,
+        marginBottom: `5%`,
+    },
+    message: {
+        color: `white`,
+        fontSize: width / 22,
+        textAlign: `center`,
+    },
+    buttonContainerRow: {
+        flexDirection: `row`,
+        justifyContent: `space-around`,
+        marginHorizontal: `4%`,
+        marginVertical: `6%`,
+    },
+    buttonContainerColumn: {
+        flexDirection: `column`,
+        justifyContent: `space-around`,
+        margin: `4%`,
+    },
+    buttonRow: {
+        ...stylesModal.okButton,
+        height: height / 16,
+        marginTop: 0,
+    },
+    firstButtonColumn: {
+        ...stylesModal.okButton,
+        height: height / 18,
+        width: width / 1.5,
+        marginTop: 0,
+        backgroundColor: colors.teal,
+    },
+    secondButtonColumn: {
+        alignSelf: `center`,
+        justifyContent: `center`,
+        height: height / 18,
+        width: width / 1.5,
+        marginTop: `2%`,
+    },
+    textButtonRow: {
+        textAlign: `center`,
+        fontSize: width / 24,
+        color: `white`,
+    },
+    textFirstButtonColumn: {
+        textAlign: `center`,
+        fontSize: width / 22,
+        paddingHorizontal: 15,
+        color: colors.semiDarkBlue,
+    },
+    textSecondButtonColumn: {
+        textAlign: `center`,
+        fontSize: width / 26,
+        color: colors.teal,
+    },
+});

package/{lib/typescript → dist/src}/components/activity/Activity.d.ts

@@ -1,11 +1,11 @@
+import { Activity as ActivityTypes, BolusCalculator } from "@hedia/types";
 import React from "react";
-import { Activity as ActivitySettings, BolusCalculator } from "@hedia/types";
 import { IActivityDisplayProps } from "../../types/types";
 export interface IProps extends IActivityDisplayProps {
     /** Details about the activity that affect the calculation */
     activity: BolusCalculator.Types.IActivityParams;
     /** The fraction (in the interval [0; 1]) by which the insulin recommendation is being reduced due to physical activity */
-    activityReduction: ActivitySettings.Types.ReductionType;
+    activityReduction: ActivityTypes.Types.ReductionType;
 }
 /**
  * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
@@ -24,4 +24,3 @@ export default class Activity extends React.Component<IProps> {
      */
     render(): JSX.Element;
 }
-//# sourceMappingURL=Activity.d.ts.map

package/dist/src/components/activity/Activity.js

@@ -0,0 +1,84 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
+import { i18n } from "../../locale/i18nUtils";
+import { Testing } from "../../types/enum";
+import { infoStyles } from "../InfoBars";
+import TextBold from "../text/TextBold";
+import TextRegular from "../text/TextRegular";
+import ActivityIcon from "./ActivityIcon";
+import ActivityIntensity from "./ActivityIntensity";
+/**
+ * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
+ */
+export default class Activity extends React.Component {
+    /**
+     * Steps:
+     * 1. Unpack activity, activityType, activityReduction, and activityTitle from props.
+     * 2. Compute the reductionPercentage by multiplying the activityReduction prop by 100 and rounding to the nearest integer.
+     * 3. Generate and return the JSX element to display the following on the screen:
+     * 	- Print the activity duration.
+     * 	- Display the ActivityIcon that corresponds to the type of activity.
+     * 	- Display the ActivityIntensity for the activity.
+     * 	- Print the reductionPercentage.
+     * @returns JSX Element containing all the user's physical activity details
+     */
+    render() {
+        const { activity, activityType, activityReduction, activityTitle } = this.props;
+        const reductionPercentage = ((activityReduction ?? 0) * 100).toFixed(0);
+        return (<View style={[infoStyles.container, activityStyles.botMargin]}>
+				<View style={infoStyles.margin}>
+					<View style={infoStyles.border}>
+						<View style={infoStyles.borderContainer}>
+							<View style={infoStyles.labelContainer}>
+								<TextBold style={infoStyles.label}>{i18n._(t `Activity`)}</TextBold>
+							</View>
+							<View style={infoStyles.valueUnitContainer}>
+								<View style={infoStyles.valueContainer}>
+									<TextBold style={infoStyles.value} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
+										{activity.activityDuration}
+									</TextBold>
+								</View>
+								<View style={infoStyles.unitContainer}>
+									<TextRegular style={infoStyles.units}>{i18n._(t `min`)}</TextRegular>
+								</View>
+							</View>
+						</View>
+						<ActivityIcon activityType={activityType} activityTitle={activityTitle}/>
+						<ActivityIntensity activityIntensity={activity.activityIntensity}/>
+						<View style={[infoStyles.borderContainer, activityStyles.topMargin]}>
+							<TextRegular style={activityStyles.infoText}>
+								{i18n._(t `Based on the selected activity your insulin recommendation is reduced by:`)}
+							</TextRegular>
+						</View>
+						<View style={[infoStyles.borderContainer, activityStyles.verticalMargin]}>
+							<TextBold style={activityStyles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
+								{reductionPercentage}%
+							</TextBold>
+						</View>
+					</View>
+				</View>
+			</View>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+const activityStyles = StyleSheet.create({
+    topMargin: {
+        marginTop: `2%`,
+    },
+    botMargin: {
+        marginBottom: `2%`,
+    },
+    verticalMargin: {
+        marginBottom: `2%`,
+    },
+    infoText: {
+        color: `rgba(160, 180, 240, 1)`,
+        fontSize: width / 24,
+    },
+    reductionPercentage: {
+        color: `white`,
+        marginTop: `2%`,
+        fontSize: width / 18,
+    },
+});

package/{lib/typescript → dist/src}/components/activity/ActivityIcon.d.ts

@@ -1,23 +1,22 @@
+import { Activity } from "@hedia/types";
 import React from "react";
-import { SvgProps } from "react-native-svg";
+import { ImageURISource } from "react-native";
 import { IActivityDisplayProps } from "../../types/types";
-/**
-Component used to displat the user's physical activity type icon
-Mapping from ActivityEnums to corresponding image resource.
-*/
+/** Mapping from ActivityEnums to corresponding image resource. */
+export declare const ACTIVITY_ICONS: Record<Activity.Enums.ActivityEnum, ImageURISource>;
+/** Component used to displat the user's physical activity type icon */
 export default class ActivityIcon extends React.Component<IActivityDisplayProps> {
     /**
      * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
      */
-    getActivityIcon: (props?: SvgProps) => JSX.Element;
+    getActivityIcon: () => ImageURISource;
     /**
      * Steps:
      * 1. Unpack activityType and activityTitle from props.
      * 2. Create a testID string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
      * @returns A JSX element including the following:
-     * 1. An svg component with the generated testID displaying the icon from getActivityIcon().
+     * 1. An image component with the generated testID displaying the icon from getActivityIcon().
      * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
      */
     render(): JSX.Element | null;
 }
-//# sourceMappingURL=ActivityIcon.d.ts.map