@hedia/recommendation-screen 2.1.54 → 2.1.55-alpha.1

package/dist/src/RecommendationScreen.d.ts

@@ -69,17 +69,15 @@ export interface IRecommendationProps {
      * @param error The detected error.
      */
     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.
-     * @param toggle Showing (true) or hiding (false) the bottom navigation bar on the calculation flow screens.
-     */
-    showBolusBar(toggle: boolean): void;
     /**
      * Callback function taking no arguments.
      * To be called if the user chooses to restart the calculation.
      */
     restartCalculation(): void;
+    /**
+     * Callback function taking a single argument of type boolean.
+     */
+    hideExitModal(): void;
 }
 interface IState {
     /** The time in hours in hours until a reminder notification will be sent to the user. If 0 then no notification will be sent. */
@@ -112,8 +110,10 @@ interface IState {
      * The exit modal prompts the user to consider saving the calculation to a logbook entry before closing the recommendation screen.
      */
     showExitModal: boolean;
-    /** Keeps track of whether or not a message about insulin limitation should be displayed. */
-    showLimitationMessage: boolean;
+    /**
+     * Keeps track of whether or not only the limitation page of the recommendation modal should be visible.
+     */
+    onlyShowLimitationMessage: boolean;
     /** Keeps track of whether or not a message about the recommendation being too old should be displayed. */
     showTimeoutModal: boolean;
 }
@@ -174,7 +174,8 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      * 		- Set activeInsulin to the estimation returned from the calculation result.
      * 		- Set enteredCarbs, enteredInsulin, selectedMood to null.
      * 		- Set recommendationModal to be true if wasLimited is true or if carbRecommendation after being rounded is truthy or if the return value from calling the getBGLevelAttentionMessage() method is truthy.
-     * 		- Set showExitModal, showLimitationMessage, showTimeoutModal to be false.
+     * 		- Set onlyShowLimitationMessage, showTimeoutModal to be false.
+     *		- Set showExitModal with the value of the showExitModal prop.
      * 3. Start a 15 minute timer assigned to the timer member variable using the setTimeout() function. When the timer expires, call the showTimeoutModal() method.
      * @param props The data required to initialise the Recommendation Screen
      */
@@ -197,6 +198,13 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      * 2. Remove the listener for app state changes that was set by the componentDidMount() method.
      */
     componentWillUnmount(): void;
+    /**
+     * Called immediately after updating occurs. This method is not called for the initial render.
+     * Use this as an opportunity to operate on the DOM when the component has been updated.
+     * Steps:
+     * 1. If the showExitModal prop is true and it was false before, call the onExit() method.
+     * @param showExitModal The previous showExitModal props of the component.
+     */
     componentDidUpdate({ showExitModal }: IRecommendationProps): void;
     /**
      * Steps:
@@ -207,7 +215,7 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
     handleAppStateChange: (nextAppState: AppStateStatus) => void;
     /**
      * Steps:
-     * 1. Set the showTimeoutModal state variable to be true. Use a callback function to call the showBolusBar prop callback function with false as argument when the state has been updated.
+     * 1. Set the showTimeoutModal state variable to be true.
      * */
     showTimeoutModal: () => void;
     /**
@@ -229,7 +237,7 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      *
      * Steps:
      * 1. If the insulin recommendation is being displayed (the isRecommendationDisplayed state variable is true):
-     *  	- Set the showExitModal state variable to true. When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+     *  	- Set the showExitModal state variable to true.
      * 2. Else:
      *  	- Call the exitCallback prop callback function.
      */
@@ -249,19 +257,12 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      * 1. Set the recommendationModal state variable to false.
      */
     hideAttentionModal: () => void;
-    /**
-     * Hide the modal that shows attention messages.
-     *
-     * Steps:
-     * 1. Set the showLimitationMessage state variable to false.
-     */
-    hideLimitationMessage: () => void;
     /**
      * Hide the exit modal. To be used when the user closes the modal directly or in some way exits the recommendation screen.
      *
      * Steps:
      * 1. Set the showExitModal state variable to false.
-     *    When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+     * 2. Call the hideExitModal prop callback function.
      */
     hideExitModal: () => void;
     /**
@@ -269,7 +270,6 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
      *
      * Steps:
      * 1. Set the showTimeoutModal state variable to false.
-     * 	  When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showTimeoutModal state variable as argument.
      */
     hideTimeoutModal: () => void;
     /**

package/dist/src/RecommendationScreen.js

@@ -15,7 +15,6 @@ import { colors } from "./utils/Constants";
 import { t } from "@lingui/macro";
 import Activity from "./components/activity/Activity";
 import ExitModal from "./components/ExitModal";
-import LimitationMessage from "./components/LimitationMessage";
 import RecommendationModal from "./components/RecommendationModal";
 import { FONTS } from "./components/styles/fonts";
 import Text from "./components/Text";
@@ -87,7 +86,8 @@ export default class RecommendationScreen extends React.Component {
      * 		- Set activeInsulin to the estimation returned from the calculation result.
      * 		- Set enteredCarbs, enteredInsulin, selectedMood to null.
      * 		- Set recommendationModal to be true if wasLimited is true or if carbRecommendation after being rounded is truthy or if the return value from calling the getBGLevelAttentionMessage() method is truthy.
-     * 		- Set showExitModal, showLimitationMessage, showTimeoutModal to be false.
+     * 		- Set onlyShowLimitationMessage, showTimeoutModal to be false.
+     *		- Set showExitModal with the value of the showExitModal prop.
      * 3. Start a 15 minute timer assigned to the timer member variable using the setTimeout() function. When the timer expires, call the showTimeoutModal() method.
      * @param props The data required to initialise the Recommendation Screen
      */
@@ -112,8 +112,8 @@ export default class RecommendationScreen extends React.Component {
                 enteredInsulin: null,
                 selectedMood: null,
                 recommendationModal: wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
+                onlyShowLimitationMessage: false,
                 showExitModal: props.showExitModal,
-                showLimitationMessage: false,
                 showTimeoutModal: false,
             };
             this.timer = setTimeout(this.showTimeoutModal, Milliseconds.Minute * 15);
@@ -152,8 +152,15 @@ export default class RecommendationScreen extends React.Component {
         this.appStateSubscription?.remove();
         this.backHandlerSubscription?.remove();
     }
+    /**
+     * Called immediately after updating occurs. This method is not called for the initial render.
+     * Use this as an opportunity to operate on the DOM when the component has been updated.
+     * Steps:
+     * 1. If the showExitModal prop is true and it was false before, call the onExit() method.
+     * @param showExitModal The previous showExitModal props of the component.
+     */
     componentDidUpdate({ showExitModal }) {
-        if (showExitModal !== this.props.showExitModal) {
+        if (this.props.showExitModal && showExitModal !== this.props.showExitModal) {
             this.onExit();
         }
     }
@@ -172,10 +179,10 @@ export default class RecommendationScreen extends React.Component {
     };
     /**
      * Steps:
-     * 1. Set the showTimeoutModal state variable to be true. Use a callback function to call the showBolusBar prop callback function with false as argument when the state has been updated.
+     * 1. Set the showTimeoutModal state variable to be true.
      * */
     showTimeoutModal = () => {
-        this.setState({ showTimeoutModal: true }, () => this.props.showBolusBar(!this.state.showTimeoutModal));
+        this.setState({ showTimeoutModal: true });
     };
     /**
      * Make a new insulin calculation and set the result to be displayed to the user.
@@ -197,7 +204,7 @@ export default class RecommendationScreen extends React.Component {
             enteredInsulin: null,
             wasLimited,
             activityReduction,
-            showLimitationMessage: wasLimited,
+            onlyShowLimitationMessage: wasLimited,
         });
     };
     /**
@@ -205,13 +212,13 @@ export default class RecommendationScreen extends React.Component {
      *
      * Steps:
      * 1. If the insulin recommendation is being displayed (the isRecommendationDisplayed state variable is true):
-     *  	- Set the showExitModal state variable to true. When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+     *  	- Set the showExitModal state variable to true.
      * 2. Else:
      *  	- Call the exitCallback prop callback function.
      */
     onExit = () => {
         if (this.state.isRecommendationDisplayed) {
-            this.setState({ showExitModal: true }, () => this.props.showBolusBar(!this.state.showExitModal));
+            this.setState({ showExitModal: true });
         }
         else {
             this.props.exitCallback();
@@ -235,36 +242,26 @@ export default class RecommendationScreen extends React.Component {
      * 1. Set the recommendationModal state variable to false.
      */
     hideAttentionModal = () => {
-        this.setState({ recommendationModal: false });
-    };
-    /**
-     * Hide the modal that shows attention messages.
-     *
-     * Steps:
-     * 1. Set the showLimitationMessage state variable to false.
-     */
-    hideLimitationMessage = () => {
-        this.setState({ showLimitationMessage: false });
+        this.setState({ recommendationModal: false, onlyShowLimitationMessage: false });
     };
     /**
      * Hide the exit modal. To be used when the user closes the modal directly or in some way exits the recommendation screen.
      *
      * Steps:
      * 1. Set the showExitModal state variable to false.
-     *    When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+     * 2. Call the hideExitModal prop callback function.
      */
     hideExitModal = () => {
-        this.setState({ showExitModal: false }, () => this.props.showBolusBar(!this.state.showExitModal));
+        this.setState({ showExitModal: false }, this.props.hideExitModal);
     };
     /**
      * Hide the modal that warns the user that their recommendation is old.
      *
      * Steps:
      * 1. Set the showTimeoutModal state variable to false.
-     * 	  When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showTimeoutModal state variable as argument.
      */
     hideTimeoutModal = () => {
-        this.setState({ showTimeoutModal: false }, () => this.props.showBolusBar(!this.state.showTimeoutModal));
+        this.setState({ showTimeoutModal: false });
     };
     /**
      * Used as a callback function for the Remeasure component to update the state when the remeasure time slider’s value changes.
@@ -487,14 +484,12 @@ export default class RecommendationScreen extends React.Component {
 					{!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}/>
+					<RecommendationModal isVisible={recommendationModal || this.state.onlyShowLimitationMessage} onlyShowLimitationMessage={this.state.onlyShowLimitationMessage} suggestedCarbohydrates={carbRecommendationProp} attentionMessage={this.getBGLevelAttentionMessage()} limitationMessage={this.getLimitationAttentionMessage()} onClickOkButton={this.hideAttentionModal} onAcceptCarbohydrates={this.acceptCarbRecommendation} onDeclineCarbohydrates={this.declineCarbRecommendation}/>
 				</KeyboardAwareScrollView>
-				{this.state.showExitModal && (<ExitModal 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`)} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>)}
-				{this.state.showLimitationMessage && (<View style={styles.limitationModalContainer}>
-						<LimitationMessage limitationMessage={this.getLimitationAttentionMessage()} onPressNextButton={this.hideLimitationMessage}/>
-					</View>)}
-				{this.state.showTimeoutModal &&
-                (this.state.isRecommendationDisplayed ? (<TimeoutModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={i18n._(t `Yes, save to logbook`)} textSecondOption={i18n._(t `No, return to dashboard`)} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TimeoutModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={i18n._(t `Start new calculation`)} textSecondOption={i18n._(t `Return to dashboard`)} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>))}
+
+				<ExitModal isVisible={this.state.showExitModal} 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`)} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>
+
+				{this.state.isRecommendationDisplayed ? (<TimeoutModal isVisible={this.state.showTimeoutModal} title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={i18n._(t `Yes, save to logbook`)} textSecondOption={i18n._(t `No, return to dashboard`)} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TimeoutModal isVisible={this.state.showTimeoutModal} title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={i18n._(t `Start new calculation`)} textSecondOption={i18n._(t `Return to dashboard`)} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>)}
 			</I18nProvider>);
     }
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 export interface IExitModal {
+    isVisible: boolean;
     /** The title of the modal. */
     title: string;
     /** The message to show in the modal. */

package/dist/src/components/ExitModal.js

@@ -1,19 +1,20 @@
 import * as React from "react";
 import { StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import ReactNativeModal from "react-native-modal";
 import Close from "../assets/IconsSVG/Close";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
 import { FONTS } from "./styles/fonts";
 import Text from "./Text";
-const { ExitModalTestIds: TwoOptionModalTestIds } = Testing.Id;
+const { ExitModalTestIds } = Testing.Id;
 /** Display a modal with two buttons for the user to choose between. */
 export default class ExitModal extends React.Component {
     /** Compose a JSX element for displaying the modal. */
     render() {
-        return (<View style={style.container}>
+        return (<ReactNativeModal style={style.container} isVisible={this.props.isVisible}>
 				<StatusBar backgroundColor={colors.transparentLightBlue}/>
 				<View style={style.modalContainer}>
-					<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={style.iconWrapper}>
+					<TouchableOpacity onPress={this.props.onClose} testID={ExitModalTestIds.ExitButton} style={style.iconWrapper}>
 						{Close({ color: colors.white, style: style.icon })}
 					</TouchableOpacity>
 					<View style={style.textContainer}>
@@ -21,21 +22,21 @@ export default class ExitModal extends React.Component {
 						<Text style={style.message}>{this.props.message}</Text>
 					</View>
 					<View style={style.buttonContainer}>
-						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={[style.button, { marginBottom: 16 }]}>
+						<TouchableOpacity testID={ExitModalTestIds.FirstOption} onPress={this.props.firstOption} style={[style.button, { marginBottom: 16 }]}>
 							<Text style={style.textButton}>{this.props.textFirstOption}</Text>
 						</TouchableOpacity>
-						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={style.button}>
+						<TouchableOpacity testID={ExitModalTestIds.SecondOption} onPress={this.props.secondOption} style={style.button}>
 							<Text style={style.textButton}>{this.props.textSecondOption}</Text>
 						</TouchableOpacity>
 					</View>
 				</View>
-			</View>);
+			</ReactNativeModal>);
     }
 }
 /** @internal */
 const style = StyleSheet.create({
     container: {
-        ...StyleSheet.absoluteFillObject,
+        margin: 0,
         justifyContent: `center`,
         backgroundColor: colors.transparentBlack,
     },

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

@@ -8,16 +8,20 @@ export interface IModalProps {
     attentionMessage: string | null;
     /** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
     limitationMessage: string | null;
+    /**
+     * If true then the modal will only display the limitation message and not the attention message.
+     */
+    onlyShowLimitationMessage: boolean;
     /** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
     onClickOkButton(): void;
     /**
-     *  Callback function taking no arguments and returning no value.
+     * Callback function taking no arguments and returning no value.
      * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
      */
     onAcceptCarbohydrates(): void;
     /**
      * Callback function taking no arguments and returning no value.
-     *  Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
+     * Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
      */
     onDeclineCarbohydrates(): void;
 }
@@ -41,6 +45,7 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
      * @param props The class props
      */
     constructor(props: IModalProps);
+    componentDidUpdate(prevProps: Readonly<IModalProps>): void;
     /**
      * Handle what happens when the “next” button is pressed.
      *
@@ -104,6 +109,10 @@ export declare const stylesModal: {
         marginTop: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
+        /**
+         * Callback function taking no arguments and returning no value.
+         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+         */
         lineHeight: number;
     };
     buttonText: {
@@ -135,6 +144,10 @@ export declare const stylesModal: {
         paddingHorizontal: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
+        /**
+         * Callback function taking no arguments and returning no value.
+         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+         */
         lineHeight: number;
     };
     recommendEatingText: {
@@ -144,6 +157,10 @@ export declare const stylesModal: {
         marginBottom: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
+        /**
+         * Callback function taking no arguments and returning no value.
+         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+         */
         lineHeight: number;
     };
     carbohydrateText: {
@@ -159,6 +176,10 @@ export declare const stylesModal: {
         marginHorizontal: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
+        /**
+         * Callback function taking no arguments and returning no value.
+         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+         */
         lineHeight: number;
     };
     recommendationButtonsContainer: {

package/dist/src/components/RecommendationModal.js

@@ -5,7 +5,6 @@ import ReactNativeModal from "react-native-modal";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
-import LimitationMessage from "./LimitationMessage";
 import { FONTS } from "./styles/fonts";
 import Text from "./Text";
 const { RecommendationModalTestIds } = Testing.Id;
@@ -30,6 +29,15 @@ export default class RecommendationModal extends React.Component {
             firstPageVisible: !!this.props.limitationMessage,
         };
     }
+    /*
+     * Steps:
+     * 1. Set the firstPageVisible state variable true if the limitationMessage prop was updated.
+     */
+    componentDidUpdate(prevProps) {
+        if (prevProps.limitationMessage !== this.props.limitationMessage) {
+            this.setState({ firstPageVisible: !!this.props.limitationMessage });
+        }
+    }
     /**
      * Handle what happens when the “next” button is pressed.
      *
@@ -40,8 +48,8 @@ export default class RecommendationModal extends React.Component {
      */
     onPressNextButton = () => {
         const { attentionMessage, suggestedCarbohydrates } = this.props;
-        const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
-        return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
+        const isSecondPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
+        return isSecondPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
     };
     /**
      * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
@@ -105,7 +113,13 @@ export default class RecommendationModal extends React.Component {
      */
     firstPage = () => {
         const { limitationMessage } = this.props;
-        return <LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
+        return (<React.Fragment>
+				<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
+				<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
+				<TouchableOpacity testID={Testing.Id.RecommendationModalTestIds.LimitationOkButton} style={stylesModal.okButton} onPress={this.props.onlyShowLimitationMessage ? this.props.onClickOkButton : this.onPressNextButton}>
+					<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
+				</TouchableOpacity>
+			</React.Fragment>);
     };
     /**
      * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.

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

@@ -1,5 +1,7 @@
 import * as React from "react";
 export interface ITimeoutModalProps {
+    /** Whether the modal is visible or not. */
+    isVisible: boolean;
     /** The title of the modal. */
     title: string;
     /** The message to show in the modal. */

package/dist/src/components/TimeoutModal.js

@@ -1,15 +1,16 @@
 import * as React from "react";
 import { StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import ReactNativeModal from "react-native-modal";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
 import { FONTS } from "./styles/fonts";
 import Text from "./Text";
-const { ExitModalTestIds: TwoOptionModalTestIds } = Testing.Id;
+const { TimeOutModalTestIds } = Testing.Id;
 /** Display a modal with two buttons for the user to choose between. */
 export default class TimeoutModal extends React.Component {
     /** Compose a JSX element for displaying the modal. */
     render() {
-        return (<View style={style.container}>
+        return (<ReactNativeModal style={style.container} isVisible={this.props.isVisible}>
 				<StatusBar backgroundColor={colors.transparentLightBlue}/>
 				<View style={style.modalContainer}>
 					<View style={style.textContainer}>
@@ -17,21 +18,21 @@ export default class TimeoutModal extends React.Component {
 						<Text style={style.message}>{this.props.message}</Text>
 					</View>
 					<View style={style.buttonContainer}>
-						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={[style.button, { backgroundColor: colors.teal, marginBottom: 16 }]}>
+						<TouchableOpacity testID={TimeOutModalTestIds.FirstOption} onPress={this.props.firstOption} style={[style.button, { backgroundColor: colors.teal, marginBottom: 16 }]}>
 							<Text style={style.textFirstButton}>{this.props.textFirstOption}</Text>
 						</TouchableOpacity>
-						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={style.button}>
+						<TouchableOpacity testID={TimeOutModalTestIds.SecondOption} onPress={this.props.secondOption} style={style.button}>
 							<Text style={style.textSecondButton}>{this.props.textSecondOption}</Text>
 						</TouchableOpacity>
 					</View>
 				</View>
-			</View>);
+			</ReactNativeModal>);
     }
 }
 /** @internal */
 const style = StyleSheet.create({
     container: {
-        ...StyleSheet.absoluteFillObject,
+        margin: 0,
         justifyContent: `center`,
         backgroundColor: colors.transparentBlack,
     },

package/dist/src/types/enum.d.ts

@@ -9,13 +9,6 @@ export declare namespace Testing {
             ActivityDuration = "activity-duration-minutes",
             ActivityReduction = "activity-reduction-percentage"
         }
-        enum HeaderTestIds {
-            ExitCalculation = "exit-calculation-button",
-            HeaderText = "header-text"
-        }
-        enum LimitationMessageTestIds {
-            OkButton = "limitation-message-ok-button"
-        }
         enum RecentInsulinTestIds {
             No = "recent-insulin-no",
             Yes = "recent-insulin-yes"
@@ -38,6 +31,7 @@ export declare namespace Testing {
             DeclineCarbs = "recommendation-modal-decline-carbs",
             AcceptCarbs = "recommendation-modal-accept-carbs",
             OkButton = "recommendation-modal-ok-button",
+            LimitationOkButton = "limitation-message-ok-button",
             SuggestedCarbs = "recommendation-modal-suggested-carbs"
         }
         enum RemeasureTestIds {
@@ -78,7 +72,7 @@ export declare namespace Testing {
     }
     /** Namespace containing all the TestIdEnum keys */
     namespace Types {
-        type TestIdEnum = Id.ActivityTestIds | Id.HeaderTestIds | Id.LimitationMessageTestIds | Id.RecentInsulinTestIds | Id.RecommendedCarbsTestIds | Id.RecommendedInsulinTestIds | Id.RecommendationModalTestIds | Id.RemeasureTestIds | Id.TransferToLogbookTestIds | Id.ExitModalTestIds | Id.TimeOutModalTestIds | Id.InfoBarTestIds.Unit | Id.InfoBarTestIds.Value | Id.InfoBarTestIds.Label;
+        type TestIdEnum = Id.ActivityTestIds | Id.RecentInsulinTestIds | Id.RecommendedCarbsTestIds | Id.RecommendedInsulinTestIds | Id.RecommendationModalTestIds | Id.RemeasureTestIds | Id.TransferToLogbookTestIds | Id.ExitModalTestIds | Id.TimeOutModalTestIds | Id.InfoBarTestIds.Unit | Id.InfoBarTestIds.Value | Id.InfoBarTestIds.Label;
     }
 }
 /**

package/dist/src/types/enum.js

@@ -13,15 +13,6 @@ export var Testing;
             ActivityTestIds["ActivityDuration"] = "activity-duration-minutes";
             ActivityTestIds["ActivityReduction"] = "activity-reduction-percentage";
         })(ActivityTestIds = Id.ActivityTestIds || (Id.ActivityTestIds = {}));
-        let HeaderTestIds;
-        (function (HeaderTestIds) {
-            HeaderTestIds["ExitCalculation"] = "exit-calculation-button";
-            HeaderTestIds["HeaderText"] = "header-text";
-        })(HeaderTestIds = Id.HeaderTestIds || (Id.HeaderTestIds = {}));
-        let LimitationMessageTestIds;
-        (function (LimitationMessageTestIds) {
-            LimitationMessageTestIds["OkButton"] = "limitation-message-ok-button";
-        })(LimitationMessageTestIds = Id.LimitationMessageTestIds || (Id.LimitationMessageTestIds = {}));
         let RecentInsulinTestIds;
         (function (RecentInsulinTestIds) {
             RecentInsulinTestIds["No"] = "recent-insulin-no";
@@ -48,6 +39,7 @@ export var Testing;
             RecommendationModalTestIds["DeclineCarbs"] = "recommendation-modal-decline-carbs";
             RecommendationModalTestIds["AcceptCarbs"] = "recommendation-modal-accept-carbs";
             RecommendationModalTestIds["OkButton"] = "recommendation-modal-ok-button";
+            RecommendationModalTestIds["LimitationOkButton"] = "limitation-message-ok-button";
             RecommendationModalTestIds["SuggestedCarbs"] = "recommendation-modal-suggested-carbs";
         })(RecommendationModalTestIds = Id.RecommendationModalTestIds || (Id.RecommendationModalTestIds = {}));
         let RemeasureTestIds;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hedia/recommendation-screen",
-  "version": "2.1.54",
+  "version": "2.1.55-alpha.1",
   "description": "Hedia Recommendation Screen for Bolus and Carbohydrates",
   "main": "dist/index.js",
   "files": [
@@ -57,7 +57,8 @@
     "@hedia/npm-audit-pipeline": "0.5.0",
     "@hedia/recommendation-calculator": "2.0.15",
     "@react-native-community/slider": "3.0.0",
-    "@testing-library/jest-native": "3.1.0",
+    "@testing-library/jest-native": "5.4.1",
+    "@testing-library/react-native": "11.5.2",
     "@types/jest": "27.5.2",
     "@types/lingui__core": "2.7.0",
     "@types/lingui__macro": "2.7.3",
@@ -78,7 +79,6 @@
     "react-native-keyboard-aware-scroll-view": "0.9.5",
     "react-native-linear-gradient": "2.5.6",
     "react-native-svg": "13.6.0",
-    "react-native-testing-library": "2.1.0",
     "react-test-renderer": "18.0.0",
     "tslint": "6.1.3",
     "tslint-config-prettier": "1.18.0",

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-export interface ILimitationMessageProps {
-    /** The message to display to the user. */
-    limitationMessage: string | null;
-    /** Callback function taking no arguments and giving no return value - To be called when the user presses the “OK” button. */
-    onPressNextButton(): void;
-}
-/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
-export default class LimitationMessage extends React.Component<ILimitationMessageProps> {
-    /**
-     * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
-     */
-    render: () => JSX.Element;
-}

package/dist/src/components/LimitationMessage.js

@@ -1,23 +0,0 @@
-import { t } from "@lingui/macro";
-import * as React from "react";
-import { TouchableOpacity } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { Testing } from "../types/enum";
-import { stylesModal } from "./RecommendationModal";
-import Text from "./Text";
-/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
-export default class LimitationMessage extends React.Component {
-    /**
-     * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
-     */
-    render = () => {
-        const { limitationMessage } = this.props;
-        return (<React.Fragment>
-				<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
-				<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
-				<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
-					<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
-				</TouchableOpacity>
-			</React.Fragment>);
-    };
-}