@hedia/recommendation-screen 2.1.52 → 2.1.53-alpha.1

package/dist/src/RecommendationScreen.d.ts

@@ -29,6 +29,8 @@ export interface IRecommendationProps {
     latestLogbookFrom6Hours: Logbook.Types.ILogbookEntry | null;
     /** The properties of the entered activity that are not used for making the calculation itself, but will be used on the recommendation screen. */
     activityDisplayProps: IActivityDisplayProps | null;
+    /** Should the exit modal be displayed or not */
+    showExitModal: boolean;
     /**
      * Callback function taking a single boolean argument and returning nothing.
      * To be called when the user decides on a presented carbohydrate recommendation.
@@ -195,6 +197,7 @@ 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;
+    componentDidUpdate({ showExitModal }: IRecommendationProps): void;
     /**
      * Steps:
      * 1. Evaluate a boolean called isOlderThan15Minutes to indicate whether the recommendationDate member variable represents a time more than 15 minutes ago.

package/dist/src/RecommendationScreen.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { AppState, BackHandler, LogBox, StyleSheet, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import Header from "./components/Header";
-import InfoBars, { infoStyles } from "./components/InfoBars";
+import InfoBars from "./components/InfoBars";
 import RecentInsulin from "./components/RecentInsulin";
 import RecommendedCarbs from "./components/RecommendedCarbs";
 import RecommendedInsulin from "./components/RecommendedInsulin";
@@ -15,9 +14,12 @@ import TransferToLogbook from "./components/TransferToLogbook";
 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 TwoOptionModal, { modalStyle } from "./components/TwoOptionModal";
+import { FONTS } from "./components/styles/fonts";
+import Text from "./components/Text";
+import TimeoutModal from "./components/TimeoutModal";
 import { changeLanguage, i18n } from "./locale/i18nUtils";
 import { Testing } from "./types/enum";
 import { Messages } from "./utils/AttentionMessages";
@@ -110,7 +112,7 @@ export default class RecommendationScreen extends React.Component {
                 enteredInsulin: null,
                 selectedMood: null,
                 recommendationModal: wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
-                showExitModal: false,
+                showExitModal: props.showExitModal,
                 showLimitationMessage: false,
                 showTimeoutModal: false,
             };
@@ -150,6 +152,11 @@ export default class RecommendationScreen extends React.Component {
         this.appStateSubscription?.remove();
         this.backHandlerSubscription?.remove();
     }
+    componentDidUpdate({ showExitModal }) {
+        if (showExitModal !== this.props.showExitModal) {
+            this.onExit();
+        }
+    }
     /**
      * Steps:
      * 1. Evaluate a boolean called isOlderThan15Minutes to indicate whether the recommendationDate member variable represents a time more than 15 minutes ago.
@@ -451,7 +458,7 @@ export default class RecommendationScreen extends React.Component {
     /** Render a JSX element for displaying the insulin recommendation screen. */
     render() {
         if (this.hasError) {
-            return <View style={containerStyles.container}/>;
+            return <View style={styles.container}/>;
         }
         const { activeInsulin, recommendationModal, carbRecommendation: carbRecommendationProp, enteredCarbs, enteredInsulin, insulinRecommendation, activityReduction, isRecommendationDisplayed, } = this.state;
         const { BloodGlucose: BGValueTestID, BloodKetone: BKValueTestID, ActiveInsulin: ActiveInsulinValueTestID, } = InfoBarTestIds.Value;
@@ -463,57 +470,56 @@ export default class RecommendationScreen extends React.Component {
         const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
         const displayedBKL = currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
         return (<I18nProvider language={this.props.language} i18n={i18n}>
-				<KeyboardAwareScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} enableResetScrollToCoords={false} style={containerStyles.container} ref={(view) => {
+				<KeyboardAwareScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} enableResetScrollToCoords={false} style={styles.container} ref={(view) => {
                 if (view !== null) {
                     this.scrollView = view;
                 }
             }}>
-					<Header exitCallback={this.onExit}/>
+					<Text style={styles.header}>{i18n._(t `Insulin recommendation`)}</Text>
 					<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 ? colors.teal : colors.mistBlue,
-                },
-            ]}>
-								<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
-							</View>
-						</View>
+					<View style={styles.calcBorder}>
+						<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
 					</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}
+					{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}/>)}
 					<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}/>
 				</KeyboardAwareScrollView>
-				{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}>
+				{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>) : 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}
+					</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}/>))}
 			</I18nProvider>);
     }
 }
-const containerStyles = StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         flex: 1,
+        paddingHorizontal: 18,
         backgroundColor: colors.darkBlue,
     },
-    calcContainer: {
-        flex: 1,
-    },
-    calcMargin: {
-        flex: 1,
-        marginBottom: 0,
-        margin: `3%`,
+    limitationModalContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: `center`,
+        backgroundColor: colors.transparentBlack,
     },
     calcBorder: {
-        ...infoStyles.border,
-        borderColor: colors.teal,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: colors.dustyDarkBlue,
+        borderRadius: 5,
+        padding: 16,
+    },
+    header: {
+        ...FONTS.Poppins.medium_Base,
+        color: colors.dustyBlue,
+        marginBottom: 8,
+        textAlign: `center`,
     },
 });

package/dist/src/assets/IconsSVG/Close.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Close: (props: SvgProps) => JSX.Element;
+export default Close;

