@hedia/recommendation-screen 1.2.0 → 1.3.0

package/src/RecommendationScreen.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ScrollView, StyleSheet, View, YellowBox } from "react-native";
+
 import { ActivityEnum, BGUnit, InjectionMethod, Languages, Milliseconds, MoodEnum } from "./types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
 
@@ -24,10 +25,10 @@ import { changeLanguage, i18n } from "./locale/i18nUtils";
 import { IActivity, logbookEntry } from "./types/types";
 import { AttentionMessage } from "./utils/AttentionMessages";
 import {
+	assignTargetBGL,
 	getAttentionMessage,
 	getBGLevel,
 	getLimitationMessage,
-	getParams,
 	getReminder,
 } from "./utils/RecommendationUtils";
 import { Utils } from "./utils/Utils";
@@ -79,54 +80,70 @@ interface IState {
 }
 
 export default class RecommendationScreen extends React.Component<IRecommendationProps, IState> {
-	private readonly timer: NodeJS.Timeout;
+	private readonly timer: ReturnType<typeof setTimeout>;
 	private readonly suggestedCarbs: number;
+	private readonly hasError: boolean = false;
 	private scrollView: ScrollView;
 
 	constructor(props: IRecommendationProps) {
 		super(props);
 		try {
-			validateParams(props);
+			validateParams(this.props);
+
+			changeLanguage(props.language);
+
+			const { recentBoluses } = this.props?.calculatorParams;
+			const {
+				bolus,
+				carbRecommendation,
+				activityReduction,
+				wasLimited,
+				activeInsulin,
+			} = Calculator.calculateRecommendation(assignTargetBGL(this.props.calculatorParams));
+
+			this.suggestedCarbs = carbRecommendation;
+
+			this.state = {
+				remeasureTime: this.getBGLevelRemeasurementReminder(),
+				isRecommendationDisplayed: recentBoluses?.length !== 0,
+				insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
+				wasLimited,
+				activityReduction,
+				bolus,
+				carbRecommendation,
+				activeInsulin,
+				selectedMood: null,
+				recommendationModal:
+					wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
+				exitModal: false,
+			};
+
+			this.timer = setTimeout((): void => {
+				props.onError(TimeoutLimitError());
+			}, Milliseconds.Minute * 15);
 		} catch (error) {
-			props.onError(error);
+			this.hasError = true;
+			this.props.onError(error);
 		}
+	}
 
-		changeLanguage(props.language);
-
-		const { recentBoluses } = props?.calculatorParams;
-		const { bolus, carbRecommendation, activityReduction, wasLimited } = Calculator.calculateRecommendation(
-			getParams(this.props),
-		);
-
-		this.suggestedCarbs = carbRecommendation;
-
-		const activeInsulin = Calculator.calculateActiveInsulin(recentBoluses ?? []);
-
-		this.state = {
-			remeasureTime: this.getBGLevelRemeasurementReminder(),
-			isRecommendationDisplayed: recentBoluses?.length !== 0,
-			insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
-			wasLimited,
-			activityReduction,
-			bolus,
-			carbRecommendation,
-			activeInsulin,
-			selectedMood: null,
-			recommendationModal: wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
-			exitModal: false,
-		};
-
-		this.timer = setTimeout((): void => {
-			props.onError(TimeoutLimitError());
-		}, Milliseconds.Minute * 15);
+	public componentWillUnmount(): void {
+		clearTimeout(this.timer);
 	}
 
+	public recalculateInsulin = (calculatorParams: Calculator.IRecommendationParams): void => {
+		const { bolus } = Calculator.calculateRecommendation(assignTargetBGL(calculatorParams));
+		this.setState({
+			insulinRecommendation: Utils.roundValue(bolus, this.props.injectionMethod),
+			enteredInsulin: undefined,
+		});
+	};
+
 	public onExit = (): void => {
 		if (this.state.isRecommendationDisplayed) {
 			this.setState({ exitModal: true }, (): void => this.props.showBolusBar(!this.state.exitModal));
 		} else {
 			this.props.exitCallback();
-			clearTimeout(this.timer);
 		}
 	};
 
@@ -143,11 +160,16 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 	};
 
 	public updateCarbRecommendation = (enteredCarbs: number): void => {
-		this.setState({ enteredCarbs });
+		const providedCarbs = this.props.calculatorParams.carbohydrates;
+		this.setState({ enteredCarbs }, (): void =>
+			this.recalculateInsulin({ ...this.props.calculatorParams, carbohydrates: providedCarbs + enteredCarbs }),
+		);
 	};
 
 	public removeCarbRecommendation = (): void => {
-		this.setState({ enteredCarbs: null, carbRecommendation: null });
+		this.setState({ enteredCarbs: null, carbRecommendation: null }, (): void =>
+			this.recalculateInsulin({ ...this.props.calculatorParams }),
+		);
 	};
 
 	public declineCarbRecommendation = (): void => {
@@ -168,7 +190,6 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 	};
 	public closeCalculation = (): void => {
 		this.hideExitModal();
-		clearTimeout(this.timer);
 		this.props.closeCalculationCallback();
 	};
 
