@abihealth/goapp-react-native 1.13.4

package/dist/common/components/Reminder.js

@@ -0,0 +1,214 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reminder = void 0;
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var react_native_1 = require("react-native");
+var zod_1 = require("zod");
+var useTheme_1 = require("../hooks/useTheme");
+var CheckSuccessIcon_1 = __importDefault(require("../icons/CheckSuccessIcon"));
+var KoCircleIcon_1 = __importDefault(require("../icons/KoCircleIcon"));
+var platform_1 = require("../utils/platform");
+var zod_2 = require("../utils/zod");
+var ActionSheet_1 = require("./ActionSheet");
+var Button_1 = require("./Button");
+var FormWrapper_1 = require("./FormWrapper");
+var PhoneInput_1 = __importDefault(require("./PhoneInput"));
+var Slide_1 = require("./Slide");
+var Text_1 = require("./Text");
+var schema = zod_1.z.object({
+    phone: zod_2.validPhone
+});
+var DEFAULT_TIMEOUT = 6000;
+var fakeCall = function (delay) {
+    return new Promise(function (resolve) {
+        setTimeout(function () {
+            resolve('success');
+        }, delay);
+    });
+};
+var Reminder = function (_a) {
+    var _b = _a.startTimeout, startTimeout = _b === void 0 ? DEFAULT_TIMEOUT : _b, _c = _a.endTimeout, endTimeout = _c === void 0 ? DEFAULT_TIMEOUT : _c;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var _d = (0, react_1.useState)(), phone = _d[0], setPhone = _d[1];
+    var _e = (0, react_1.useState)(false), showInput = _e[0], setShowInput = _e[1];
+    var _f = (0, react_1.useState)('present'), submitStatus = _f[0], setSubmitStatus = _f[1];
+    var _g = (0, react_1.useState)(null), slide = _g[0], setSlide = _g[1];
+    var _h = (0, react_1.useState)(false), loading = _h[0], setLoading = _h[1];
+    var _j = (0, react_1.useState)(0), containerHeight = _j[0], setContainerHeight = _j[1];
+    var _k = (0, react_1.useState)(0), keyboardHeight = _k[0], setKeyboardHeight = _k[1];
+    var onSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setLoading(true);
+            fakeCall(2000)
+                .then(function () {
+                setSubmitStatus('success');
+            })
+                .catch(function () {
+                setSubmitStatus('error');
+            })
+                .finally(function () { return setLoading(false); });
+            return [2 /*return*/];
+        });
+    }); };
+    var statusNotPresent = submitStatus === 'success' || submitStatus === 'error';
+    (0, react_1.useEffect)(function () {
+        var timerFadeIn = setTimeout(function () {
+            setSlide(Slide_1.SLIDE_MODE.up);
+        }, startTimeout);
+        return function () { return clearTimeout(timerFadeIn); };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        var timerFadeOut = setTimeout(function () {
+            if (statusNotPresent) {
+                setSlide(Slide_1.SLIDE_MODE.down);
+            }
+        }, endTimeout);
+        var removeReminder = setTimeout(function () {
+            if (statusNotPresent) {
+                setSlide(null);
+            }
+        }, endTimeout + 1000);
+        return function () {
+            clearTimeout(timerFadeOut);
+            clearTimeout(removeReminder);
+        };
+    }, [submitStatus]);
+    var component = {
+        present: (<FormWrapper_1.FormWrapper schema={schema} onSubmit={{ onSuccess: onSubmit }} submitButton={<Button_1.Button onPress={function () { return setShowInput(true); }} variant="tertiary" disabled={loading} loading={loading} submit={showInput}>
+            {t(showInput ? 'button.remind_me' : 'button.sms_reminder')}
+          </Button_1.Button>}>
+        {showInput && <PhoneInput_1.default id="phone" label="Phone Number" value={phone} disabled={loading} onChangeText={setPhone}/>}
+      </FormWrapper_1.FormWrapper>),
+        success: (<react_native_1.View style={styles.wrapper}>
+        <CheckSuccessIcon_1.default />
+        <Text_1.Text bold center>
+          {t('sms_reminder.confirmation')}
+        </Text_1.Text>
+      </react_native_1.View>),
+        error: (<react_native_1.View style={styles.wrapper}>
+        <KoCircleIcon_1.default />
+        <Text_1.Text bold>{t('sms_reminder.error')}</Text_1.Text>
+      </react_native_1.View>)
+    };
+    (0, react_1.useEffect)(function () {
+        react_native_1.Keyboard.addListener('keyboardDidShow', function (e) {
+            var tabBarHeight = 85; // TODO remove hardcoded value when not in dev
+            if (platform_1.isIOS)
+                setKeyboardHeight(e.endCoordinates.height - tabBarHeight);
+        });
+        react_native_1.Keyboard.addListener('keyboardDidHide', function () { return setKeyboardHeight(0); });
+        return function () {
+            react_native_1.Keyboard.removeAllListeners('keyboardDidShow');
+            react_native_1.Keyboard.removeAllListeners('keyboardDidHide');
+        };
+    }, []);
+    return (<>
+      {showInput && submitStatus === 'present' && (<react_native_1.TouchableOpacity activeOpacity={0.6} onPress={function () { return setShowInput(false); }} style={[
+                styles.bgContainer,
+                {
+                    bottom: containerHeight + keyboardHeight
+                }
+            ]}/>)}
+
+      {slide && (<ActionSheet_1.ActionSheet style={[{ bottom: keyboardHeight }]} onLayout={function (_a) {
+            var nativeEvent = _a.nativeEvent;
+            return setContainerHeight(nativeEvent.layout.height);
+        }} height={containerHeight || 93} // Initially 93
+         mode={slide}>
+          {component[submitStatus]}
+        </ActionSheet_1.ActionSheet>)}
+    </>);
+};
+exports.Reminder = Reminder;
+var getStyles = function (_a) {
+    var spacing = _a.spacing;
+    return react_native_1.StyleSheet.create({
+        bgContainer: {
+            flex: 1,
+            width: '100%',
+            zIndex: 999,
+            position: 'absolute',
+            top: 0
+        },
+        wrapper: {
+            alignItems: 'center',
+            gap: spacing.md,
+            padding: spacing.md
+        }
+    });
+};