package/dist/src/assets/IconsSVG/Close.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+const Close = (props) => (<Svg viewBox="0 0 28 28" fill="none" {...props}>
+		<Path d="M4.4753 23.4372C5.10827 24.0746 6.20854 24.0519 6.82281 23.4477L14.0546 16.2888L21.2957 23.4425C21.9208 24.0599 22.9955 24.072 23.6285 23.4346C24.2858 22.7973 24.2736 21.7355 23.6364 21.1181L16.4101 13.9618L23.6364 6.8228C24.2736 6.20277 24.2858 5.129 23.6285 4.50632C22.9955 3.86898 21.9208 3.88101 21.2957 4.49576L14.0546 11.6468L6.82281 4.49312C6.20854 3.88628 5.10827 3.86634 4.4753 4.50104C3.83282 5.12636 3.85301 6.21333 4.46728 6.82016L11.7139 13.9618L4.46728 21.1207C3.85301 21.7275 3.83282 22.7999 4.4753 23.4372Z" fill={props.color}/>
+	</Svg>);
+export default Close;

package/dist/src/assets/IconsSVG/Edit.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Edit: (props: SvgProps) => JSX.Element;
+export default Edit;

package/dist/src/assets/IconsSVG/Edit.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+const Edit = (props) => (<Svg viewBox="0 0 28 28" {...props}>
+		<Path d="M7.38159 23.5513H19.3863C21.3613 23.5513 22.5088 22.4038 22.5088 20.2053V9.31588L20.4885 11.3344V20.0358C20.4885 21.0368 19.9597 21.5328 19.2692 21.5328H7.50522C6.54726 21.5328 6.01851 21.0368 6.01851 20.0358V8.56645C6.01851 7.56357 6.54726 7.06099 7.50522 7.06099H16.3125L18.331 5.04248H7.38159C5.16442 5.04248 4 6.19001 4 8.38843V20.2053C4 22.4122 5.16442 23.5513 7.38159 23.5513Z" fill={props.color}/>
+		<Path d="M11.2728 16.6709L13.369 15.7841L22.7767 6.38479L21.2039 4.83072L11.8065 14.2281L10.8774 16.2653C10.7764 16.4979 11.0362 16.7664 11.2728 16.6709ZM23.5632 5.60673L24.2828 4.86842C24.6794 4.45487 24.6887 3.88987 24.2958 3.50907L24.0254 3.23213C23.6745 2.88493 23.0955 2.93912 22.711 3.31517L21.9904 4.02916L23.5632 5.60673Z" fill={props.color}/>
+	</Svg>);
+export default Edit;

package/dist/src/assets/IconsSVG/activity/Cycling.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Cycling: (props?: SvgProps | undefined) => JSX.Element;
+export default Cycling;

package/dist/src/assets/IconsSVG/activity/Cycling.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+const Cycling = (props) => (<Svg viewBox="0 0 36 36" {...props}>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M20.9522 17.2358C20.9522 17.2358 20.151 16.4868 19.4424 15.8242L16.6704 17.5983C17.6636 18.2939 18.6775 19.0039 18.6775 19.0039L17.7217 22.0713C17.609 22.4875 17.8058 22.9371 18.2017 23.1073C18.6572 23.3032 19.1689 23.0795 19.344 22.6332L21.3198 18.1898C21.4592 17.8246 21.2428 17.4976 20.9522 17.2358Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M10.1391 29.5254C7.56668 29.5254 5.47393 27.4316 5.47393 24.858C5.47393 22.2844 7.56668 20.1907 10.1391 20.1907C10.9765 20.1907 11.7624 20.4137 12.4424 20.8018L11.8447 18.9581C11.3029 18.8016 10.7311 18.7161 10.1391 18.7161C6.74858 18.7161 4 21.4659 4 24.858C4 28.2501 6.74858 31 10.1391 31C12.1072 31 13.8577 30.0723 14.9812 28.6314L14.3841 26.79C13.6483 28.4019 12.0229 29.5254 10.1391 29.5254Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M15.7955 16.9639L15.7908 16.9597L21.4056 13.2642L25.423 17.63C25.6355 17.8725 26.0005 17.9061 26.2537 17.7065C26.5009 17.5117 26.5579 17.1601 26.385 16.897L22.6745 11.2483C22.6625 11.2265 22.6507 11.2043 22.6367 11.1831L21.5974 9.60244C21.2766 9.11463 20.5708 9.00728 20.0291 9.36392L12.9124 14.031C12.9003 14.0388 12.8881 14.0466 12.8762 14.0546L12.8692 14.0593L12.869 14.0597C12.3978 14.3851 12.0889 14.9288 12.0889 15.5449C12.0889 15.6764 12.1033 15.8044 12.13 15.9279C12.1341 15.9487 12.1389 15.9696 12.1444 15.9908C12.1459 15.9964 12.1475 16.0018 12.149 16.0073C12.1514 16.0162 12.1534 16.025 12.1561 16.0339L12.1594 16.044C12.1716 16.0868 12.185 16.1289 12.2003 16.1701L16.3155 28.8537C16.4542 29.3063 16.9326 29.5613 17.3854 29.4242C17.8059 29.297 18.0627 28.8727 17.9805 28.4409L15.7955 16.9639Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M25.8609 29.437C23.2885 29.437 21.1958 27.3433 21.1958 24.7696C21.1958 22.196 23.2885 20.1023 25.8609 20.1023C28.4333 20.1023 30.5261 22.196 30.5261 24.7696C30.5261 27.3433 28.4333 29.437 25.8609 29.437ZM25.8607 18.6277C22.4703 18.6277 19.7217 21.3775 19.7217 24.7697C19.7217 28.1618 22.4703 30.9117 25.8607 30.9117C29.2513 30.9117 31.9999 28.1618 31.9999 24.7697C31.9999 21.3775 29.2513 18.6277 25.8607 18.6277Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M24.9569 7.33472H24.957C25.2918 7.33472 25.599 7.45534 25.8221 7.67418C26.0381 7.88638 26.1572 8.17511 26.1571 8.48721C26.157 9.14542 25.6324 9.66168 24.9647 9.66264H24.9608C24.6339 9.66264 24.3316 9.54143 24.1093 9.32119C23.8906 9.10457 23.7701 8.81156 23.7701 8.49621C23.7701 7.82334 24.2691 7.33486 24.9569 7.33472ZM24.9607 10.9972H24.9646C26.3696 10.9951 27.4906 9.88137 27.4909 8.48741C27.4912 7.09469 26.3758 5.99993 24.9567 6H24.9563C23.5335 6.00022 22.436 7.08724 22.436 8.49611C22.436 9.89052 23.5535 10.9972 24.9607 10.9972Z" fill={props?.color || colors.white}/>
+	</Svg>);
+export default Cycling;