@@ -184,19 +205,9 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 		if (this.state.exitModal) {
 			this.hideExitModal();
 		}
-		this.props.transferToLogbook(
-			{
-				suggested: this.suggestedCarbs,
-				entered: this.state.enteredCarbs,
-			},
-			{
-				suggested: this.state.insulinRecommendation,
-				entered: this.state.enteredInsulin,
-			},
-			this.state.remeasureTime,
-		);
-
-		clearTimeout(this.timer);
+		const carbs: IResult = { suggested: this.suggestedCarbs, entered: this.state.enteredCarbs };
+		const insulin: IResult = { suggested: this.state.insulinRecommendation, entered: this.state.enteredInsulin };
+		this.props.transferToLogbook(carbs, insulin, this.state.remeasureTime);
 	};
 
 	public getBGLevelAttentionMessage = (): AttentionMessage => {
@@ -218,15 +229,30 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 	};
 
 	public render(): JSX.Element {
-		const { activeInsulin, recommendationModal, carbRecommendation, enteredCarbs } = this.state;
-		const { calculatorParams } = this.props;
+		if (this.hasError) {
+			return <View style={containerStyles.container} />;
+		}
+
+		const {
+			activeInsulin,
+			recommendationModal,
+			carbRecommendation,
+			enteredCarbs,
+			enteredInsulin,
+			insulinRecommendation,
+			activityReduction,
+			isRecommendationDisplayed,
+		} = this.state;
+		const { calculatorParams, units } = this.props;
 		const { currentBGL, carbohydrates } = calculatorParams;
+		const displayedBGL = units === BGUnit.MMOL_L ? currentBGL : Utils.convertToMGDL(currentBGL);
 
 		return (
 			<I18nProvider language={this.props.language} i18n={i18n}>
 				<ScrollView style={containerStyles.container} ref={(view): ScrollView => (this.scrollView = view)}>
 					<Header exitCallback={this.onExit} />
 					<InfoBars
+						style={{ flex: 5 }}
 						label={i18n._(t`Active Insulin`)}
 						value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null}
 						units={i18n._(t`units`)}
@@ -234,7 +260,7 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 					/>
 					<InfoBars
 						label={i18n._(t`Blood Glucose Level`)}
-						value={currentBGL ? `${currentBGL}` : null}
+						value={currentBGL ? `${displayedBGL}` : null}
 						units={this.props.units}
 						showZeroAsDash={true}
 					/>
@@ -253,7 +279,6 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 									changedRecommendedCarbs={this.updateCarbRecommendation}
 									recommendedCarbs={`${enteredCarbs ?? Math.round(carbRecommendation)}`}
 									removeRecommendedCarbs={this.removeCarbRecommendation}
-									onError={this.props.onError}
 								/>
 								<Remeasure
 									onSliderChange={this.updateRemeasureTime}
@@ -277,14 +302,14 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 					) : (
 						<RecommendedInsulin
 							injectionMethod={this.props.injectionMethod}
-							insulinRecommendation={this.state.enteredInsulin ?? this.state.insulinRecommendation}
-							activityReduction={this.state.activityReduction}
+							insulinRecommendation={insulinRecommendation}
+							enteredInsulin={enteredInsulin}
+							activityReduction={activityReduction}
 							updateRecommendedInsulin={this.updateInsulinRecommendation}
-							onError={this.props.onError}
 						/>
 					)}
 					<Emotion moodSelected={this.handleMoodSelected} currentMood={this.state.selectedMood} />
-					<TransferToLogbook visible={this.state.isRecommendationDisplayed} transfer={this.handleTransfer} />
+					<TransferToLogbook visible={isRecommendationDisplayed} transfer={this.handleTransfer} />
 					<RecommendationModal
 						isVisible={recommendationModal}
 						suggestedCarbohydrates={carbRecommendation}

