@hedia/recommendation-screen 2.2.0-alpha.39 → 2.2.0-alpha.4

package/dist/index.js

@@ -3,4 +3,3 @@ import * as Errors from "./src/utils/RecommendationError";
 export default RecommendationScreen;
 export { Errors };
 export * from "./src/types/enum";
-//# sourceMappingURL=index.js.map

package/dist/src/RecommendationScreen.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { AppStateStatus } from "react-native";
 import { BloodGlucoseUnit, BloodKetonesUnit, BolusCalculator, Languages, Logbook, UserSettings } from "@hedia/types";
-import { IActivityDisplayProps } from "./types/types";
 import { RecommendationError } from "./utils/RecommendationError";
+import { IActivityDisplayProps } from "./types/types";
 /** Represents both a suggestion by HDA and an actual amount of either insulin or carbohydrates. */
 export interface IResult {
     /** The suggested amount (of insulin in units or carbohydrates in grams) */
@@ -14,7 +14,7 @@ export interface IRecommendationProps {
     /** The blood glucose measurement unit that the user prefers. */
     bloodGlucoseUnit: BloodGlucoseUnit;
     /** The user’s preferred language. */
-    language: keyof typeof Languages;
+    language: Languages;
     /** The user’s preferred default reminder time in hours when they enter carbohydrates or an activity. */
     userReminder: number;
     /** The values needed to make an insulin recommendation calculation. */
@@ -66,7 +66,7 @@ export interface IRecommendationProps {
      * To be called in case a serious issue with the validity of input data is detected.
      * @param error The detected error.
      */
-    onError(error: RecommendationError | Error): void;
+    onError(error: RecommendationError): void;
     /**
      * Callback function taking a single argument of type boolean.
      * To be called to hide the bottom navigation bar while displaying modal dialogs.

package/dist/src/RecommendationScreen.js

@@ -1,24 +1,26 @@
 import React from "react";
-import { AppState, BackHandler, LogBox, StyleSheet, View } from "react-native";
+import { AppState, BackHandler, LogBox, ScrollView, StyleSheet, View, } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import * as Calculator from "@hedia/recommendation-calculator";
-import { Milliseconds, } from "@hedia/types";
-import Activity from "./components/activity/Activity";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
 import Header from "./components/Header";
 import InfoBars, { infoStyles } from "./components/InfoBars";
-import LimitationMessage from "./components/LimitationMessage";
-import Emotion from "./components/mood/Emotion";
 import RecentInsulin from "./components/RecentInsulin";
-import RecommendationModal from "./components/RecommendationModal";
 import RecommendedCarbs from "./components/RecommendedCarbs";
 import RecommendedInsulin from "./components/RecommendedInsulin";
 import Remeasure from "./components/Remeasure";
+import * as Calculator from "@hedia/recommendation-calculator";
+import { Milliseconds, } from "@hedia/types";
+import { I18nProvider } from "@lingui/react";
+import Emotion from "./components/mood/Emotion";
 import TransferToLogbook from "./components/TransferToLogbook";
+import { t } from "@lingui/macro";
+import Activity from "./components/activity/Activity";
+import LimitationMessage from "./components/LimitationMessage";
+import RecommendationModal from "./components/RecommendationModal";
 import TwoOptionModal, { modalStyle } from "./components/TwoOptionModal";
-import { changeLocale, translate } from "./locales/translate";
+import { changeLanguage, i18n } from "./locale/i18nUtils";
 import { Testing } from "./types/enum";
 import { Messages } from "./utils/AttentionMessages";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
 import { getAttentionMessage, getBGLevel, getLimitationMessage, getReminder } from "./utils/RecommendationUtils";
 import { Utils } from "./utils/Utils";
 import { validateParams } from "./utils/Validations";
@@ -91,8 +93,8 @@ export default class RecommendationScreen extends React.Component {
         super(props);
         try {
             validateParams(props);
-            changeLocale(props.language);
             this.recommendationDate = new Date(global.Date.now());
+            changeLanguage(props.language);
             const { recentBoluses } = props.calculatorParams;
             const { bolus, carbRecommendation, activityReduction, wasLimited, activeInsulin } = Calculator.calculateRecommendation(props.calculatorParams);
             this.suggestedCarbs = carbRecommendation;
@@ -282,7 +284,7 @@ export default class RecommendationScreen extends React.Component {
     handleNoRecentInsulin = () => {
         this.setState({ isRecommendationDisplayed: true }, () => {
             setTimeout(() => {
-                this.scrollView?.scrollToEnd(true);
+                this.scrollView?.scrollToEnd({ animated: true });
             }, 0);
         });
     };
@@ -460,42 +462,43 @@ export default class RecommendationScreen extends React.Component {
         const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
         const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
         const displayedBKL = currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
-        return (<>
-				<KeyboardAwareScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} enableResetScrollToCoords={false} style={containerStyles.container} ref={(view) => {
+        return (<I18nProvider language={this.props.language} i18n={i18n}>
+				<KeyboardAwareScrollView testID={RecommendationScreenTestIds.RecommendationScrollView}>
+					<ScrollView style={containerStyles.container} ref={(view) => {
                 if (view !== null) {
                     this.scrollView = view;
                 }
             }}>
-					<Header exitCallback={this.onExit}/>
-					<InfoBars label={translate(`Active Insulin`)} value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null} unit={translate(`units`)} showNullAsDash={false} testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}/>
-					<InfoBars label={translate(`Blood Glucose Level`)} value={displayedBGL} unit={this.props.bloodGlucoseUnit} showNullAsDash={true} testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}/>
-					<InfoBars label={translate(`Blood Ketone Level`)} value={displayedBKL} unit={this.props.bloodKetoneUnit} showNullAsDash={true} testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}/>
-					<View style={containerStyles.calcContainer}>
-						<View style={containerStyles.calcMargin}>
-							<View style={[
+						<Header exitCallback={this.onExit}/>
+						<InfoBars label={i18n._(t `Active Insulin`)} value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null} unit={i18n._(t `units`)} showNullAsDash={false} testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}/>
+						<InfoBars label={i18n._(t `Blood Glucose Level`)} value={displayedBGL} unit={this.props.bloodGlucoseUnit} showNullAsDash={true} testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}/>
+						<InfoBars label={i18n._(t `Blood Ketone Level`)} value={displayedBKL} unit={this.props.bloodKetoneUnit} showNullAsDash={true} testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}/>
+						<View style={containerStyles.calcContainer}>
+							<View style={containerStyles.calcMargin}>
+								<View style={[
                 containerStyles.calcBorder,
                 {
                     borderColor: recommendedCarbs ? BORDER_COLOUR_TEAL : BORDER_COLOUR_GREY,
                 },
             ]}>
-								<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
+									<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
+								</View>
 							</View>
 						</View>
-					</View>
-					{this.props.calculatorParams.activity && this.props.activityDisplayProps ? (<Activity activity={this.props.calculatorParams.activity} activityType={this.props.activityDisplayProps.activityType} activityTitle={this.props.activityDisplayProps.activityTitle} activityReduction={this.state.activityReduction}/>) : null}
-					<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={this.state.remeasureTime}/>
-					{!this.state.isRecommendationDisplayed ? (<RecentInsulin onRecentInsulinYes={this.props.onRecentInsulinYes} onRecentInsulinNo={this.handleNoRecentInsulin}/>) : (<RecommendedInsulin injectionMethod={this.props.injectionMethod} insulinRecommendation={insulinRecommendation} enteredInsulin={enteredInsulin} activityReduction={activityReduction} updateRecommendedInsulin={this.updateInsulinRecommendation}/>)}
-					<Emotion moodSelected={this.handleMoodSelected} currentMood={this.state.selectedMood}/>
-					<TransferToLogbook visible={isRecommendationDisplayed} transfer={this.handleTransfer}/>
-					<RecommendationModal isVisible={recommendationModal} suggestedCarbohydrates={carbRecommendationProp} attentionMessage={this.getBGLevelAttentionMessage()} limitationMessage={this.getLimitationAttentionMessage()} onClickOkButton={this.hideAttentionModal} onAcceptCarbohydrates={this.acceptCarbRecommendation} onDeclineCarbohydrates={this.declineCarbRecommendation}/>
+						{this.props.calculatorParams.activity && this.props.activityDisplayProps ? (<Activity activity={this.props.calculatorParams.activity} activityType={this.props.activityDisplayProps.activityType} activityTitle={this.props.activityDisplayProps.activityTitle} activityReduction={this.state.activityReduction}/>) : null}
+						<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={this.state.remeasureTime}/>
+						{!this.state.isRecommendationDisplayed ? (<RecentInsulin onRecentInsulinYes={this.props.onRecentInsulinYes} onRecentInsulinNo={this.handleNoRecentInsulin}/>) : (<RecommendedInsulin injectionMethod={this.props.injectionMethod} insulinRecommendation={insulinRecommendation} enteredInsulin={enteredInsulin} activityReduction={activityReduction} updateRecommendedInsulin={this.updateInsulinRecommendation}/>)}
+						<Emotion moodSelected={this.handleMoodSelected} currentMood={this.state.selectedMood}/>
+						<TransferToLogbook visible={isRecommendationDisplayed} transfer={this.handleTransfer}/>
+						<RecommendationModal isVisible={recommendationModal} suggestedCarbohydrates={carbRecommendationProp} attentionMessage={this.getBGLevelAttentionMessage()} limitationMessage={this.getLimitationAttentionMessage()} onClickOkButton={this.hideAttentionModal} onAcceptCarbohydrates={this.acceptCarbRecommendation} onDeclineCarbohydrates={this.declineCarbRecommendation}/>
+					</ScrollView>
+					{this.state.showExitModal ? (<TwoOptionModal title={i18n._(t `Save data before closing?`)} message={i18n._(t `Your saved data will be used for future calculations.`)} textFirstOption={i18n._(t `Save to logbook`)} textSecondOption={i18n._(t `Close calculation`)} isCancelable={true} rowAsButtonLayout={true} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>) : null}
+					{this.state.showLimitationMessage ? (<View style={modalStyle.container}>
+							<LimitationMessage limitationMessage={this.getLimitationAttentionMessage()} onPressNextButton={this.hideLimitationMessage}/>
+						</View>) : null}
+					{this.state.showTimeoutModal ? (this.state.isRecommendationDisplayed ? (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={i18n._(t `Yes, save to logbook`)} textSecondOption={i18n._(t `No, return to dashboard`)} rowAsButtonLayout={false} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={i18n._(t `Start new calculation`)} textSecondOption={i18n._(t `Return to dashboard`)} rowAsButtonLayout={false} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>)) : null}
 				</KeyboardAwareScrollView>
-				{this.state.showExitModal && (<TwoOptionModal title={translate(`Save data before closing?`)} message={translate(`Your saved data will be used for future calculations.`)} textFirstOption={translate(`Save to logbook`)} textSecondOption={translate(`Close calculation`)} isCancelable={true} rowAsButtonLayout={true} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>)}
-				{this.state.showLimitationMessage && (<View style={modalStyle.container}>
-						<LimitationMessage limitationMessage={this.getLimitationAttentionMessage()} onPressNextButton={this.hideLimitationMessage}/>
-					</View>)}
-				{this.state.showTimeoutModal &&
-                (this.state.isRecommendationDisplayed ? (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={translate(`Yes, save to logbook`)} textSecondOption={translate(`No, return to dashboard`)} rowAsButtonLayout={false} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={translate(`Start new calculation`)} textSecondOption={translate(`Return to dashboard`)} rowAsButtonLayout={false} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>))}
-			</>);
+			</I18nProvider>);
     }
 }
 const containerStyles = StyleSheet.create({
@@ -516,4 +519,3 @@ const containerStyles = StyleSheet.create({
         borderColor: BORDER_COLOUR_TEAL,
     },
 });
-//# sourceMappingURL=RecommendationScreen.js.map

package/dist/src/components/Header.js

@@ -1,6 +1,7 @@
+import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
 import Icon from "./Icon";
@@ -23,7 +24,7 @@ export default class Header extends React.Component {
 						</View>
 						<View style={headerStyles.headerTextContainer}>
 							<TextBold style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
-								{translate(`INSULIN{0}RECOMMENDATION`, { 0: `\n` })}
+								{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
 							</TextBold>
 						</View>
 						<View style={headerStyles.headerFiller}/>
@@ -72,4 +73,3 @@ const headerStyles = StyleSheet.create({
         flex: 1,
     },
 });
-//# sourceMappingURL=Header.js.map

package/dist/src/components/Icon.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* tslint:disable */
 import React from "react";
 /** Mapping from react-native-vector-icons identifier to corresponding icon resource. */
 export const IconSets = {
@@ -39,4 +41,3 @@ export default class Icon extends React.Component {
 Icon.defaultProps = {
     iconIdentifier: `FontAwesome/question`,
 };
-//# sourceMappingURL=Icon.js.map

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
+import React from "react";
 import { Testing } from "../types/enum";
 export interface IProps {
     /** The display label that describes the value to the user. */

package/dist/src/components/InfoBars.js

@@ -1,7 +1,8 @@
+import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
+import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
-import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { BORDER_COLOUR_GREY } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
 import TextBold from "./text/TextBold";
@@ -37,7 +38,7 @@ export default class InfoBars extends React.Component {
         if (!unit) {
             return null;
         }
-        return unit === translate(`units`) ? unit : Utils.formatUnit(unit);
+        return unit === i18n._(t `units`) ? unit : Utils.formatUnit(unit);
     };
     /**
      * @returns JSX element to display a card with the entered value.
@@ -123,4 +124,3 @@ export const infoStyles = StyleSheet.create({
         paddingLeft: `5%`,
     },
 });
-//# sourceMappingURL=InfoBars.js.map

package/dist/src/components/InvisibleNumberInput.js

@@ -48,7 +48,7 @@ export default class InvisibleNumberInput extends React.Component {
      * @returns A string with the cleaned text.
      */
     cleanInput = (text) => {
-        const replaced = text.replace(/,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+        const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
         const round = (value) => {
             const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
             const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
@@ -72,7 +72,7 @@ export default class InvisibleNumberInput extends React.Component {
      * @param text The updated text in the input field
      */
     handleOnChangeText = (text) => {
-        const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/,/g, `.`);
+        const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
         let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
         if (!this.props.negativeAllowed) {
             replacedSeparator = replacedSeparator.replace(/[^0-9.]/g, ``);
@@ -119,4 +119,3 @@ const inputStyles = StyleSheet.create({
         }),
     },
 });
-//# sourceMappingURL=InvisibleNumberInput.js.map

package/dist/src/components/LimitationMessage.js

@@ -1,6 +1,7 @@
+import { t } from "@lingui/macro";
 import * as React from "react";
 import { TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { stylesModal } from "./RecommendationModal";
 import TextBold from "./text/TextBold";
@@ -15,16 +16,15 @@ export default class LimitationMessage extends React.Component {
         return (<React.Fragment>
 				<View style={stylesModal.container}>
 					<View style={stylesModal.titleContainer}>
-						<TextBold style={stylesModal.textTittleMessage}>{translate(`Attention`)}</TextBold>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
 					</View>
 					<TextRegular style={stylesModal.textMessage}>{limitationMessage}</TextRegular>
 				</View>
 				<View style={stylesModal.containerAcceptButton}>
 					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
-						<TextRegular style={stylesModal.buttonText}>{translate(`OK`)}</TextRegular>
+						<TextRegular style={stylesModal.buttonText}>{i18n._(t `OK`)}</TextRegular>
 					</TouchableOpacity>
 				</View>
 			</React.Fragment>);
     };
 }
-//# sourceMappingURL=LimitationMessage.js.map

package/dist/src/components/LineSeparator.js

@@ -16,4 +16,3 @@ const lineSeparatorStyles = StyleSheet.create({
         borderBottomWidth: 1,
     },
 });
-//# sourceMappingURL=LineSeparator.js.map

package/dist/src/components/RecentInsulin.js

@@ -1,6 +1,7 @@
+import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { infoStyles } from "./InfoBars";
 import TextBold from "./text/TextBold";
@@ -16,21 +17,21 @@ export default class RecentInsulin extends React.Component {
         return (<View style={recentInsulinStyles.container}>
 				<View style={recentInsulinStyles.titleContainer}>
 					<TextBold style={recentInsulinStyles.recommended}>
-						{translate(`Recommended amount of insulin`)}
+						{i18n._(t `Recommended amount of insulin`)}
 					</TextBold>
 				</View>
 				<View style={recentInsulinStyles.takenInsulinContainer}>
 					<TextBold style={recentInsulinStyles.takenInsulin}>
-						{translate(`Have you taken insulin within the last 4 hours?`)}
+						{i18n._(t `Have you taken insulin within the last 4 hours?`)}
 					</TextBold>
 				</View>
 				<View style={recentInsulinStyles.buttonContainer}>
 					<View style={recentInsulinStyles.filler}/>
 					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
-						<TextBold style={recentInsulinStyles.yesNoText}>{translate(`Yes`)}</TextBold>
+						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</TextBold>
 					</TouchableOpacity>
 					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
-						<TextBold style={recentInsulinStyles.yesNoText}>{translate(`No`)}</TextBold>
+						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</TextBold>
 					</TouchableOpacity>
 					<View style={recentInsulinStyles.filler}/>
 				</View>
@@ -90,4 +91,3 @@ const recentInsulinStyles = StyleSheet.create({
         flex: 1,
     },
 });
-//# sourceMappingURL=RecentInsulin.js.map

package/dist/src/components/RecommendationModal.js

@@ -1,7 +1,8 @@
+import { t } from "@lingui/macro";
 import * as React from "react";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BORDER_COLOUR_TEAL } from "../utils/Constants";
 import LimitationMessage from "./LimitationMessage";
@@ -50,10 +51,10 @@ export default class RecommendationModal extends React.Component {
     recommendationButtons = () => {
         return (<View style={stylesModal.recommendationButtonsContainer}>
 				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
-					<TextRegular style={stylesModal.affirmativeCarbsText}>{translate(`OK`)}</TextRegular>
+					<TextRegular style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</TextRegular>
 				</TouchableOpacity>
 				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
-					<TextRegular style={stylesModal.negativeCarbsText}>{translate(`NO`)}</TextRegular>
+					<TextRegular style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</TextRegular>
 				</TouchableOpacity>
 			</View>);
     };
@@ -68,7 +69,7 @@ export default class RecommendationModal extends React.Component {
 				<View style={stylesModal.innerView}>
 					<View style={stylesModal.recommendationRow}>
 						<TextRegular style={stylesModal.recommendEatingText}>
-							{translate(`We recommend eating an additional:`)}
+							{i18n._(t `We recommend eating an additional:`)}
 						</TextRegular>
 					</View>
 					<View style={stylesModal.suggestedContainer}>
@@ -77,19 +78,19 @@ export default class RecommendationModal extends React.Component {
 								{`${displayCarbs} `}
 							</TextBold>
 							<TextRegular style={stylesModal.carbohydrateText}>
-								{translate(`grams of carbohydrates`)}
+								{i18n._(t `grams of carbohydrates`)}
 							</TextRegular>
 						</TextRegular>
 					</View>
 					<View style={stylesModal.recommendationRow}>
 						<TextRegular style={stylesModal.recommendEatingText}>
-							{translate(`Instead of taking insulin`)}
+							{i18n._(t `Instead of taking insulin`)}
 						</TextRegular>
 					</View>
 				</View>
 				<View style={stylesModal.addToCalculationContainer}>
 					<TextRegular style={stylesModal.addToCalculation}>
-						{translate(`Would you like to add this to your current calculation?`)}
+						{i18n._(t `Would you like to add this to your current calculation?`)}
 					</TextRegular>
 					{this.recommendationButtons()}
 				</View>
@@ -104,14 +105,14 @@ export default class RecommendationModal extends React.Component {
         return (<React.Fragment>
 				<View style={stylesModal.container}>
 					<View style={stylesModal.titleContainer}>
-						<TextBold style={stylesModal.textTittleMessage}>{translate(`Attention`)}</TextBold>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
 					</View>
 					<TextRegular style={stylesModal.textMessage}>{attentionMessage}</TextRegular>
 					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
 				</View>
 				{willRecommendCarbs ? null : (<View style={stylesModal.containerAcceptButton}>
 						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
-							<TextRegular style={stylesModal.buttonText}>{translate(`OK`)}</TextRegular>
+							<TextRegular style={stylesModal.buttonText}>{i18n._(t `OK`)}</TextRegular>
 						</TouchableOpacity>
 					</View>)}
 			</React.Fragment>);
@@ -218,4 +219,3 @@ export const stylesModal = StyleSheet.create({
         justifyContent: `center`,
     },
 });
-//# sourceMappingURL=RecommendationModal.js.map

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { Testing } from "../types/enum";
-declare const RecommendedCarbsTestIds: typeof Testing.Id.RecommendedCarbsTestIds;
 export interface ICalculationRow {
     label: string;
     value: string;
@@ -93,4 +92,3 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
      */
     render(): JSX.Element;
 }
-export {};

package/dist/src/components/RecommendedCarbs.js

@@ -1,6 +1,7 @@
+import { t } from "@lingui/macro";
 import React from "react";
 import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
 import { CarbohydrateLimitError } from "../utils/RecommendationError";
@@ -63,8 +64,10 @@ export default class RecommendedCarbs extends React.Component {
         if (carbs >= 0) {
             if (carbs > 300) {
                 this.setState({ partialInput: this.props.recommendedCarbs });
-                return Alert.alert(translate(`Attention`), CarbohydrateLimitError().message, [
-                    { text: translate(`OK`) },
+                return Alert.alert(i18n._(t `Attention`), CarbohydrateLimitError().message, [
+                    {
+                        text: i18n._(t `OK`),
+                    },
                 ]);
             }
             this.props.changedRecommendedCarbs(carbs);
@@ -93,12 +96,12 @@ export default class RecommendedCarbs extends React.Component {
 						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
 							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
 						</TouchableOpacity>
-						<TextBold style={calculationStyles.recommendedLabel}>{translate(`Recommended`)}</TextBold>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</TextBold>
 					</View>
 				</View>
 				<View style={calculationStyles.borderContainer}>
 					<View style={calculationStyles.recommendedContainer}>
-						<TextBold style={calculationStyles.recommendedLabel}>{translate(`Additional`)}</TextBold>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</TextBold>
 					</View>
 					<View style={calculationStyles.valueUnitContainer}>
 						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
@@ -112,7 +115,7 @@ export default class RecommendedCarbs extends React.Component {
 									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
 								</View>
 								<TextRegular style={{ ...calculationStyles.units, color: BORDER_COLOUR_TEAL }}>
-									{translate(`grams`)}
+									{i18n._(t `grams`)}
 								</TextRegular>
 							</View>
 						</TouchableOpacity>
@@ -120,9 +123,9 @@ export default class RecommendedCarbs extends React.Component {
 				</View>
 				<LineSeparator color={BORDER_COLOUR_TEAL}/>
 				{this.renderRow({
-                label: translate(`Total`),
+                label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
-                units: translate(`grams`),
+                units: i18n._(t `grams`),
             }, RecommendedCarbsTestIds.TotalCarbs)}
 				<InvisibleNumberInput testID={RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
 			</React.Fragment>);
@@ -160,13 +163,15 @@ export default class RecommendedCarbs extends React.Component {
         const carbs = Number(this.props.recommendedCarbs);
         return (<React.Fragment>
 				<View style={calculationStyles.foodTitleContainer}>
-					<TextBold style={infoStyles.label}>{translate(`Food`)}</TextBold>
-					<TextRegular style={calculationStyles.foodUnitsLabel}>{translate(`Carbohydrates`)}</TextRegular>
+					<TextBold style={infoStyles.label}>{i18n._(t `Food`)}</TextBold>
+					<TextRegular style={calculationStyles.foodUnitsLabel}>
+						{`(${i18n._(t `Carbohydrates`)})`}
+					</TextRegular>
 				</View>
 				{this.renderRow({
-                label: translate(`Entered`),
+                label: i18n._(t `Entered`),
                 value: this.props.enteredCarbs,
-                units: translate(`grams`),
+                units: i18n._(t `grams`),
             }, RecommendedCarbsTestIds.EnteredCarbs)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
 			</React.Fragment>);
@@ -248,4 +253,3 @@ const calculationStyles = StyleSheet.create({
         paddingBottom: `0.5%`,
     },
 });
-//# sourceMappingURL=RecommendedCarbs.js.map

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { UserSettings } from "@hedia/types";
+import React from "react";
 export interface IProps {
     /** The amount of insulin in units to display to the user as a recommendation. */
     insulinRecommendation: number;

package/dist/src/components/RecommendedInsulin.js

@@ -1,8 +1,9 @@
+import { BolusCalculator } from "@hedia/types";
+import { t } from "@lingui/macro";
 import React from "react";
 import { Alert, Dimensions, Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
-import { BolusCalculator } from "@hedia/types";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { Messages } from "../utils/AttentionMessages";
 import { Utils } from "../utils/Utils";
@@ -87,8 +88,10 @@ export default class RecommendedInsulin extends React.Component {
         if (rounded > limited) {
             this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
             this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
-            return Alert.alert(translate(`Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
-                { text: translate(`OK`) },
+            return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
+                {
+                    text: i18n._(t `OK`),
+                },
             ]);
         }
         this.updatePartially(`${rounded}`);
@@ -106,7 +109,7 @@ export default class RecommendedInsulin extends React.Component {
 					<LinearGradient style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
 						<View style={recommendedInsulinStyles.recommendedTextContainer}>
 							<TextBold style={recommendedInsulinStyles.recommendedText}>
-								{translate(`Recommended amount of insulin`)}
+								{i18n._(t `Recommended amount of insulin`)}
 							</TextBold>
 						</View>
 						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
@@ -114,7 +117,7 @@ export default class RecommendedInsulin extends React.Component {
 								<TextBold style={recommendedInsulinStyles.value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
 									{shownInsulin}
 								</TextBold>
-								<TextRegular style={recommendedInsulinStyles.units}>{translate(`Units`)}</TextRegular>
+								<TextRegular style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</TextRegular>
 							</View>
 							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon}/>
 						</View>
@@ -168,4 +171,3 @@ const recommendedInsulinStyles = StyleSheet.create({
         marginRight: `5%`,
     },
 });
-//# sourceMappingURL=RecommendedInsulin.js.map

package/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.