package/dist/src/assets/IconsSVG/activity/Running.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Running: (props?: SvgProps | undefined) => JSX.Element;
+export default Running;

package/dist/src/assets/IconsSVG/activity/Running.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+const Running = (props) => (<Svg viewBox="0 0 36 36" {...props}>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M15.6644 21.5192C15.3941 21.3047 15.1812 21.0204 15.051 20.6931L13.7312 23.2981C11.5777 23.1615 8.01222 22.9348 8.01222 22.9348C7.54716 22.9052 7.11397 23.2166 7.0198 23.6809C6.91152 24.2149 7.25938 24.7169 7.76993 24.807L14.0852 25.9215C14.5884 25.9868 15.0255 25.6501 15.322 25.2031L17.263 22.7806L15.6644 21.5192Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M28.6001 14.9953L25.0472 15.2574L23.9191 10.8406C23.8459 10.479 23.626 10.1677 23.2934 10.0183L21.4233 9.178C21.0937 9.0299 20.723 9.07181 20.4126 9.25614L14.9805 11.4268C14.8831 11.5359 14.7901 11.6394 14.737 11.7944L13.4533 16.0029C13.351 16.3418 13.5273 16.7029 13.8545 16.8248C14.1739 16.9437 14.5297 16.7942 14.6736 16.4805L16.3129 12.88L18.8263 12.2419L16.0953 18.4557C15.9912 18.6987 15.933 18.9668 15.933 19.2488C15.933 19.8869 16.2291 20.4544 16.6888 20.8178C16.6888 20.8179 21.3248 24.4767 21.3248 24.4767C21.7349 25.8722 23.3273 31.3 23.3273 31.3C23.4606 31.7541 23.8974 32.0604 24.3582 31.99C24.8882 31.9091 25.2311 31.4036 25.138 30.885L23.8965 24.0987C23.8758 24.0072 23.8432 23.925 23.8021 23.85C23.7911 23.8239 23.7782 23.798 23.7612 23.7721L20.3495 19.6891L22.6987 14.2776L23.6291 16.6303C23.7522 16.9155 24.0833 17.2803 24.541 17.211L28.7812 16.3126C29.1221 16.2394 29.3471 15.9074 29.2932 15.5573C29.2405 15.2153 28.9395 14.9712 28.6001 14.9953Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M24.4548 5.46727H24.4548C24.8168 5.46727 25.149 5.59988 25.3901 5.84047C25.6237 6.07376 25.7523 6.39119 25.7523 6.73432C25.7522 7.45794 25.185 8.02552 24.4631 8.02658H24.4589C24.1055 8.02658 23.7786 7.89332 23.5383 7.65119C23.3019 7.41303 23.1717 7.0909 23.1717 6.74421C23.1717 6.00445 23.7112 5.46743 24.4548 5.46727ZM24.4589 9.49385H24.4631C25.9822 9.49158 27.1941 8.26725 27.1944 6.73464C27.1947 5.2035 25.989 3.99992 24.4547 4H24.4542C22.9161 4.00024 21.7295 5.19531 21.7295 6.74421C21.7294 8.27722 22.9376 9.49385 24.4589 9.49385Z" fill={props?.color || colors.white}/>
+	</Svg>);
+export default Running;

package/dist/src/assets/IconsSVG/activity/Stretching.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Stretching: (props?: SvgProps | undefined) => JSX.Element;
+export default Stretching;

package/dist/src/assets/IconsSVG/activity/Stretching.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+const Stretching = (props) => (<Svg viewBox="0 0 36 36" {...props}>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M14.5083 22.2887C14.5083 22.2448 14.5094 22.2014 14.5114 22.1581L14.5113 21.5684L5.36609 30.1106C4.93738 30.4875 4.87643 31.162 5.22972 31.6188C5.55778 32.043 6.13431 32.1359 6.56606 31.8341L16.4773 24.8425C15.3546 24.6036 14.5083 23.5517 14.5083 22.2887Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M18.3197 11.4778L18.3177 11.4778C18.3158 11.4778 18.314 11.4778 18.3121 11.4778H17.5201L17.5145 11.4778L17.5125 11.4778H16.8164C16.7863 11.4778 16.7565 11.4791 16.7269 11.4816L6.03477 11.533C5.66458 11.5356 5.35793 11.8389 5.32889 12.2309C5.29915 12.6324 5.57042 12.9885 5.94625 13.0413L15.5685 14.3471L15.5706 21.43C15.5689 21.465 15.5681 21.5 15.5681 21.5354C15.5681 22.5981 16.3106 23.4762 17.2745 23.6172L17.2739 23.6183L17.273 23.6198L22.7764 24.3386L24.0836 31.126C24.1867 31.6533 24.6323 32.0429 25.1383 32.0088C25.7203 31.9694 26.1382 31.4311 26.0845 30.8348L25.1338 22.0272C25.1335 22.0219 25.1329 22.0166 25.1321 22.0113L25.0992 21.7067C25.0929 21.7016 25.0741 21.6958 25.0448 21.6892C25.0288 21.6759 25.0102 21.6657 24.9896 21.6596L20.4074 20.2837C20.3376 20.2628 20.2895 20.1951 20.2895 20.1181V14.3573L29.886 13.0413C30.2619 12.9885 30.5331 12.6324 30.5033 12.2309C30.4743 11.8389 30.1677 11.5356 29.7976 11.533L19.132 11.4817C19.102 11.4791 19.0716 11.4778 19.041 11.4778H18.3197Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M18.0051 5.66707H18.0051H18.0052C18.399 5.66707 18.7604 5.81765 19.0228 6.09109C19.2771 6.35606 19.417 6.71672 19.417 7.10666C19.4168 7.92873 18.7996 8.5737 18.0142 8.5748H18.0096C17.6251 8.5748 17.2694 8.42339 17.008 8.14839C16.7506 7.8778 16.6089 7.51171 16.6089 7.11781C16.6089 6.27732 17.1959 5.66716 18.0051 5.66707ZM18.0095 10.2419H18.0141C19.6671 10.2394 20.9859 8.84824 20.9861 7.10694C20.9865 5.36729 19.6744 3.99982 18.005 4H18.0044C16.3307 4.00028 15.0396 5.35808 15.0396 7.11781C15.0396 8.85966 16.3541 10.2419 18.0095 10.2419Z" fill={props?.color || colors.white}/>
+	</Svg>);
+export default Stretching;