package/src/components/InfoBars.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
 export interface IProps {
     label: string;
     value?: string;
     units: string;
     showZeroAsDash: boolean;
+    style?: StyleProp<ViewStyle>;
 }
 export default class InfoBars extends React.Component<IProps> {
     render(): JSX.Element;

package/src/components/InfoBars.jsx

@@ -18,8 +18,8 @@ class InfoBars extends react_1.default.Component {
 							<react_native_1.View style={exports.infoStyles.labelContainer}>
 								<react_native_1.Text style={exports.infoStyles.label}>{this.props.label}</react_native_1.Text>
 							</react_native_1.View>
-							<react_native_1.View style={exports.infoStyles.valueUnitContainer}>
-								<react_native_1.View style={exports.infoStyles.valueContainer}>
+							<react_native_1.View style={[{ ...exports.infoStyles.valueUnitContainer }, this.props.style]}>
+								<react_native_1.View style={[{ ...exports.infoStyles.valueContainer }, this.props.style]}>
 									<react_native_1.Text style={exports.infoStyles.value}>{displayedValue}</react_native_1.Text>
 								</react_native_1.View>
 								<react_native_1.View style={exports.infoStyles.unitContainer}>
@@ -67,7 +67,7 @@ exports.infoStyles = react_native_1.StyleSheet.create({
         flexDirection: `row`,
     },
     valueContainer: {
-        flex: 1,
+        flex: 4,
         justifyContent: `flex-end`,
     },
     value: {
@@ -77,7 +77,7 @@ exports.infoStyles = react_native_1.StyleSheet.create({
         textAlign: `right`,
     },
     unitContainer: {
-        flex: 1,
+        flex: 4,
         justifyContent: `flex-end`,
         paddingBottom: `3%`,
     },

package/src/components/InfoBars.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { Dimensions, StyleProp, StyleSheet, Text, View, ViewStyle } from "react-native";
 import { BORDER_COLOUR_GREY } from "../utils/Constants";
 import { headerStyles } from "./Header";
 
@@ -8,12 +8,12 @@ export interface IProps {
 	value?: string;
 	units: string;
 	showZeroAsDash: boolean;
+	style?: StyleProp<ViewStyle>;
 }
 
 export default class InfoBars extends React.Component<IProps> {
 	public render(): JSX.Element {
 		const displayedValue = this.props.value ?? (this.props.showZeroAsDash ? `-.-` : `0`);
-
 		return (
 			<View style={infoStyles.container}>
 				<View style={infoStyles.margin}>
@@ -22,8 +22,8 @@ export default class InfoBars extends React.Component<IProps> {
 							<View style={infoStyles.labelContainer}>
 								<Text style={infoStyles.label}>{this.props.label}</Text>
 							</View>
-							<View style={infoStyles.valueUnitContainer}>
-								<View style={infoStyles.valueContainer}>
+							<View style={[{ ...infoStyles.valueUnitContainer }, this.props.style]}>
+								<View style={[{ ...infoStyles.valueContainer }, this.props.style]}>
 									<Text style={infoStyles.value}>{displayedValue}</Text>
 								</View>
 								<View style={infoStyles.unitContainer}>
@@ -72,7 +72,7 @@ export const infoStyles = StyleSheet.create({
 		flexDirection: `row`,
 	},
 	valueContainer: {
-		flex: 1,
+		flex: 4,
 		justifyContent: `flex-end`,
 	},
 	value: {
@@ -82,7 +82,7 @@ export const infoStyles = StyleSheet.create({
 		textAlign: `right`,
 	},
 	unitContainer: {
-		flex: 1,
+		flex: 4,
 		justifyContent: `flex-end`,
 		paddingBottom: `3%`,
 	},

package/src/components/InvisibleNumberInput.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     decimalPlaces: number;
     cleanPartialInput: boolean;
     negativeAllowed: boolean;
+    maxLength?: number;
     visible(toggle: () => void): void;
     onEnd?(value: number): void;
     partialInput?(value: string): void;

package/src/components/InvisibleNumberInput.jsx

@@ -51,7 +51,7 @@ class InvisibleNumberInput extends react_1.default.Component {
         });
     }
     render() {
-        return (<react_native_1.TextInput accessibilityLabel="InvisibleNumberInput" value={`${this.state.value}`} ref={(textInput) => (this.textInput = textInput)} style={inputStyles.textInput} keyboardType="numeric" onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit}/>);
+        return (<react_native_1.TextInput accessibilityLabel="InvisibleNumberInput" value={`${this.state.value}`} ref={(textInput) => (this.textInput = textInput)} style={inputStyles.textInput} keyboardType="numeric" onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit} maxLength={this.props.maxLength} selectTextOnFocus/>);
     }
 }
 exports.default = InvisibleNumberInput;

package/src/components/InvisibleNumberInput.tsx

@@ -6,6 +6,7 @@ interface IProps {
 	decimalPlaces: number;
 	cleanPartialInput: boolean;
 	negativeAllowed: boolean;
+	maxLength?: number;
 	visible(toggle: () => void): void;
 	onEnd?(value: number): void;
 	partialInput?(value: string): void;
@@ -74,6 +75,8 @@ export default class InvisibleNumberInput extends React.Component<IProps, IState
 				keyboardType="numeric"
 				onChangeText={this.handleOnChangeText}
 				onEndEditing={this.onEndEdit}
+				maxLength={this.props.maxLength}
+				selectTextOnFocus
 			/>
 		);
 	}

package/src/components/RecommendedCarbs.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { RecommendationError } from "../utils/RecommendationError";
 interface ICalculationRow {
     label: string;
     info: string;
@@ -11,7 +10,6 @@ interface IProps {
     enteredCarbs: string;
     removeRecommendedCarbs(): void;
     changedRecommendedCarbs(value: number): void;
-    onError(error: RecommendationError): void;
 }
 interface IState {
     partialInput: string;

package/src/components/RecommendedCarbs.jsx

@@ -29,14 +29,19 @@ class RecommendedCarbs extends react_1.default.Component {
         this.handleChangedCarbs = (carbs) => {
             if (carbs >= 0) {
                 if (carbs > 300) {
-                    return this.props.onError(RecommendationError_1.CarbohydrateLimitError());
+                    this.setState({ partialInput: this.props.recommendedCarbs });
+                    return react_native_1.Alert.alert(i18nUtils_1.i18n._(`Attention`), RecommendationError_1.CarbohydrateLimitError().message, [
+                        {
+                            text: i18nUtils_1.i18n._(`OK`),
+                        },
+                    ]);
                 }
                 this.props.changedRecommendedCarbs(carbs);
             }
         };
         this.renderRecommendedCarbs = () => {
             const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
-            const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + parseFloat(this.props.recommendedCarbs));
+            const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
             return (<react_1.default.Fragment>
 				<react_native_1.View style={calculationStyles.borderContainer}>
 					<react_native_1.View style={calculationStyles.recommendedContainer}>
@@ -72,7 +77,7 @@ class RecommendedCarbs extends react_1.default.Component {
                 value: totalCarbs.toString(),
                 units: i18nUtils_1.i18n._(macro_1.t `g carbs`),
             })}
-				<InvisibleNumberInput_1.default negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs}/>
+				<InvisibleNumberInput_1.default negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
 			</react_1.default.Fragment>);
         };
         this.renderRow = (row) => {

package/src/components/RecommendedCarbs.tsx

@@ -1,9 +1,9 @@
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Alert, Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { BORDER_COLOUR_TEAL } from "../utils/Constants";
-import { CarbohydrateLimitError, RecommendationError } from "../utils/RecommendationError";
+import { CarbohydrateLimitError } from "../utils/RecommendationError";
 import Icon from "./Icon";
 import { infoStyles } from "./InfoBars";
 import InvisibleNumberInput from "./InvisibleNumberInput";
@@ -23,7 +23,6 @@ interface IProps {
 	// Callbacks
 	removeRecommendedCarbs(): void;
 	changedRecommendedCarbs(value: number): void;
-	onError(error: RecommendationError): void;
 }
 
 interface IState {
@@ -50,7 +49,12 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 	public handleChangedCarbs = (carbs: number): void => {
 		if (carbs >= 0) {
 			if (carbs > 300) {
-				return this.props.onError(CarbohydrateLimitError());
+				this.setState({ partialInput: this.props.recommendedCarbs });
+				return Alert.alert(i18n._(`Attention`), CarbohydrateLimitError().message, [
+					{
+						text: i18n._(`OK`),
+					},
+				]);
 			}
 			this.props.changedRecommendedCarbs(carbs);
 		}
@@ -58,7 +62,7 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 
 	public renderRecommendedCarbs = (): JSX.Element => {
 		const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
-		const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + parseFloat(this.props.recommendedCarbs));
+		const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
 		return (
 			<React.Fragment>
 				<View style={calculationStyles.borderContainer}>
@@ -114,6 +118,7 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
 					partialInput={this.handlePartialInput}
 					onEnd={this.handleChangedCarbs}
 					startValue={this.props.recommendedCarbs}
+					maxLength={3}
 				/>
 			</React.Fragment>
 		);

package/src/components/RecommendedInsulin.d.ts

@@ -1,19 +1,19 @@
 import React from "react";
 import { InjectionMethod } from "../types/enum";
-import { RecommendationError } from "../utils/RecommendationError";
 interface IProps {
     insulinRecommendation?: number;
+    enteredInsulin?: number;
     activityReduction?: number;
     injectionMethod: InjectionMethod;
     updateRecommendedInsulin(value: number): void;
-    onError(error: RecommendationError): void;
 }
 interface IState {
-    insulin: string;
+    partialInput: string;
 }
 export default class RecommendedInsulin extends React.Component<IProps, IState> {
     callbackInput: () => void;
     constructor(props: IProps);
+    componentDidUpdate(prevProps: IProps): void;
     handleOnPress: () => void;
     updatePartially: (insulin: string) => string;
     handleUpdatedInsulin: (value: number) => void;

package/src/components/RecommendedInsulin.jsx

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 const i18nUtils_1 = require("../locale/i18nUtils");
-const RecommendationError_1 = require("../utils/RecommendationError");
+const AttentionMessages_1 = require("../utils/AttentionMessages");
 const Utils_1 = require("../utils/Utils");
 const Icon_1 = __importDefault(require("./Icon"));
 const InfoBars_1 = require("./InfoBars");
@@ -23,7 +23,7 @@ class RecommendedInsulin extends react_1.default.Component {
         this.updatePartially = (insulin) => {
             const replacedZero = insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
             this.setState({
-                insulin: replacedZero,
+                partialInput: replacedZero,
             });
             return replacedZero;
         };
@@ -33,13 +33,18 @@ class RecommendedInsulin extends react_1.default.Component {
             const limited = (1 - this.props.activityReduction) * recommendation_calculator_1.SAFETY_INSULIN_LIMIT;
             if (rounded > limited) {
                 this.updatePartially(`${limited}`);
-                return this.props.onError(RecommendationError_1.InsulinLimitError(this.props.activityReduction));
+                return react_native_1.Alert.alert(i18nUtils_1.i18n._(`Attention`), AttentionMessages_1.Messages.InsulinInputWasLimited(this.props.activityReduction), [
+                    {
+                        text: i18nUtils_1.i18n._(`OK`),
+                    },
+                ]);
             }
             this.updatePartially(`${rounded}`);
             this.props.updateRecommendedInsulin(rounded);
         };
         this.render = () => {
             const paddingBottom = react_native_1.Platform.OS === `ios` ? `3%` : `1%`;
+            const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
             return (<react_1.default.Fragment>
 				<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedInsulin" onPress={this.handleOnPress}>
 					<react_native_linear_gradient_1.default style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
@@ -50,20 +55,26 @@ class RecommendedInsulin extends react_1.default.Component {
 						</react_native_1.View>
 						<react_native_1.View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
 							<react_native_1.View style={recommendedInsulinStyles.valueContainer}>
-								<react_native_1.Text style={recommendedInsulinStyles.value}>{this.state.insulin}</react_native_1.Text>
+								<react_native_1.Text style={recommendedInsulinStyles.value}>{shownInsulin}</react_native_1.Text>
 								<react_native_1.Text style={recommendedInsulinStyles.units}>{i18nUtils_1.i18n._(macro_1.t `Units`)}</react_native_1.Text>
 							</react_native_1.View>
 							<Icon_1.default style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
 						</react_native_1.View>
 					</react_native_linear_gradient_1.default>
 				</react_native_1.TouchableOpacity>
-				<InvisibleNumberInput_1.default decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${this.state.insulin}`}/>
+				<InvisibleNumberInput_1.default decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
 			</react_1.default.Fragment>);
         };
         this.state = {
-            insulin: `${props.insulinRecommendation ?? 0}`,
+            partialInput: null,
         };
     }
+    componentDidUpdate(prevProps) {
+        const { enteredInsulin } = this.props;
+        if (prevProps.enteredInsulin !== enteredInsulin) {
+            this.setState({ partialInput: enteredInsulin?.toString() });
+        }
+    }
 }
 exports.default = RecommendedInsulin;
 const recommendedInsulinStyles = react_native_1.StyleSheet.create({
@@ -90,6 +101,7 @@ const recommendedInsulinStyles = react_native_1.StyleSheet.create({
         flex: 1,
         flexDirection: `row`,
         justifyContent: `center`,
+        minHeight: react_native_1.Dimensions.get(`screen`).width / 4,
     },
     value: {
         color: `white`,

package/src/components/RecommendedInsulin.tsx

@@ -1,28 +1,29 @@
 import { SAFETY_INSULIN_LIMIT } from "@hedia/recommendation-calculator";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Alert, Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import { i18n } from "../locale/i18nUtils";
 import { InjectionMethod } from "../types/enum";
-import { InsulinLimitError, RecommendationError } from "../utils/RecommendationError";
+import { Messages } from "../utils/AttentionMessages";
 import { Utils } from "../utils/Utils";
 import Icon from "./Icon";
 import { infoStyles } from "./InfoBars";
 import InvisibleNumberInput from "./InvisibleNumberInput";
 
 interface IProps {
+	// Values
 	insulinRecommendation?: number;
+	enteredInsulin?: number;
 	activityReduction?: number;
-
 	injectionMethod: InjectionMethod;
 
+	// Callbacks
 	updateRecommendedInsulin(value: number): void;
-	onError(error: RecommendationError): void;
 }
 
 interface IState {
-	insulin: string;
+	partialInput: string;
 }
 
 export default class RecommendedInsulin extends React.Component<IProps, IState> {
@@ -32,10 +33,17 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 		super(props);
 
 		this.state = {
-			insulin: `${props.insulinRecommendation ?? 0}`,
+			partialInput: null,
 		};
 	}
 
+	public componentDidUpdate(prevProps: IProps): void {
+		const { enteredInsulin } = this.props;
+		if (prevProps.enteredInsulin !== enteredInsulin) {
+			this.setState({ partialInput: enteredInsulin?.toString() });
+		}
+	}
+
 	public handleOnPress = (): void => {
 		this.callbackInput?.();
 	};
@@ -44,7 +52,7 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 		const replacedZero =
 			insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
 		this.setState({
-			insulin: replacedZero,
+			partialInput: replacedZero,
 		});
 		return replacedZero;
 	};
@@ -57,7 +65,11 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 
 		if (rounded > limited) {
 			this.updatePartially(`${limited}`);
-			return this.props.onError(InsulinLimitError(this.props.activityReduction));
+			return Alert.alert(i18n._(`Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
+				{
+					text: i18n._(`OK`),
+				},
+			]);
 		}
 
 		this.updatePartially(`${rounded}`);
@@ -66,6 +78,7 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 
 	public render = (): JSX.Element => {
 		const paddingBottom = Platform.OS === `ios` ? `3%` : `1%`;
+		const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
 		return (
 			<React.Fragment>
 				<TouchableOpacity accessibilityLabel="editRecommendedInsulin" onPress={this.handleOnPress}>
@@ -82,7 +95,7 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 						</View>
 						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
 							<View style={recommendedInsulinStyles.valueContainer}>
-								<Text style={recommendedInsulinStyles.value}>{this.state.insulin}</Text>
+								<Text style={recommendedInsulinStyles.value}>{shownInsulin}</Text>
 								<Text style={recommendedInsulinStyles.units}>{i18n._(t`Units`)}</Text>
 							</View>
 							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} />
@@ -96,7 +109,7 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
 					partialInput={this.updatePartially}
 					onEnd={this.handleUpdatedInsulin}
 					visible={(visible): (() => void) => (this.callbackInput = visible)}
-					startValue={`${this.state.insulin}`}
+					startValue={`${shownInsulin}`}
 				/>
 			</React.Fragment>
 		);
@@ -127,6 +140,7 @@ const recommendedInsulinStyles = StyleSheet.create({
 		flex: 1,
 		flexDirection: `row`,
 		justifyContent: `center`,
+		minHeight: Dimensions.get(`screen`).width / 4,
 	},
 	value: {
 		color: `white`,