@jescon-technologies/react-native-ui-kit 0.0.1 → 0.0.3

package/index.js

@@ -0,0 +1,70 @@
+// Alerts
+export { default as AAlert } from './src/Alerts/AAlert';
+export { default as AAlertIOS } from './src/Alerts/AAlertIOS';
+export { default as ABlink } from './src/Alerts/ABlink';
+
+// Common
+export { default as ErrorBoundary } from './src/common/ErrorBoundary';
+export { default as Icons } from './src/common/Icons'
+export { default as NetworkServiceCall } from './src/common/NetworkServiceCall';
+
+// HOC (Higher Order Components)
+export { default as ConfirmOverlay } from './src/HOC/ConfirmOverlay';
+export { default as HAbsolute } from './src/HOC/HAbsolute';
+export { default as HDiscontinue } from './src/HOC/HDiscontinue';
+export { default as HHeading } from './src/HOC/HHeading';
+export { default as HMoreButton } from './src/HOC/HMoreButton';
+export { default as HNatureHeading } from './src/HOC/HNatureHeading';
+export { default as HOCIcons } from './src/HOC/HOCIcons';
+export { default as HOverlay } from './src/HOC/HOverlay';
+export { default as HOverlayCentered } from './src/HOC/HOverlayCentered';
+export { default as HShadowButton } from './src/HOC/HShadowButton';
+export { default as HShadowCountButton } from './src/HOC/HShadowCountButton';
+export { default as OptionOverlay } from './src/HOC/OptionOverlay';
+
+// Layout
+export { default as CContainerView } from './src/layout/CContainerView';
+export { default as CDetailView } from './src/layout/CDetailView';
+export { default as FooterBlock } from './src/layout/FooterBlock';
+export { default as HeaderBlock } from './src/layout/HeaderBlock';
+export { default as INVLoginLayout } from './src/layout/INVLoginLayout';
+export { default as Loader } from './src/layout/Loader';
+
+// Media
+export { default as AudioScreen } from './src/Media/AudioScreen';
+export { default as BarcodeScan } from './src/Media/BarcodeScan';
+export { default as CAudioPlay } from './src/Media/CAudioPlay';
+export { default as CCaptureImageWithoutEdit } from './src/Media/CCaptureImageWithoutEdit';
+export { default as CImageGallery } from './src/Media/CImageGallery';
+export { default as CImageZoom } from './src/Media/CImageZoom';
+export { default as CSingleImage } from './src/Media/CSingleImage';
+export { default as CSketchCanvas } from './src/Media/CSketchCanvas';
+export { default as CVideoPlay } from './src/Media/CVideoPlay';
+export { default as DocumentScreen } from './src/Media/DocumentScreen';
+export { default as DrawingScreen } from './src/Media/DrawingScreen';
+export { default as ImageScreen } from './src/Media/ImageScreen';
+export { default as RecordAudio } from './src/Media/RecordAudio';
+export { default as RecordVideo } from './src/Media/RecordVideo';
+export { default as VideoScreen } from './src/Media/VideoScreen';
+
+// Static Components
+export { default as SAlphabet } from './src/StaticComponents/SAlphabet';
+export { default as SCheckBox } from './src/StaticComponents/SCheckBox';
+export { default as SDatePicker } from './src/StaticComponents/SDatePicker';
+export { default as SDatePickerLabel } from './src/StaticComponents/SDatePickerLabel';
+export { default as SDatePickerNew } from './src/StaticComponents/SDatePickerNew';
+export { default as SDateTimePickerNew } from './src/StaticComponents/SDateTimePickerNew';
+export { default as SDropDownGenerate } from './src/StaticComponents/SDropDownGenerate';
+export { default as SDropDownHoc } from './src/StaticComponents/SDropDownHoc';
+export { default as SDropDownIcon } from './src/StaticComponents/SDropDownIcon';
+export { default as SMenuBox } from './src/StaticComponents/SMenuBox';
+export { default as SOverlay } from './src/StaticComponents/SOverlay';
+export { default as SOverlayTextInput } from './src/StaticComponents/SOverlayTextInput';
+export { default as SSearch } from './src/StaticComponents/SSearch';
+export { default as SSearchBar } from './src/StaticComponents/SSearchBar';
+export { default as SSpeedDial } from './src/StaticComponents/SSpeedDial';
+export { default as STextInput } from './src/StaticComponents/STextInput';
+export { default as STextInputProps } from './src/StaticComponents/STextInputProps';
+export { default as STimePicker } from './src/StaticComponents/STimePicker';
+export { default as STimingDropDownNew } from './src/StaticComponents/STimingDropDownNew';
+export { default as STimingSwitch } from './src/StaticComponents/STimingSwitch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jescon-technologies/react-native-ui-kit",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A React Native module for Jescon Technologies that provides react-native-ui-kit",
   "main": "src/index.js",
   "scripts": {
@@ -20,6 +20,28 @@
   "bugs": {
     "url": "https://github.com/dpraful/react-native-ui-kit/issues"
   },
+  "dependencies": {
+    "axios": "^1.4.0",
+    "moment": "^2.29.4",
+    "react-native-modal-overlay": "^1.2.0",
+    "react-native-svg": "^13.9.0",
+    "@react-native-community/datetimepicker": "^7.0.0",
+    "@react-native-community/slider": "^4.4.0",
+    "@shopify/flash-list": "^1.6.0",
+    "@terrylinla/react-native-sketch-canvas": "^0.8.0",
+    "react-native-blob-util": "^0.17.0",
+    "react-native-document-picker": "^9.0.0",
+    "react-native-fast-image": "^8.6.0",
+    "react-native-photo-editor": "^0.1.0",
+    "react-native-sound": "^0.11.0",
+    "react-native-stopwatch-timer": "^0.0.5",
+    "react-native-vision-camera": "^2.16.0",
+    "rn-fetch-blob": "^0.12.0",
+    "react-native-video-controls": "^2.8.0",
+    "react-native-snap-carousel": "^3.9.0",
+    "react-native-image-pan-zoom": "^2.1.12",
+    "prop-types": "^15.8.0"
+  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": ">=0.60.0",
@@ -27,8 +49,8 @@
     "react-native-geolocation-service": "^5.0.0",
     "react-native-image-resizer": "^1.0.0",
     "@react-navigation/native": "^6.0.0",
-    "prop-types": "^15.8.0",
-    "react-native-fs": "^2.20.0"
+    "react-native-fs": "^2.20.0",
+    "react-native-elements": "^3.4.0"
   },
   "devDependencies": {
     "react": "^18.0.0",

package/src/Alerts/AAlert.js

@@ -1,7 +1,7 @@
 import React, { useState, memo, useEffect } from 'react';
 import { View, Dimensions, Text, TouchableOpacity, StyleSheet, TextInput, Platform, Image } from 'react-native';
 import { Global } from '../Common/Global';
-import Icons from '../Common/Icons';
+import Icons from '../common/Icons';
 import { ValueCheck } from '../CommonStyle/ComponentFunctions';
 import { normalize } from '../CommonStyle/componentStyle';
 import CModalOverlay from '../CustomComponents/CModalOverlay';

package/src/HOC/ConfirmOverlay.js

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Dimensions,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { normalize } from '../CommonStyle/componentStyle';
+import { Global } from '../Common/Global';
+import Svg, { Rect, Defs, LinearGradient, Stop } from 'react-native-svg';
+import HOCIcons from '../HOC/HOCIcons';
+import CModalOverlay from '../CustomComponents/CModalOverlay';
+
+export default function ConfirmOverlay(props) {
+  const [overlay, setOverlay] = useState(true);
+
+  function getPopupContainerStyle() {
+    return Platform.OS === 'ios'
+      ? { ...styles.overlayStyle, top: normalize(60) }
+      : { ...styles.overlayStyle, bottom: 0 };
+  }
+
+  const closeOverlay = () => {
+    setOverlay(false);
+    props.saveHandler && props.saveHandler(false);
+  };
+
+  return (
+    <CModalOverlay
+      visible={overlay}
+      onClose={closeOverlay}
+      animationType="fadeInUp"
+      animationDuration={500}
+      closeOnTouchOutside
+      containerStyle={styles.container}
+      childrenWrapperStyle={getPopupContainerStyle()}>
+
+      <View style={styles.wrapper}>
+
+        {/* ICON + MESSAGE */}
+        <View style={styles.content}>
+          <HOCIcons.Icons
+            icongroup={5}
+            name="exclamation-triangle"
+            size={normalize(70)}
+            color="#7575ed"
+            style={styles.icon}
+          />
+
+          <Text style={styles.message}>
+            {props.confirmtext || 'Are you sure ?'}
+          </Text>
+        </View>
+
+        {/* BUTTONS */}
+        <View style={styles.buttonRow}>
+
+          {/* YES BUTTON */}
+          <TouchableOpacity
+            style={styles.confirmButton}
+            onPress={() => {
+              setOverlay(false);
+              props.callback && props.callback(true);
+              props.saveHandler && props.saveHandler(false);
+            }}>
+
+            <Svg height="100%" width="100%">
+              <Defs>
+                <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
+                  <Stop offset="0" stopColor="#2f3ec1" stopOpacity="1" />
+                  <Stop
+                    offset="1"
+                    stopColor={Global.AppTheme.primary_color}
+                    stopOpacity="1"
+                  />
+                </LinearGradient>
+              </Defs>
+
+              <Rect
+                x="0"
+                y="0"
+                width="100%"
+                height={normalize(35)}
+                fill="url(#grad)"
+                rx="5"
+              />
+            </Svg>
+
+            <Text style={styles.confirmButtonText}>YES</Text>
+
+          </TouchableOpacity>
+
+          {/* NO BUTTON */}
+          <TouchableOpacity
+            style={styles.cancelButton}
+            onPress={() => {
+              setOverlay(false);
+              props.cancelcallback && props.cancelcallback(true);
+              props.saveHandler && props.saveHandler(false);
+            }}>
+
+            <Text style={styles.cancelButtonText}>NO</Text>
+
+          </TouchableOpacity>
+
+        </View>
+
+      </View>
+
+    </CModalOverlay>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: 'rgba(97, 97, 97, 0)',
+  },
+
+  overlayStyle: {
+    position: 'absolute',
+    width: Dimensions.get('window').width,
+    height: Dimensions.get('window').height * 0.28,
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    borderWidth: 2,
+    borderColor: 'darkblue',
+    backgroundColor: '#fff',
+  },
+
+  wrapper: {
+    marginTop: normalize(-10),
+    width: Dimensions.get('window').width - 10,
+    flex: 1,
+    borderRadius: normalize(17),
+  },
+
+  content: {
+    alignItems: 'center',
+    flex: 1,
+  },
+
+  icon: {
+    textAlign: 'center',
+    marginVertical: normalize(10),
+    opacity: 0.6,
+  },
+
+  message: {
+    color: 'black',
+    fontSize: normalize(14),
+    fontWeight: '400',
+    textAlign: 'center',
+    marginHorizontal: normalize(10),
+  },
+
+  buttonRow: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-evenly',
+    marginBottom: normalize(10),
+  },
+
+  cancelButton: {
+    backgroundColor: '#d2d2d2',
+    borderRadius: 5,
+    width: '45%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: normalize(35),
+  },
+
+  cancelButtonText: {
+    fontSize: normalize(12),
+    color: 'black',
+  },
+
+  confirmButton: {
+    width: '45%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: normalize(35),
+  },
+
+  confirmButtonText: {
+    fontSize: normalize(12),
+    color: '#fff',
+    position: 'absolute',
+  },
+});