package/dist/src/assets/IconsSVG/activity/Swimming.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Swimming: (props?: SvgProps | undefined) => JSX.Element;
+export default Swimming;

package/dist/src/assets/IconsSVG/activity/Swimming.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+const Swimming = (props) => (<Svg viewBox="0 0 36 36" {...props}>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M28.5237 10.6701L28.5238 10.6704C28.8177 11.0615 28.9447 11.525 28.8812 11.9752C28.8199 12.4114 28.5825 12.8004 28.213 13.0707C27.4339 13.6403 26.3623 13.4741 25.7751 12.6947L25.7717 12.6902C25.4848 12.3081 25.3629 11.8498 25.4284 11.3995C25.4929 10.9563 25.734 10.5618 26.1072 10.2887C26.9037 9.70613 27.9199 9.86641 28.5237 10.6701ZM24.192 13.8456C24.1931 13.8472 24.1944 13.8487 24.1955 13.8502C25.4311 15.4906 27.7334 15.8364 29.3837 14.6299C31.0323 13.4243 31.3492 11.173 30.1035 9.51466C30.1034 9.51455 30.1032 9.51423 30.1031 9.51413C28.854 7.85156 26.604 7.50989 24.9364 8.72969C23.2859 9.93706 22.9568 12.201 24.192 13.8456Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M20.6929 12.2624C20.9866 12.1166 20.8062 11.636 20.499 11.5207L13.1512 8.74253C12.5683 8.56457 12.2712 8.76 12.2712 8.76C12.3454 9.54229 12.2557 10.3297 12.0337 11.0827L17.3353 13.9299L20.6929 12.2624Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M12.7729 9.458C12.6737 9.21196 12.5842 8.96924 12.5071 8.72363C12.4305 8.74079 12.3531 8.75397 12.275 8.7588L6.53744 12.2913C6.14452 12.5345 6.00558 13.034 6.21752 13.4411C6.43467 13.8582 6.94459 14.0345 7.37803 13.8425L13.5107 11.1013C13.1889 10.5992 12.9945 10.0081 12.7729 9.458Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M17.4404 17.7966C19.5643 16.8145 21.7509 16.0769 24.0482 15.8285L21.6007 12.6686L21.071 11.9633C20.5588 11.2812 19.5112 11.1827 18.7433 11.7445L7.37891 20.0068C10.8381 19.9861 14.2798 19.2579 17.4404 17.7966Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M34.8763 20.9533C32.0965 19.8169 28.8772 19.5735 25.9201 19.9917C23.0655 20.3954 20.6247 21.5879 18.014 22.6874C12.7757 24.8934 5.48757 24.8645 1 20.9533C6.44049 22.7014 12.4701 22.3028 17.6356 19.9169C20.3875 18.646 23.2397 17.7473 26.3173 17.8173C29.2872 17.8848 32.7388 18.7903 34.8763 20.9533Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M34.4683 25.7374C32.3239 24.8848 29.8581 24.6988 27.5851 25.0228C25.303 25.3479 23.4122 26.3245 21.3109 27.1744C17.2749 28.8073 11.7597 28.7355 8.33105 25.7374C12.3594 26.9859 16.8557 26.7979 20.7185 25.1035C23.0149 24.0962 25.2159 23.2466 27.7774 23.2873C30.1115 23.3244 32.793 24.0409 34.4683 25.7374Z" fill={props?.color || colors.white}/>
+	</Svg>);
+export default Swimming;

package/dist/src/assets/IconsSVG/activity/Walking.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const Walking: (props?: SvgProps | undefined) => JSX.Element;
+export default Walking;