package/dist/common/components/ScreenWrapper.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
+import { ScrollView } from 'react-native';
+import { ViewStyle } from 'react-native-phone-input';
+interface ScreenWrapperProps {
+    header: ReactNode;
+    containerStyle?: ViewStyle;
+    reminder?: boolean;
+    scrollRef?: RefObject<ScrollView>;
+    onContentSizeChange?: (_: number, __: number) => void;
+}
+export declare const ScreenWrapper: ({ children, header, containerStyle, reminder, scrollRef, onContentSizeChange }: PropsWithChildren<ScreenWrapperProps>) => React.JSX.Element;
+export {};

package/dist/common/components/ScreenWrapper.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenWrapper = void 0;
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var useHeader_1 = require("../hooks/useHeader");
+var useTheme_1 = require("../hooks/useTheme");
+var BackgroundPattern_1 = require("./BackgroundPattern");
+var Reminder_1 = require("./Reminder");
+var getHeader = function (base, header) {
+    if (header === null)
+        return null;
+    return header || base;
+};
+var ScreenWrapper = function (_a) {
+    var children = _a.children, header = _a.header, containerStyle = _a.containerStyle, reminder = _a.reminder, scrollRef = _a.scrollRef, onContentSizeChange = _a.onContentSizeChange;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var customHeader = (0, useHeader_1.useHeader)().header;
+    return (<BackgroundPattern_1.BackgroundPattern>
+      {getHeader(header, customHeader)}
+
+      <react_native_1.View style={styles.container}>
+        <react_native_1.ScrollView ref={scrollRef} automaticallyAdjustKeyboardInsets contentContainerStyle={[styles.contentContainerBase, containerStyle]} onContentSizeChange={onContentSizeChange}>
+          {children}
+        </react_native_1.ScrollView>
+
+        {reminder && <Reminder_1.Reminder />}
+      </react_native_1.View>
+    </BackgroundPattern_1.BackgroundPattern>);
+};
+exports.ScreenWrapper = ScreenWrapper;
+var getStyles = function (_a) {
+    var spacing = _a.spacing;
+    return react_native_1.StyleSheet.create({
+        container: { flex: 1 },
+        contentContainerBase: {
+            flexGrow: 1,
+            alignItems: 'center',
+            padding: spacing.sm
+        }
+    });
+};