package/src/HOC/HAbsolute.js

@@ -0,0 +1,56 @@
+import React, { useContext, useState } from 'react';
+import { View, Text, Dimensions, TouchableOpacity ,ScrollView} from 'react-native';
+import ABlink from '../Alerts/ABlink';
+import { Global } from '../Common/Global';
+import Icons from '../Common/Icons';
+import { ArrayCheck, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { normalize } from '../CommonStyle/componentStyle';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+
+export default function HAbsolute(props) {
+    const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+    const [isShow, setIsShow] = useState(true);
+    // console.log("Response consultation edittttttttttt", JSON.stringify(responseJSON))
+    return (
+        <View style={{ position: 'absolute', backgroundColor: 'transparent', top: Dimensions.get('screen').height * 0.1, zIndex: 1 }}>
+
+            {ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) && ArrayCheck(responseJSON.consultationEdit.moreButton) ?
+                <TouchableOpacity
+                    onPress={() => setIsShow(!isShow)}
+                    style={{ flexDirection: 'row', backgroundColor: '#fff', alignItems: 'center', justifyContent: 'space-evenly' }}>
+                    {isShow ? <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(9), fontWeight: 'bold' }}>{'CLOSE'}</Text> : null}
+                    <ABlink>
+                        <Icons.FontAwesome name={isShow ? 'close' : 'hand-o-right'} color={Global.AppTheme.primary_color} size={normalize(15)} />
+                    </ABlink>
+                </TouchableOpacity> : null}
+
+            {isShow && ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) ?
+                <View style={{ maxHeight: Dimensions.get('screen').height * 0.57, backgroundColor: '#fff', flexDirection: 'row-reverse' }}>
+
+                    <View
+                        style={{ flexDirection: 'column', alignItems: 'center', paddingHorizontal: normalize(3), justifyContent: 'center'}}>
+                        <Icons.FontAwesome5 name={responseJSON.consultationEdit.iconname} color={Global.AppTheme.primary_color} size={normalize(15)} style={{ paddingRight: normalize(0) }} />
+                        <Text style={{ width: normalize(10), fontSize: normalize(12), fontWeight: 'bold'}}>{responseJSON.consultationEdit.heading}</Text>
+                    </View>
+
+                    <ScrollView showsVerticalScrollIndicator={false}>
+                        {ArrayCheck(responseJSON.consultationEdit.moreButton) ? responseJSON.consultationEdit.moreButton.map((iconsFoot, i) => {
+                            return (
+                                <TouchableOpacity key={i}
+                                    onPress={() => props.callBack != undefined ? props.callBack(iconsFoot) : null}
+                                    style={{
+                                        backgroundColor: iconsFoot.color, alignItems: 'center', width: normalize(45), marginLeft: normalize(0),
+                                        padding: normalize(3), paddingVertical: normalize(7), borderRadius: normalize(4), borderWidth: 1, borderColor: 'grey',
+                                    }}>
+                                    <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                                        <Icons.FontAwesome5 name={iconsFoot.iconname} size={normalize(20)} color={Global.AppTheme.primary_color} style={{}} />
+                                        <Text adjustsFontSizeToFit numberOfLines={1} style={{ fontSize: normalize(10), fontWeight: 'bold' }}>{iconsFoot.name}</Text>
+                                    </View>
+                                </TouchableOpacity>
+                            );
+                        }) : null}
+                    </ScrollView>
+                </View> : null}
+        </View>
+    );
+}