package/dist/src/assets/IconsSVG/activity/Walking.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+const Walking = (props) => (<Svg viewBox="0 0 36 36" {...props}>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M13.9529 21.7582C13.6213 21.8699 14.4548 25.0996 14.4548 25.0996C13.1721 26.7927 11.3471 29.4239 11.3471 29.4239C11.0701 29.7895 11.1049 30.3032 11.4553 30.6174C11.8582 30.9788 12.4801 30.9504 12.8341 30.5785C12.8341 30.5785 16.2391 26.0881 16.2952 25.8591C16.3513 25.6301 16.3701 24.8947 16.3432 24.4797L16.2738 22.8328L13.9529 21.7582Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M19.7871 10.8719C19.8546 10.3598 19.4128 9.9907 19.0492 9.9166L17.0043 9.49964C16.6438 9.42617 16.2826 9.54008 16.0119 9.77615L11.0489 12.9129C10.9748 13.0352 10.904 13.1515 10.8837 13.3083L10.494 17.5337C10.4637 17.8737 10.7161 18.1787 11.0686 18.228C11.4127 18.276 11.7362 18.0636 11.8133 17.7391L12.687 14.0155L15.0609 12.9095L13.6512 19.3159C13.5987 19.5659 13.5974 19.8303 13.6572 20.0962C13.7924 20.6978 14.2082 21.1734 14.7441 21.4238C14.7441 21.4239 20.1474 23.9429 20.1474 23.9429C20.8524 25.1762 21.2803 30.3527 21.2803 30.3527C21.5095 30.7541 22.0105 30.9551 22.4556 30.7963C22.9675 30.6137 23.0563 29.7822 23.0543 29.1423L22.6345 23.0705C22.5945 22.9883 22.5445 22.9174 22.4876 22.8548C22.4712 22.8325 22.4527 22.8107 22.4303 22.7896L18.1593 19.6249L19.3579 14.0515C19.3579 14.0515 19.7196 11.3841 19.7871 10.8719Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M19.2516 5.4043L19.2517 5.40428C19.6097 5.33463 19.9677 5.39685 20.2593 5.57929C20.542 5.75622 20.7394 6.03338 20.8151 6.35976C20.9749 7.04803 20.5392 7.69702 19.8253 7.83693L19.8211 7.83774C19.4715 7.90573 19.1187 7.84189 18.8275 7.65783C18.5409 7.47682 18.3409 7.19548 18.2643 6.86573C18.1009 6.16213 18.516 5.54754 19.2516 5.4043ZM20.1449 9.23307L20.1491 9.23226C21.6513 8.93782 22.5796 7.54025 22.2414 6.08263C21.9035 4.62639 20.4448 3.71374 18.9271 4.00903L18.9266 4.00912C17.4052 4.30529 16.4954 5.67016 16.8376 7.14322C17.1761 8.60118 18.64 9.52578 20.1449 9.23307Z" fill={props?.color || colors.white}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M17.0068 10.5447C16.8957 10.3075 17.7044 9.84682 19.323 10.0414C19.323 10.0414 20.1014 10.4074 20.3298 10.9269C20.5037 11.3223 21.2227 13.7717 21.5564 14.9195L26.1416 16.5247C26.5132 16.6562 26.7067 17.0413 26.5819 17.4013C26.4602 17.7526 26.0758 17.9614 25.697 17.8819L20.1813 16.7101C20.1812 16.7102 20.1811 16.7104 20.181 16.7105C20.181 16.7105 19.8876 16.6569 19.652 16.2302L17.0068 10.5447Z" fill={props?.color || colors.white}/>
+	</Svg>);
+export default Walking;

package/dist/src/assets/assets/IconsSVG/Close.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+
+const Close = (props: SvgProps) => (
+	<Svg viewBox="0 0 28 28" fill="none" {...props}>
+		<Path
+			d="M4.4753 23.4372C5.10827 24.0746 6.20854 24.0519 6.82281 23.4477L14.0546 16.2888L21.2957 23.4425C21.9208 24.0599 22.9955 24.072 23.6285 23.4346C24.2858 22.7973 24.2736 21.7355 23.6364 21.1181L16.4101 13.9618L23.6364 6.8228C24.2736 6.20277 24.2858 5.129 23.6285 4.50632C22.9955 3.86898 21.9208 3.88101 21.2957 4.49576L14.0546 11.6468L6.82281 4.49312C6.20854 3.88628 5.10827 3.86634 4.4753 4.50104C3.83282 5.12636 3.85301 6.21333 4.46728 6.82016L11.7139 13.9618L4.46728 21.1207C3.85301 21.7275 3.83282 22.7999 4.4753 23.4372Z"
+			fill={props.color}
+		/>
+	</Svg>
+);
+
+export default Close;

package/dist/src/assets/assets/IconsSVG/Edit.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+
+const Edit = (props: SvgProps) => (
+	<Svg viewBox="0 0 28 28" {...props}>
+		<Path
+			d="M7.38159 23.5513H19.3863C21.3613 23.5513 22.5088 22.4038 22.5088 20.2053V9.31588L20.4885 11.3344V20.0358C20.4885 21.0368 19.9597 21.5328 19.2692 21.5328H7.50522C6.54726 21.5328 6.01851 21.0368 6.01851 20.0358V8.56645C6.01851 7.56357 6.54726 7.06099 7.50522 7.06099H16.3125L18.331 5.04248H7.38159C5.16442 5.04248 4 6.19001 4 8.38843V20.2053C4 22.4122 5.16442 23.5513 7.38159 23.5513Z"
+			fill={props.color}
+		/>
+		<Path
+			d="M11.2728 16.6709L13.369 15.7841L22.7767 6.38479L21.2039 4.83072L11.8065 14.2281L10.8774 16.2653C10.7764 16.4979 11.0362 16.7664 11.2728 16.6709ZM23.5632 5.60673L24.2828 4.86842C24.6794 4.45487 24.6887 3.88987 24.2958 3.50907L24.0254 3.23213C23.6745 2.88493 23.0955 2.93912 22.711 3.31517L21.9904 4.02916L23.5632 5.60673Z"
+			fill={props.color}
+		/>
+	</Svg>
+);
+export default Edit;