package/dist/common/components/Select.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FormControlProps } from './FormControl';
+type Option = {
+    label: string;
+    value: string;
+};
+export interface SelectProps extends FormControlProps {
+    id?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    selectedValue?: string;
+    options: Array<Option>;
+    onChange?: (value: string) => void;
+    onOpen?: () => void;
+}
+export declare const Select: ({ id, label, disabled, placeholder, selectedValue, options, error, onChange, onOpen }: SelectProps) => React.JSX.Element;
+export default Select;

package/dist/common/components/Select.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var useForm_1 = require("../hooks/useForm");
+var useTheme_1 = require("../hooks/useTheme");
+var DropdownIcon_1 = __importDefault(require("../icons/DropdownIcon"));
+var platform_1 = require("../utils/platform");
+var FormControl_1 = __importDefault(require("./FormControl"));
+var Modal_1 = require("./Modal");
+var Text_1 = require("./Text");
+var Select = function (_a) {
+    var _b;
+    var id = _a.id, label = _a.label, disabled = _a.disabled, placeholder = _a.placeholder, selectedValue = _a.selectedValue, _c = _a.options, options = _c === void 0 ? [] : _c, error = _a.error, onChange = _a.onChange, onOpen = _a.onOpen;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var _d = (0, useForm_1.useForm)(), errors = _d.errors, data = _d.data, clearError = _d.clearError, updateData = _d.updateData, loading = _d.loading;
+    var _e = (0, react_1.useState)(false), isPickerVisible = _e[0], setPickerVisible = _e[1];
+    var _f = (0, react_1.useState)((data === null || data === void 0 ? void 0 : data[id]) || selectedValue), selected = _f[0], setSelected = _f[1];
+    var onValueChange = function (value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        updateData === null || updateData === void 0 ? void 0 : updateData(id)(value);
+        setSelected(value);
+        clearError === null || clearError === void 0 ? void 0 : clearError(id);
+        setPickerVisible(false);
+    };
+    var onOpenSelect = function () {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        clearError === null || clearError === void 0 ? void 0 : clearError(id);
+        setPickerVisible(!isPickerVisible);
+    };
+    var renderItem = function (_a) {
+        var item = _a.item;
+        return (<react_native_1.TouchableOpacity style={styles.itemContainer} onPress={function () { return onValueChange(item.value); }}>
+      <Text_1.Text>{item.label}</Text_1.Text>
+    </react_native_1.TouchableOpacity>);
+    };
+    var formError = errors === null || errors === void 0 ? void 0 : errors[id];
+    var formValue = data === null || data === void 0 ? void 0 : data[id];
+    var value = formValue || selected;
+    var err = formError || error;
+    return (<>
+      <FormControl_1.default label={label} error={err} name={id}>
+        <react_native_1.TouchableOpacity style={[styles.containerSelect, err && styles.error]} onPress={onOpenSelect} disabled={disabled || loading}>
+          <Text_1.Text bold={!placeholder} color={placeholder && !value ? theme.colors.gray : theme.colors.text}>
+            {((_b = options.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) || placeholder}
+          </Text_1.Text>
+          <DropdownIcon_1.default />
+        </react_native_1.TouchableOpacity>
+
+        {isPickerVisible && platform_1.isWeb && (<react_native_1.FlatList keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={true} data={options} keyExtractor={function (item) { return item.value; }} renderItem={renderItem} style={[styles.listContainer, { maxHeight: 200 }]} scrollEnabled={true}/>)}
+      </FormControl_1.default>
+
+      {!platform_1.isWeb && (<Modal_1.Modal visible={isPickerVisible} onRequestClose={function () { return setPickerVisible(false); }}>
+          <react_native_1.FlatList keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={true} data={options} keyExtractor={function (item) { return item.value; }} renderItem={renderItem} style={styles.listContainer}/>
+        </Modal_1.Modal>)}
+    </>);
+};
+exports.Select = Select;
+exports.default = exports.Select;
+var getStyles = function (_a) {
+    var spacing = _a.spacing, colors = _a.colors, borderRadius = _a.borderRadius;
+    return react_native_1.StyleSheet.create({
+        containerSelect: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: spacing.sm,
+            borderWidth: 1,
+            borderColor: colors.gray,
+            borderRadius: borderRadius.md,
+            width: '100%',
+            backgroundColor: colors.white
+        },
+        listContainer: {
+            backgroundColor: colors.white,
+            borderRadius: 5,
+            zIndex: 1,
+            padding: spacing.xs
+        },
+        itemContainer: {
+            padding: spacing.sm
+        },
+        modal: {
+            rowGap: spacing.xl,
+            alignItems: 'center',
+            paddingTop: spacing.xl,
+            paddingBottom: spacing.md,
+            paddingHorizontal: spacing.sm
+        },
+        error: {
+            borderColor: colors.warning
+        }
+    });
+};