package/src/HOC/HDiscontinue.js

@@ -0,0 +1,105 @@
+import { View, Text, Dimensions } from 'react-native';
+import React, { useState, useContext } from 'react';
+import { normalize } from '../CommonStyle/componentStyle';
+import STextInput from '../StaticComponents/STextInput';
+import { Global } from '../Common/Global';
+import { ValueCheck } from '../CommonStyle/ComponentFunctions';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import SDropDownNew from '../StaticComponents/SDropDownNew';
+import Loader from '../Custom/Loader';
+import Dropdown from '../Json/Dropdown.json';
+
+export default function HDiscontinue(props) {
+    const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+    const [data, setData] = useState(props.data);
+    const [isLoading, setIsLoading] = useState(false);
+    const [refresh, setRefresh] = useState(0);
+    // console.log("M JJJJ LLLLLL MMMMM NNNNNNNNNNNNNNN", JSON.stringify(data))
+
+    return (
+        <View style={{ flex: 1, paddingHorizontal: normalize(2), marginTop: normalize(2) }}>
+            <View style={{ alignItems: 'center' }}>
+                <Text style={{ fontSize: normalize(10), fontWeight: 'bold', color: Global.AppTheme.primary_color }}>
+                    {ValueCheck(responseJSON) && ValueCheck(responseJSON.consultationEdit) && ValueCheck(responseJSON.consultationEdit.heading) ? responseJSON.consultationEdit.heading + ' STATUS' : 'STATUS'}</Text>
+            </View>
+
+            <View style={{ paddingHorizontal: normalize(8), marginTop: normalize(-5) }}>
+                <Text style={{ fontSize: normalize(12), paddingHorizontal: 5 }}>Status</Text>
+                <SDropDownNew
+                    dropdowndata={getDropDownCode(ValueCheck(data.statuscode)
+                        ? data.statuscode
+                        : 'B')}
+                    onChangeData={val =>
+                        val == undefined ? null : getStatusCode(val)}
+                    editable={false}
+                    dropdownarray={Dropdown.DDStatusNature}
+                    widthArr={Dimensions.get('screen').width * 0.8}
+                    iconName={'info'}
+                    refreshCount={val =>
+                        val == undefined ? null : console.log('Refresh')
+                    }
+                />
+            </View>
+
+            {ValueCheck(props.type) && props.type == 1 && data.statuscode == 'S' ?
+                <View style={{ paddingHorizontal: normalize(8), marginTop: normalize(5) }}>
+                    <Text style={{ fontSize: normalize(12), paddingHorizontal: 5 }}>Substitution</Text>
+                    <SDropDownNew
+                        dropdownapi={"emr/emrcommonget/rndddaconsultationaddparameter 20,''"}
+                        dropdowndata={''}
+                        onChangeData={val =>
+                            val == undefined ? null : (data.hosumrcode = val.datavalue,
+                                data.assignedstatusname = val.displayvalue,
+                                data.content = val.content)}
+                        editable={true}
+                        widthArr={Dimensions.get('screen').width * 0.8}
+                        iconName={'file'}
+                        refreshCount={val =>
+                            val == undefined ? null : console.log('Refresh')
+                        }
+                    />
+                </View> : null}
+
+            <View style={{ paddingHorizontal: normalize(5), marginTop: normalize(-3) }}>
+                <STextInput
+                    data={{
+                        value: data.statusreason != undefined
+                            && data.statusreason != null ? data.statusreason : '',
+                        itemwidth: Dimensions.get('screen').width * 0.726,
+                        displaytext: 'Reason',
+                        validation: 2,
+                    }}
+                    callBack={val => (val == undefined ? null : (data.statusreason = val))} />
+            </View>
+
+            {isLoading ?
+                <Loader displaytext={true} />
+                : null}
+        </View>
+    );
+
+    function getStatusCode(val) {
+        if (val.datavalue == 'S') {
+            data.hosumrcode = 0;
+            data.content = '';
+            data.statusremarks = data.assignedstatusname + ' SUBSTITUTED.';
+            data.assignedstatusname = '';
+        }
+        data.statuscode = val.datavalue;
+        data.status = val.displayvalue;
+        setRefresh(refresh + 1);
+    }
+
+    function getDropDownCode(details) {
+        let dropdownvaluenew;
+        Dropdown.DDStatusNature != null
+            ? Dropdown.DDStatusNature.map(val => {
+                if (val.datavalue == details) {
+                    dropdownvaluenew = val.displayvalue;
+                }
+            })
+            : null;
+        return dropdownvaluenew;
+    }
+
+}