package/dist/src/assets/assets/IconsSVG/activity/Cycling.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+
+const Cycling = (props?: SvgProps) => (
+	<Svg viewBox="0 0 36 36" {...props}>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M20.9522 17.2358C20.9522 17.2358 20.151 16.4868 19.4424 15.8242L16.6704 17.5983C17.6636 18.2939 18.6775 19.0039 18.6775 19.0039L17.7217 22.0713C17.609 22.4875 17.8058 22.9371 18.2017 23.1073C18.6572 23.3032 19.1689 23.0795 19.344 22.6332L21.3198 18.1898C21.4592 17.8246 21.2428 17.4976 20.9522 17.2358Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M10.1391 29.5254C7.56668 29.5254 5.47393 27.4316 5.47393 24.858C5.47393 22.2844 7.56668 20.1907 10.1391 20.1907C10.9765 20.1907 11.7624 20.4137 12.4424 20.8018L11.8447 18.9581C11.3029 18.8016 10.7311 18.7161 10.1391 18.7161C6.74858 18.7161 4 21.4659 4 24.858C4 28.2501 6.74858 31 10.1391 31C12.1072 31 13.8577 30.0723 14.9812 28.6314L14.3841 26.79C13.6483 28.4019 12.0229 29.5254 10.1391 29.5254Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15.7955 16.9639L15.7908 16.9597L21.4056 13.2642L25.423 17.63C25.6355 17.8725 26.0005 17.9061 26.2537 17.7065C26.5009 17.5117 26.5579 17.1601 26.385 16.897L22.6745 11.2483C22.6625 11.2265 22.6507 11.2043 22.6367 11.1831L21.5974 9.60244C21.2766 9.11463 20.5708 9.00728 20.0291 9.36392L12.9124 14.031C12.9003 14.0388 12.8881 14.0466 12.8762 14.0546L12.8692 14.0593L12.869 14.0597C12.3978 14.3851 12.0889 14.9288 12.0889 15.5449C12.0889 15.6764 12.1033 15.8044 12.13 15.9279C12.1341 15.9487 12.1389 15.9696 12.1444 15.9908C12.1459 15.9964 12.1475 16.0018 12.149 16.0073C12.1514 16.0162 12.1534 16.025 12.1561 16.0339L12.1594 16.044C12.1716 16.0868 12.185 16.1289 12.2003 16.1701L16.3155 28.8537C16.4542 29.3063 16.9326 29.5613 17.3854 29.4242C17.8059 29.297 18.0627 28.8727 17.9805 28.4409L15.7955 16.9639Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M25.8609 29.437C23.2885 29.437 21.1958 27.3433 21.1958 24.7696C21.1958 22.196 23.2885 20.1023 25.8609 20.1023C28.4333 20.1023 30.5261 22.196 30.5261 24.7696C30.5261 27.3433 28.4333 29.437 25.8609 29.437ZM25.8607 18.6277C22.4703 18.6277 19.7217 21.3775 19.7217 24.7697C19.7217 28.1618 22.4703 30.9117 25.8607 30.9117C29.2513 30.9117 31.9999 28.1618 31.9999 24.7697C31.9999 21.3775 29.2513 18.6277 25.8607 18.6277Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M24.9569 7.33472H24.957C25.2918 7.33472 25.599 7.45534 25.8221 7.67418C26.0381 7.88638 26.1572 8.17511 26.1571 8.48721C26.157 9.14542 25.6324 9.66168 24.9647 9.66264H24.9608C24.6339 9.66264 24.3316 9.54143 24.1093 9.32119C23.8906 9.10457 23.7701 8.81156 23.7701 8.49621C23.7701 7.82334 24.2691 7.33486 24.9569 7.33472ZM24.9607 10.9972H24.9646C26.3696 10.9951 27.4906 9.88137 27.4909 8.48741C27.4912 7.09469 26.3758 5.99993 24.9567 6H24.9563C23.5335 6.00022 22.436 7.08724 22.436 8.49611C22.436 9.89052 23.5535 10.9972 24.9607 10.9972Z"
+			fill={props?.color || colors.white}
+		/>
+	</Svg>
+);
+
+export default Cycling;

package/dist/src/assets/assets/IconsSVG/activity/Running.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+
+const Running = (props?: SvgProps) => (
+	<Svg viewBox="0 0 36 36" {...props}>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15.6644 21.5192C15.3941 21.3047 15.1812 21.0204 15.051 20.6931L13.7312 23.2981C11.5777 23.1615 8.01222 22.9348 8.01222 22.9348C7.54716 22.9052 7.11397 23.2166 7.0198 23.6809C6.91152 24.2149 7.25938 24.7169 7.76993 24.807L14.0852 25.9215C14.5884 25.9868 15.0255 25.6501 15.322 25.2031L17.263 22.7806L15.6644 21.5192Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M28.6001 14.9953L25.0472 15.2574L23.9191 10.8406C23.8459 10.479 23.626 10.1677 23.2934 10.0183L21.4233 9.178C21.0937 9.0299 20.723 9.07181 20.4126 9.25614L14.9805 11.4268C14.8831 11.5359 14.7901 11.6394 14.737 11.7944L13.4533 16.0029C13.351 16.3418 13.5273 16.7029 13.8545 16.8248C14.1739 16.9437 14.5297 16.7942 14.6736 16.4805L16.3129 12.88L18.8263 12.2419L16.0953 18.4557C15.9912 18.6987 15.933 18.9668 15.933 19.2488C15.933 19.8869 16.2291 20.4544 16.6888 20.8178C16.6888 20.8179 21.3248 24.4767 21.3248 24.4767C21.7349 25.8722 23.3273 31.3 23.3273 31.3C23.4606 31.7541 23.8974 32.0604 24.3582 31.99C24.8882 31.9091 25.2311 31.4036 25.138 30.885L23.8965 24.0987C23.8758 24.0072 23.8432 23.925 23.8021 23.85C23.7911 23.8239 23.7782 23.798 23.7612 23.7721L20.3495 19.6891L22.6987 14.2776L23.6291 16.6303C23.7522 16.9155 24.0833 17.2803 24.541 17.211L28.7812 16.3126C29.1221 16.2394 29.3471 15.9074 29.2932 15.5573C29.2405 15.2153 28.9395 14.9712 28.6001 14.9953Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M24.4548 5.46727H24.4548C24.8168 5.46727 25.149 5.59988 25.3901 5.84047C25.6237 6.07376 25.7523 6.39119 25.7523 6.73432C25.7522 7.45794 25.185 8.02552 24.4631 8.02658H24.4589C24.1055 8.02658 23.7786 7.89332 23.5383 7.65119C23.3019 7.41303 23.1717 7.0909 23.1717 6.74421C23.1717 6.00445 23.7112 5.46743 24.4548 5.46727ZM24.4589 9.49385H24.4631C25.9822 9.49158 27.1941 8.26725 27.1944 6.73464C27.1947 5.2035 25.989 3.99992 24.4547 4H24.4542C22.9161 4.00024 21.7295 5.19531 21.7295 6.74421C21.7294 8.27722 22.9376 9.49385 24.4589 9.49385Z"
+			fill={props?.color || colors.white}
+		/>
+	</Svg>
+);
+
+export default Running;