package/dist/common/components/Slide.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export declare enum SLIDE_MODE {
+    up = "up",
+    down = "down"
+}
+export type SLIDE_MODE_KEYS = keyof typeof SLIDE_MODE;
+export type SlideProps = ViewProps & {
+    style?: StyleProp<ViewStyle>;
+    height: number;
+    mode: SLIDE_MODE_KEYS;
+};
+export declare const Slide: ({ children, style, height, mode, ...props }: PropsWithChildren<SlideProps>) => React.JSX.Element;

package/dist/common/components/Slide.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slide = exports.SLIDE_MODE = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var SLIDE_MODE;
+(function (SLIDE_MODE) {
+    SLIDE_MODE["up"] = "up";
+    SLIDE_MODE["down"] = "down";
+})(SLIDE_MODE || (exports.SLIDE_MODE = SLIDE_MODE = {}));
+var Slide = function (_a) {
+    var children = _a.children, style = _a.style, height = _a.height, mode = _a.mode, props = __rest(_a, ["children", "style", "height", "mode"]);
+    var start = (0, react_1.useMemo)(function () { return (mode === 'up' ? height : 0); }, [mode, height]);
+    var end = (0, react_1.useMemo)(function () { return (mode === 'up' ? 0 : height); }, [mode, height]);
+    var slideAnim = (0, react_native_1.useAnimatedValue)(start);
+    (0, react_1.useEffect)(function () {
+        slideAnim.setValue(start);
+        react_native_1.Animated.timing(slideAnim, {
+            toValue: end,
+            duration: 1000,
+            useNativeDriver: true
+        }).start();
+    }, [mode]);
+    return (<react_native_1.Animated.View {...props} style={[
+            styles.wrapper,
+            {
+                transform: [{ translateY: slideAnim }]
+            },
+            style
+        ]}>
+      {children}
+    </react_native_1.Animated.View>);
+};
+exports.Slide = Slide;
+var styles = react_native_1.StyleSheet.create({
+    wrapper: {
+        width: '100%'
+    }
+});

package/dist/common/components/SlideUp.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+interface SlideUpProps {
+    style?: StyleProp<ViewStyle>;
+    from?: number;
+}
+export declare const Slide: ({ children, style, from }: PropsWithChildren<SlideUpProps>) => React.JSX.Element;
+export {};

package/dist/common/components/SlideUp.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slide = void 0;
+var react_1 = __importStar(require("react"));
+var react_native_1 = require("react-native");
+var DEFAULT_FROM = 100;
+var Slide = function (_a) {
+    var children = _a.children, style = _a.style, _b = _a.from, from = _b === void 0 ? DEFAULT_FROM : _b;
+    var slideAnim = (0, react_native_1.useAnimatedValue)(from);
+    (0, react_1.useEffect)(function () {
+        slideAnim.setValue(from);
+        react_native_1.Animated.timing(slideAnim, {
+            toValue: 0,
+            duration: 1000,
+            useNativeDriver: true
+        }).start();
+    }, []);
+    return (<react_native_1.Animated.View style={[
+            styles.wrapper,
+            {
+                transform: [{ translateY: slideAnim }]
+            },
+            style
+        ]} onLayout={function (e) {
+            // Log height of the view
+            console.log(e.nativeEvent.layout.height);
+        }}>
+      {children}
+    </react_native_1.Animated.View>);
+};
+exports.Slide = Slide;
+var styles = react_native_1.StyleSheet.create({
+    wrapper: {
+        width: '100%'
+    }
+});

package/dist/common/components/Text.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ColorValue, Text as RNText, TextProps as RNTextProps } from 'react-native';
+export declare enum TEXT_VARIANT {
+    h1 = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4",
+    base = "base",
+    sm = "sm",
+    button = "button"
+}
+type TEXT_VARIANT_KEYS = keyof typeof TEXT_VARIANT;
+export declare const Text: React.ForwardRefExoticComponent<RNTextProps & {
+    variant?: TEXT_VARIANT_KEYS;
+    bold?: boolean;
+    color?: ColorValue;
+    center?: boolean;
+    shrink?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<RNText>>;
+export {};