package/src/HOC/HHeading.js

@@ -0,0 +1,70 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
+import { normalize } from '../CommonStyle/componentStyle';
+import CText from '../CustomComponents/CText';
+import HOCIcons from './HOCIcons';
+
+function HHeading(props) {
+
+    const styles = props.styles != undefined ? props.styles : {
+        'iconname': 'file',
+        'bgcolor': '#f2efef',
+        'iconsize': 18,
+        'iconcolor': 'black',
+        'displaytext': 'Testing',
+        'textsize': 15,
+        'textcolor': 'darkblue',
+    };
+
+    return (
+        <TouchableOpacity
+            // onPress={() => props?.callBack(true)}
+            style={{
+                backgroundColor: styles.bgcolor != undefined ? styles.bgcolor : '#f2efef',
+                paddingVertical: 3,
+                paddingHorizontal: 6,
+                marginTop: 3,
+                marginBottom: 2,
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                elevation: 5,
+                borderWidth: 0.5,
+                borderColor: 'lightgrey',
+                width: '99%',
+                alignSelf: 'center',
+            }}>
+            <TouchableOpacity
+                onPress={() => props.Expand != undefined ? props.Expand(1) : null}
+                disabled={props.Expand != undefined ? false : true}
+                style={{ width: normalize(30), alignItems: 'center', marginRight: 5 }}
+            >
+                <HOCIcons.Icons
+                    icongroup={styles.icongroup ? styles.icongroup : 5}
+                    name={styles.iconname}
+                    color={styles.iconcolor}
+                    size={normalize(styles.iconsize)}
+                />
+            </TouchableOpacity>
+
+            <Text
+                style={{
+                    textShadowRadius: 2,
+                    fontSize: normalize(styles.textsize),
+                    fontWeight: 'bold',
+                    color: styles.textcolor,
+                    flex: 1,
+                }}>
+                {styles.displaytext}
+            </Text>
+
+            <View style={{ flexDirection: 'row', width: normalize(60), justifyContent: 'space-around' }}>
+                {props.children}
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+export default memo(HHeading);

package/src/HOC/HMoreButton.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { View } from 'react-native';
+import CText from '../CustomComponents/CText';
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+} from 'react-native-popup-menu';
+import { normalize } from '../CommonStyle/componentStyle';
+import Icons from '../Common/Icons';
+import { Global } from '../Common/Global';
+
+export default function HMoreButton(props) {
+    const styles = props.styles != undefined ? props.styles : {
+        'iconname': 'dots-horizontal-circle',
+        'iconsize': 25,
+        'iconcolor': 'black',
+        'displaytext': 'More',
+        'textsize': 9,
+        'textcolor': Global.AppTheme.primary_color,
+    };
+    const MoreArray = props.moreButtonArray != undefined ? props.moreButtonArray : [];
+
+    return (
+        MoreArray.length > 0 ?
+            <Menu>
+                <MenuTrigger style={{ width: normalize(45), alignItems: 'center', justifyContent: 'center' }}>
+                    <Icons.MaterialCommunityIcons
+                        name={styles.iconname}
+                        // color={styles.iconcolor}
+                        color={Global.AppTheme.primary_color}
+                        size={normalize(styles.iconsize)}
+                    />
+
+                    {styles.displaytext != undefined ?
+                        <CText
+                            style={{
+                                color: 'red',
+                                fontSize: normalize(styles.textsize),
+                            }}>
+                            {styles.displaytext}
+                        </CText> : null}
+                </MenuTrigger>
+
+                {MoreArray.length > 0 ?
+                    <MenuOptions
+                        customStyles={{
+                            optionsContainer: { width: '35%' },
+                            optionText: {},
+                        }}>
+                        <View>
+                            {MoreArray.map((params, key) => {
+                                return (
+                                    <MenuOption
+                                        key={key}
+                                        onSelect={() => props.callBack != undefined ? props.callBack(params) : null}
+                                        style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                        <Icons.FontAwesome5
+                                            name={params.iconname}
+                                            color={Global.AppTheme.primary_color}
+                                            size={normalize(20)}
+                                            style={{ width: normalize(25) }}
+                                        />
+                                        <CText adjustsFontSizeToFit
+                                            style={{
+                                                fontSize: normalize(12),
+                                                fontWeight: '600',
+                                                marginLeft: '2%',
+                                                width: '75%',
+
+                                            }}>
+                                            {params.name}
+                                        </CText>
+                                    </MenuOption>
+                                );
+                            })}
+                        </View>
+                    </MenuOptions> : null}
+            </Menu> : null
+    );
+}
+
+
+{/* <HMoreButton
+moreButtonArray={[{ "iconname": "eye-dropper", "function": 1, "displaytext": "Lab Results" },
+{ "iconname": "chart-line", "function": 3, "displaytext": "Patient Chart" }]}
+callBack={val => (val == undefined ? null : console.log(val))} /> */}