@abihealth/goapp-react-native 1.17.0 → 1.18.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [1.18.1](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.18.0...goapp-react-native-v1.18.1) (2025-03-19)
+
+
+### Bug Fixes
+
+* undefined processing prescription screen in custom components ([#146](https://github.com/abiglobalhealth/react-native-sdk/issues/146)) ([9d9a6f4](https://github.com/abiglobalhealth/react-native-sdk/commit/9d9a6f44d37581bdbc1883ff55a93a4fda4f7a93))
+
+## [1.18.0](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.17.0...goapp-react-native-v1.18.0) (2025-03-19)
+
+
+### Features
+
+* Add indication survey and searchable dropdown features ([#139](https://github.com/abiglobalhealth/react-native-sdk/issues/139)) ([782b022](https://github.com/abiglobalhealth/react-native-sdk/commit/782b022ce2d693c3746c2635120b03a02a56c13f))
+
+
+### Bug Fixes
+
+* answer screen theme in prescription card ([#145](https://github.com/abiglobalhealth/react-native-sdk/issues/145)) ([0f321a1](https://github.com/abiglobalhealth/react-native-sdk/commit/0f321a12ebb693c4e1c29c824a76c1b260524ad3))
+
 ## [1.17.0](https://github.com/abiglobalhealth/react-native-sdk/compare/goapp-react-native-v1.16.0...goapp-react-native-v1.17.0) (2025-03-18)
 
 

package/dist/common/assets/ChevronIcon.d.ts

@@ -0,0 +1,6 @@
+import { ColorValue, ViewStyle } from 'react-native';
+declare const ChevronIcon: ({ color, style }: {
+    color: ColorValue;
+    style?: ViewStyle;
+}) => import("react").JSX.Element;
+export default ChevronIcon;

package/dist/common/assets/ChevronIcon.js

@@ -0,0 +1,43 @@
+"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 });
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var ChevronIcon = function (_a) {
+    var color = _a.color, style = _a.style;
+    return (<react_native_svg_1.default width={12} height={8} fill="none" viewBox="0 0 12 8" style={style}>
+    <react_native_svg_1.Path fill={color} d="M5.997 7.381a.93.93 0 0 1-.71-.287L.239 2.046A.815.815 0 0 1 0 1.46.794.794 0 0 1 .24.863.807.807 0 0 1 .83.619c.231 0 .429.081.592.244l4.574 4.574L10.572.863a.814.814 0 0 1 .587-.239.795.795 0 0 1 .597.239c.163.162.244.36.244.591 0 .232-.081.43-.244.592L6.708 7.094a.93.93 0 0 1-.71.287Z"/>
+  </react_native_svg_1.default>);
+};
+exports.default = ChevronIcon;

package/dist/common/assets/ChevronIcon.tsx

@@ -0,0 +1,12 @@
+import { ColorValue, ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+
+const ChevronIcon = ({ color, style }: { color: ColorValue; style?: ViewStyle }) => (
+  <Svg width={12} height={8} fill="none" viewBox="0 0 12 8" style={style}>
+    <Path
+      fill={color}
+      d="M5.997 7.381a.93.93 0 0 1-.71-.287L.239 2.046A.815.815 0 0 1 0 1.46.794.794 0 0 1 .24.863.807.807 0 0 1 .83.619c.231 0 .429.081.592.244l4.574 4.574L10.572.863a.814.814 0 0 1 .587-.239.795.795 0 0 1 .597.239c.163.162.244.36.244.591 0 .232-.081.43-.244.592L6.708 7.094a.93.93 0 0 1-.71.287Z"
+    />
+  </Svg>
+)
+export default ChevronIcon

package/dist/common/assets/SearchGlassIcon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const SearchGlassIcon: () => React.JSX.Element;
+export default SearchGlassIcon;

package/dist/common/assets/SearchGlassIcon.js

@@ -0,0 +1,48 @@
+"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 });
+var React = __importStar(require("react"));
+var react_native_svg_1 = __importStar(require("react-native-svg"));
+var SearchGlassIcon = function () { return (<react_native_svg_1.default width={24} height={24} fill="none">
+    <react_native_svg_1.G clipPath="url(#a)">
+      <react_native_svg_1.Path fill="#757575" d="m23.485 21.487-4.594-4.594a10.44 10.44 0 0 0 2.157-6.367c0-2.811-1.095-5.455-3.084-7.443A10.457 10.457 0 0 0 10.521 0a10.457 10.457 0 0 0-7.443 3.083c-4.104 4.104-4.104 10.782 0 14.886a10.456 10.456 0 0 0 7.443 3.083 10.44 10.44 0 0 0 6.367-2.156l4.594 4.595c.277.276.64.415 1.002.415s.725-.139 1.001-.415a1.416 1.416 0 0 0 0-2.004ZM5.081 15.966c-3-3-2.999-7.88 0-10.88a7.644 7.644 0 0 1 5.44-2.253c2.055 0 3.987.8 5.44 2.253a7.643 7.643 0 0 1 2.253 5.44c0 2.055-.8 3.987-2.253 5.44a7.642 7.642 0 0 1-5.44 2.253c-2.055 0-3.987-.8-5.44-2.253Z"/>
+    </react_native_svg_1.G>
+    <react_native_svg_1.Defs>
+      <react_native_svg_1.ClipPath id="a">
+        <react_native_svg_1.Path fill="#fff" d="M0 0h24v24H0z"/>
+      </react_native_svg_1.ClipPath>
+    </react_native_svg_1.Defs>
+  </react_native_svg_1.default>); };
+exports.default = SearchGlassIcon;

package/dist/common/assets/SearchGlassIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
+
+const SearchGlassIcon = () => (
+  <Svg width={24} height={24} fill="none">
+    <G clipPath="url(#a)">
+      <Path
+        fill="#757575"
+        d="m23.485 21.487-4.594-4.594a10.44 10.44 0 0 0 2.157-6.367c0-2.811-1.095-5.455-3.084-7.443A10.457 10.457 0 0 0 10.521 0a10.457 10.457 0 0 0-7.443 3.083c-4.104 4.104-4.104 10.782 0 14.886a10.456 10.456 0 0 0 7.443 3.083 10.44 10.44 0 0 0 6.367-2.156l4.594 4.595c.277.276.64.415 1.002.415s.725-.139 1.001-.415a1.416 1.416 0 0 0 0-2.004ZM5.081 15.966c-3-3-2.999-7.88 0-10.88a7.644 7.644 0 0 1 5.44-2.253c2.055 0 3.987.8 5.44 2.253a7.643 7.643 0 0 1 2.253 5.44c0 2.055-.8 3.987-2.253 5.44a7.642 7.642 0 0 1-5.44 2.253c-2.055 0-3.987-.8-5.44-2.253Z"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M0 0h24v24H0z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+)
+export default SearchGlassIcon

package/dist/common/components/AnswerScreen/PrescriptionCard/index.js

@@ -22,7 +22,7 @@ var PrescriptionCard = function (_a) {
     var screens = (0, useCustomComponents_1.useCustomComponents)().screens;
     var medication = [prescription.data.medication, prescription.data.quantity].join(', ');
     return (<Card_1.Card type="prescription" style={[styles.container, (_c = (_b = screens === null || screens === void 0 ? void 0 : screens.AnswerScreen) === null || _b === void 0 ? void 0 : _b.prescriptionCard) === null || _c === void 0 ? void 0 : _c.containerStyle]}>
-      {((_e = (_d = screens.AnswerScreen) === null || _d === void 0 ? void 0 : _d.prescriptionCard) === null || _e === void 0 ? void 0 : _e.customComponent) ? (<screens.AnswerScreen.prescriptionCard.customComponent prescription={prescription}/>) : (<react_native_1.View style={styles.innerContainer}>
+      {((_e = (_d = screens === null || screens === void 0 ? void 0 : screens.AnswerScreen) === null || _d === void 0 ? void 0 : _d.prescriptionCard) === null || _e === void 0 ? void 0 : _e.customComponent) ? (<screens.AnswerScreen.prescriptionCard.customComponent prescription={prescription}/>) : (<react_native_1.View style={styles.innerContainer}>
           <react_native_1.View style={styles.header}>
             <PillsIcon_1.PillsIcon />
             <Text_1.Text bold>{t('prescription.request.details')}</Text_1.Text>

package/dist/common/icons/CloseIcon.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { ColorValue } from 'react-native';
-export declare const CloseIcon: ({ color }: {
+export declare const CloseIcon: ({ color, width, height }: {
     color?: ColorValue;
+    width?: number;
+    height?: number;
 }) => React.JSX.Element;

package/dist/common/icons/CloseIcon.js

@@ -41,10 +41,10 @@ var useTheme_1 = require("../hooks/useTheme");
 var react_1 = __importDefault(require("react"));
 var react_native_svg_1 = __importStar(require("react-native-svg"));
 var CloseIcon = function (_a) {
-    var color = _a.color;
+    var color = _a.color, _b = _a.width, width = _b === void 0 ? 20 : _b, _c = _a.height, height = _c === void 0 ? 20 : _c;
     var palette = (0, useTheme_1.useTheme)().palette;
     var parsedColor = color || palette.white;
-    return (<react_native_svg_1.default width={20} height={20} viewBox="0 0 20 20" fill="none">
+    return (<react_native_svg_1.default width={width} height={height} viewBox="0 0 20 20" fill="none">
       <react_native_svg_1.Path d="M19.2969 1.39831C18.8039 0.884786 18.0076 0.884786 17.5146 1.39831L11.3333 7.82396L5.15207 1.38514C4.65908 0.871619 3.86272 0.871619 3.36974 1.38514C2.87675 1.89867 2.87675 2.72821 3.36974 3.24174L9.551 9.68056L3.36974 16.1194C2.87675 16.6329 2.87675 17.4624 3.36974 17.976C3.86272 18.4895 4.65908 18.4895 5.15207 17.976L11.3333 11.5371L17.5146 17.976C18.0076 18.4895 18.8039 18.4895 19.2969 17.976C19.7899 17.4624 19.7899 16.6329 19.2969 16.1194L13.1157 9.68056L19.2969 3.24174C19.7773 2.74138 19.7773 1.89867 19.2969 1.39831Z" fill={parsedColor}/>
     </react_native_svg_1.default>);
 };

package/dist/common/screens/AnswerScreen.js

@@ -60,7 +60,8 @@ var AnswerScreen = function (_a) {
     var scrollRef = (0, react_1.useRef)(null);
     var consultation = (0, useConsultation_1.useConsultation)().consultation;
     var _c = (0, react_1.useState)(false), showCloseConsultation = _c[0], setShowCloseConsultation = _c[1];
-    var AnswerScreen = (0, useCustomComponents_1.useCustomComponents)().screens.AnswerScreen;
+    var screens = (0, useCustomComponents_1.useCustomComponents)().screens;
+    var AnswerScreen = screens === null || screens === void 0 ? void 0 : screens.AnswerScreen;
     var scrollEnd = function () { var _a; return (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollToEnd({ animated: true }); };
     (0, react_1.useEffect)(function () { return scrollEnd(); }, [showCloseConsultation]);
     (0, react_1.useEffect)(function () {

package/dist/form-prescriptions/api/prescription.d.ts

@@ -1,2 +1,4 @@
-import { IndicationCategory } from './models/prescription';
+import { IndicationCategory } from '../api/models/prescription';
+import { IndicationSurveyQuestions } from '../types/indications';
 export declare const getIndicationSurveyList: () => Promise<IndicationCategory[]>;
+export declare const getIndicationSurvey: (id: string) => Promise<IndicationSurveyQuestions>;

package/dist/form-prescriptions/api/prescription.js

@@ -3,8 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIndicationSurveyList = void 0;
+exports.getIndicationSurvey = exports.getIndicationSurveyList = void 0;
 var axios_1 = __importDefault(require("axios"));
 var INDICATION_SURVEY_LIST_URL = '/prescription/indication-survey/list';
+var INDICATION_SURVEY_URL = '/prescription/indication-survey/';
 var getIndicationSurveyList = function () { return axios_1.default.get(INDICATION_SURVEY_LIST_URL).then(function (response) { return response === null || response === void 0 ? void 0 : response.data; }); };
 exports.getIndicationSurveyList = getIndicationSurveyList;
+var getIndicationSurvey = function (id) {
+    return axios_1.default.get("".concat(INDICATION_SURVEY_URL).concat(id)).then(function (response) { return response === null || response === void 0 ? void 0 : response.data; });
+};
+exports.getIndicationSurvey = getIndicationSurvey;

package/dist/form-prescriptions/components/FormPrescription.js

@@ -35,8 +35,6 @@ var ConsultationScreen = function () {
         var commonScreen = (0, screens_1.getCommonScreen)(consultation);
         if (commonScreen)
             return commonScreen;
-        if (!consultation)
-            return <HomeScreen_1.HomeScreen />;
         var status = consultation.status;
         switch (status) {
             default:

package/dist/form-prescriptions/components/IndicationCategory.d.ts

@@ -0,0 +1,3 @@
+import { IndicationCategory as IndicationCategoryProps } from '../api/models/prescription';
+export declare const IndicationCategory: ({ iconUrl, textKey, indications }: IndicationCategoryProps) => import("react").JSX.Element;
+export default IndicationCategory;

package/dist/form-prescriptions/components/IndicationCategory.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndicationCategory = void 0;
+var ChevronIcon_1 = __importDefault(require("../../common/assets/ChevronIcon"));
+var Text_1 = require("../../common/components/Text");
+var useTheme_1 = require("../../common/hooks/useTheme");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var react_native_1 = require("react-native");
+var react_native_svg_1 = require("react-native-svg");
+var IndicationSurveyButton_1 = __importDefault(require("./IndicationSurveyButton"));
+var IndicationCategory = function (_a) {
+    var iconUrl = _a.iconUrl, textKey = _a.textKey, indications = _a.indications;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var theme = (0, useTheme_1.useTheme)();
+    var styles = getStyles(theme);
+    var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.titleContainer}>
+        <react_native_1.View style={styles.titleWrapper}>
+          <react_native_svg_1.SvgUri uri={iconUrl} style={styles.icon} accessibilityLabel={t(textKey)} width={16} height={16}/>
+          <Text_1.Text bold style={styles.title}>
+            {t(textKey)}
+          </Text_1.Text>
+        </react_native_1.View>
+        <react_native_1.TouchableOpacity onPress={function () { return setOpen(!open); }}>
+          <ChevronIcon_1.default color={open ? theme.palette.primary.base : theme.palette.black} style={open ? { transform: [{ rotate: '180deg' }] } : undefined}/>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+      <react_native_1.View style={[styles.buttonsContainer, { display: open ? 'flex' : 'none' }]}>
+        {indications.map(function (indication) { return (<IndicationSurveyButton_1.default key={indication.textKey} {...indication}/>); })}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.IndicationCategory = IndicationCategory;
+exports.default = exports.IndicationCategory;
+var getStyles = function (_a) {
+    var palette = _a.palette, spacing = _a.spacing;
+    return react_native_1.StyleSheet.create({
+        container: {
+            width: '100%',
+            paddingVertical: spacing.md,
+            borderBottomWidth: 1,
+            borderBottomColor: palette.white
+        },
+        titleContainer: {
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+            width: '100%'
+        },
+        titleWrapper: {
+            flexDirection: 'row',
+            overflow: 'hidden',
+            alignItems: 'center',
+            marginRight: spacing.sm,
+            flex: 1
+        },
+        buttonsContainer: {
+            width: '100%',
+            paddingTop: spacing.md,
+            gap: spacing.xs
+        },
+        icon: {
+            marginRight: spacing.xs
+        },
+        title: {
+            textTransform: 'uppercase'
+        }
+    });
+};

package/dist/form-prescriptions/components/IndicationSurveyButton.d.ts

@@ -1,3 +1,3 @@
 import { IndicationSurveyList } from '../api/models/prescription';
-export declare const IndicationSurveyButton: ({ iconUrl, textKey }: IndicationSurveyList) => import("react").JSX.Element;
+export declare const IndicationSurveyButton: ({ iconUrl, id, textKey }: IndicationSurveyList) => import("react").JSX.Element;
 export default IndicationSurveyButton;

package/dist/form-prescriptions/components/IndicationSurveyButton.js

@@ -3,17 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IndicationSurveyButton = void 0;
 var Text_1 = require("../../common/components/Text");
 var useTheme_1 = require("../../common/hooks/useTheme");
+var useIndicationSurvey_1 = require("../hooks/useIndicationSurvey");
 var react_i18next_1 = require("react-i18next");
 var react_native_1 = require("react-native");
+var react_native_svg_1 = require("react-native-svg");
 var IndicationSurveyButton = function (_a) {
-    var iconUrl = _a.iconUrl, textKey = _a.textKey;
+    var iconUrl = _a.iconUrl, id = _a.id, textKey = _a.textKey;
     var t = (0, react_i18next_1.useTranslation)().t;
     var theme = (0, useTheme_1.useTheme)();
     var styles = getStyles(theme);
-    return (<react_native_1.View style={[styles.container, theme.shadows.soft]}>
-      <react_native_1.Image source={{ uri: iconUrl }} style={styles.icon} accessibilityLabel={t(textKey)}/>
+    var onSelectIndication = (0, useIndicationSurvey_1.useIndicationSurvey)().onSelectIndication;
+    return (<react_native_1.TouchableOpacity style={[styles.container, theme.shadows.soft]} onPress={function () { return onSelectIndication(id.toString()); }}>
+      <react_native_svg_1.SvgUri uri={iconUrl} style={styles.icon} accessibilityLabel={t(textKey)} width={16} height={16}/>
       <Text_1.Text>{t(textKey)}</Text_1.Text>
-    </react_native_1.View>);
+    </react_native_1.TouchableOpacity>);
 };
 exports.IndicationSurveyButton = IndicationSurveyButton;
 exports.default = exports.IndicationSurveyButton;
@@ -21,16 +24,15 @@ var getStyles = function (_a) {
     var borderRadius = _a.borderRadius, palette = _a.palette, spacing = _a.spacing;
     return react_native_1.StyleSheet.create({
         container: {
+            width: '100%',
             borderRadius: borderRadius.md,
             backgroundColor: palette.white,
             flexDirection: 'row',
-            alignItems: 'flex-start',
-            justifyContent: 'center',
+            alignItems: 'center',
             padding: spacing.sm
         },
         icon: {
-            width: 16,
-            height: 16
+            marginRight: spacing.xs
         }
     });
 };

package/dist/form-prescriptions/components/Questionnaire/QuestionnaireQuestion/OpenEnded.js

@@ -60,7 +60,7 @@ var OpenEnded = function () {
                 return __generator(this, function (_a) {
                     addAnswer({
                         id: 'textArea',
-                        value: data.answer
+                        value: (data === null || data === void 0 ? void 0 : data.answer) || ''
                     });
                     nextStep();
                     return [2 /*return*/];

package/dist/form-prescriptions/components/Questionnaire/QuestionnaireQuestion/SingleChoice.js

@@ -51,8 +51,8 @@ var SingleChoice = function () {
             return setShowExitLogic(true);
         addAnswer({
             id: answer.id,
-            key: answer.titleKey,
-            value: t(answer.text)
+            key: answer.value,
+            value: t(answer.value)
         });
         nextStep();
     };
@@ -65,7 +65,7 @@ var SingleChoice = function () {
       {currentQuestion.answers
             .sort(function (a, z) { return a.order - z.order; })
             .map(function (answer) { return (<Button_1.Button key={answer.id} radio variant="secondary" onPress={function () { return handleSaveAnswer(answer); }}>
-            {t(answer.text)}
+            {t(answer.value)}
           </Button_1.Button>); })}
     </>);
 };

package/dist/form-prescriptions/components/SearchableDropdown.d.ts

@@ -0,0 +1,90 @@
+import { Theme } from '../../common/types/theme';
+import React from 'react';
+export type Item = {
+    label: string;
+    category?: string;
+    value: string;
+};
+interface SearchableDropDownProps {
+    items?: Item[];
+    defaultIndex?: number;
+    placeholder?: string;
+    placeholderTextColor?: string;
+    underlineColorAndroid?: string;
+    loading?: boolean;
+    onTextChange?: (_: string) => void;
+    onItemSelect?: (_?: any) => void;
+    onFocus?: () => void;
+}
+export declare const SearchableDropDown: (props: SearchableDropDownProps) => React.JSX.Element;
+export declare const getStyles: ({ palette, spacing, font, borderRadius }: Theme) => {
+    listContainer: {
+        backgroundColor: import("react-native").ColorValue;
+        width: "100%";
+        paddingHorizontal: number;
+        borderRadius: number;
+        flex: number;
+        minHeight: number;
+    };
+    itemContainer: {
+        width: "100%";
+        justifyContent: "center";
+        alignSelf: "center";
+        borderBottomWidth: number;
+        borderBottomColor: import("react-native").ColorValue;
+        paddingVertical: number;
+        gap: number;
+    };
+    notFoundContainer: {
+        backgroundColor: import("react-native").ColorValue;
+        borderRadius: number;
+        padding: number;
+    };
+    itemText: {
+        color: import("react-native").ColorValue;
+        fontSize: number;
+        fontWeight: "bold";
+    };
+    itemCategory: {
+        color: import("react-native").ColorValue;
+        fontSize: number;
+        paddingLeft: number;
+    };
+    modal: {
+        height: "80%";
+        backgroundColor: import("react-native").ColorValue;
+    };
+    modalContent: {
+        padding: number;
+        gap: number;
+        flex: number;
+    };
+    wrapperContainer: {
+        backgroundColor: import("react-native").ColorValue;
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        width: "100%";
+        borderColor: import("react-native").ColorValue;
+        borderWidth: number;
+        borderRadius: number;
+        padding: number;
+        marginBottom: number;
+        flex: number;
+        minHeight: number;
+        maxHeight: number;
+        justifyContent: "space-between";
+    };
+    input: {
+        outlineWidth: number;
+        flex: number;
+        borderWidth: number;
+        paddingHorizontal: number;
+        fontSize: number;
+        color: import("react-native").ColorValue;
+    };
+    center: {
+        textAlign: "center";
+    };
+};
+export {};