package/dist/src/assets/assets/IconsSVG/activity/Stretching.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+
+const Stretching = (props?: SvgProps) => (
+	<Svg viewBox="0 0 36 36" {...props}>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M14.5083 22.2887C14.5083 22.2448 14.5094 22.2014 14.5114 22.1581L14.5113 21.5684L5.36609 30.1106C4.93738 30.4875 4.87643 31.162 5.22972 31.6188C5.55778 32.043 6.13431 32.1359 6.56606 31.8341L16.4773 24.8425C15.3546 24.6036 14.5083 23.5517 14.5083 22.2887Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M18.3197 11.4778L18.3177 11.4778C18.3158 11.4778 18.314 11.4778 18.3121 11.4778H17.5201L17.5145 11.4778L17.5125 11.4778H16.8164C16.7863 11.4778 16.7565 11.4791 16.7269 11.4816L6.03477 11.533C5.66458 11.5356 5.35793 11.8389 5.32889 12.2309C5.29915 12.6324 5.57042 12.9885 5.94625 13.0413L15.5685 14.3471L15.5706 21.43C15.5689 21.465 15.5681 21.5 15.5681 21.5354C15.5681 22.5981 16.3106 23.4762 17.2745 23.6172L17.2739 23.6183L17.273 23.6198L22.7764 24.3386L24.0836 31.126C24.1867 31.6533 24.6323 32.0429 25.1383 32.0088C25.7203 31.9694 26.1382 31.4311 26.0845 30.8348L25.1338 22.0272C25.1335 22.0219 25.1329 22.0166 25.1321 22.0113L25.0992 21.7067C25.0929 21.7016 25.0741 21.6958 25.0448 21.6892C25.0288 21.6759 25.0102 21.6657 24.9896 21.6596L20.4074 20.2837C20.3376 20.2628 20.2895 20.1951 20.2895 20.1181V14.3573L29.886 13.0413C30.2619 12.9885 30.5331 12.6324 30.5033 12.2309C30.4743 11.8389 30.1677 11.5356 29.7976 11.533L19.132 11.4817C19.102 11.4791 19.0716 11.4778 19.041 11.4778H18.3197Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M18.0051 5.66707H18.0051H18.0052C18.399 5.66707 18.7604 5.81765 19.0228 6.09109C19.2771 6.35606 19.417 6.71672 19.417 7.10666C19.4168 7.92873 18.7996 8.5737 18.0142 8.5748H18.0096C17.6251 8.5748 17.2694 8.42339 17.008 8.14839C16.7506 7.8778 16.6089 7.51171 16.6089 7.11781C16.6089 6.27732 17.1959 5.66716 18.0051 5.66707ZM18.0095 10.2419H18.0141C19.6671 10.2394 20.9859 8.84824 20.9861 7.10694C20.9865 5.36729 19.6744 3.99982 18.005 4H18.0044C16.3307 4.00028 15.0396 5.35808 15.0396 7.11781C15.0396 8.85966 16.3541 10.2419 18.0095 10.2419Z"
+			fill={props?.color || colors.white}
+		/>
+	</Svg>
+);
+
+export default Stretching;

package/dist/src/assets/assets/IconsSVG/activity/Swimming.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+
+const Swimming = (props?: SvgProps) => (
+	<Svg viewBox="0 0 36 36" {...props}>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M28.5237 10.6701L28.5238 10.6704C28.8177 11.0615 28.9447 11.525 28.8812 11.9752C28.8199 12.4114 28.5825 12.8004 28.213 13.0707C27.4339 13.6403 26.3623 13.4741 25.7751 12.6947L25.7717 12.6902C25.4848 12.3081 25.3629 11.8498 25.4284 11.3995C25.4929 10.9563 25.734 10.5618 26.1072 10.2887C26.9037 9.70613 27.9199 9.86641 28.5237 10.6701ZM24.192 13.8456C24.1931 13.8472 24.1944 13.8487 24.1955 13.8502C25.4311 15.4906 27.7334 15.8364 29.3837 14.6299C31.0323 13.4243 31.3492 11.173 30.1035 9.51466C30.1034 9.51455 30.1032 9.51423 30.1031 9.51413C28.854 7.85156 26.604 7.50989 24.9364 8.72969C23.2859 9.93706 22.9568 12.201 24.192 13.8456Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M20.6929 12.2624C20.9866 12.1166 20.8062 11.636 20.499 11.5207L13.1512 8.74253C12.5683 8.56457 12.2712 8.76 12.2712 8.76C12.3454 9.54229 12.2557 10.3297 12.0337 11.0827L17.3353 13.9299L20.6929 12.2624Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12.7729 9.458C12.6737 9.21196 12.5842 8.96924 12.5071 8.72363C12.4305 8.74079 12.3531 8.75397 12.275 8.7588L6.53744 12.2913C6.14452 12.5345 6.00558 13.034 6.21752 13.4411C6.43467 13.8582 6.94459 14.0345 7.37803 13.8425L13.5107 11.1013C13.1889 10.5992 12.9945 10.0081 12.7729 9.458Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M17.4404 17.7966C19.5643 16.8145 21.7509 16.0769 24.0482 15.8285L21.6007 12.6686L21.071 11.9633C20.5588 11.2812 19.5112 11.1827 18.7433 11.7445L7.37891 20.0068C10.8381 19.9861 14.2798 19.2579 17.4404 17.7966Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M34.8763 20.9533C32.0965 19.8169 28.8772 19.5735 25.9201 19.9917C23.0655 20.3954 20.6247 21.5879 18.014 22.6874C12.7757 24.8934 5.48757 24.8645 1 20.9533C6.44049 22.7014 12.4701 22.3028 17.6356 19.9169C20.3875 18.646 23.2397 17.7473 26.3173 17.8173C29.2872 17.8848 32.7388 18.7903 34.8763 20.9533Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M34.4683 25.7374C32.3239 24.8848 29.8581 24.6988 27.5851 25.0228C25.303 25.3479 23.4122 26.3245 21.3109 27.1744C17.2749 28.8073 11.7597 28.7355 8.33105 25.7374C12.3594 26.9859 16.8557 26.7979 20.7185 25.1035C23.0149 24.0962 25.2159 23.2466 27.7774 23.2873C30.1115 23.3244 32.793 24.0409 34.4683 25.7374Z"
+			fill={props?.color || colors.white}
+		/>
+	</Svg>
+);
+
+export default Swimming;

package/dist/src/assets/assets/IconsSVG/activity/Walking.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+import { colors } from "../../../utils/Constants";
+
+const Walking = (props?: SvgProps) => (
+	<Svg viewBox="0 0 36 36" {...props}>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M13.9529 21.7582C13.6213 21.8699 14.4548 25.0996 14.4548 25.0996C13.1721 26.7927 11.3471 29.4239 11.3471 29.4239C11.0701 29.7895 11.1049 30.3032 11.4553 30.6174C11.8582 30.9788 12.4801 30.9504 12.8341 30.5785C12.8341 30.5785 16.2391 26.0881 16.2952 25.8591C16.3513 25.6301 16.3701 24.8947 16.3432 24.4797L16.2738 22.8328L13.9529 21.7582Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.7871 10.8719C19.8546 10.3598 19.4128 9.9907 19.0492 9.9166L17.0043 9.49964C16.6438 9.42617 16.2826 9.54008 16.0119 9.77615L11.0489 12.9129C10.9748 13.0352 10.904 13.1515 10.8837 13.3083L10.494 17.5337C10.4637 17.8737 10.7161 18.1787 11.0686 18.228C11.4127 18.276 11.7362 18.0636 11.8133 17.7391L12.687 14.0155L15.0609 12.9095L13.6512 19.3159C13.5987 19.5659 13.5974 19.8303 13.6572 20.0962C13.7924 20.6978 14.2082 21.1734 14.7441 21.4238C14.7441 21.4239 20.1474 23.9429 20.1474 23.9429C20.8524 25.1762 21.2803 30.3527 21.2803 30.3527C21.5095 30.7541 22.0105 30.9551 22.4556 30.7963C22.9675 30.6137 23.0563 29.7822 23.0543 29.1423L22.6345 23.0705C22.5945 22.9883 22.5445 22.9174 22.4876 22.8548C22.4712 22.8325 22.4527 22.8107 22.4303 22.7896L18.1593 19.6249L19.3579 14.0515C19.3579 14.0515 19.7196 11.3841 19.7871 10.8719Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.2516 5.4043L19.2517 5.40428C19.6097 5.33463 19.9677 5.39685 20.2593 5.57929C20.542 5.75622 20.7394 6.03338 20.8151 6.35976C20.9749 7.04803 20.5392 7.69702 19.8253 7.83693L19.8211 7.83774C19.4715 7.90573 19.1187 7.84189 18.8275 7.65783C18.5409 7.47682 18.3409 7.19548 18.2643 6.86573C18.1009 6.16213 18.516 5.54754 19.2516 5.4043ZM20.1449 9.23307L20.1491 9.23226C21.6513 8.93782 22.5796 7.54025 22.2414 6.08263C21.9035 4.62639 20.4448 3.71374 18.9271 4.00903L18.9266 4.00912C17.4052 4.30529 16.4954 5.67016 16.8376 7.14322C17.1761 8.60118 18.64 9.52578 20.1449 9.23307Z"
+			fill={props?.color || colors.white}
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M17.0068 10.5447C16.8957 10.3075 17.7044 9.84682 19.323 10.0414C19.323 10.0414 20.1014 10.4074 20.3298 10.9269C20.5037 11.3223 21.2227 13.7717 21.5564 14.9195L26.1416 16.5247C26.5132 16.6562 26.7067 17.0413 26.5819 17.4013C26.4602 17.7526 26.0758 17.9614 25.697 17.8819L20.1813 16.7101C20.1812 16.7102 20.1811 16.7104 20.181 16.7105C20.181 16.7105 19.8876 16.6569 19.652 16.2302L17.0068 10.5447Z"
+			fill={props?.color || colors.white}
+		/>
+	</Svg>
+);
+
+export default Walking;

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface IExitModal {
+    /** The title of the modal. */
+    title: string;
+    /** The message to show in the modal. */
+    message: string;
+    /** The label of the first option. */
+    textFirstOption: string;
+    /**  The label of the second option. */
+    textSecondOption: string;
+    /** To be called if the user taps the first option button. */
+    firstOption(): void;
+    /** To be called if the user taps the second option button. */
+    secondOption(): void;
+    /** To be called if the user taps the optionally shown close button. */
+    onClose(): void;
+}
+/** Display a modal with two buttons for the user to choose between. */
+export default class ExitModal extends React.Component<IExitModal> {
+    /** Compose a JSX element for displaying the modal. */
+    render(): JSX.Element;
+}