@jescon-technologies/react-native-ui-kit 0.0.9 → 0.0.11

package/src/CommonStyle/ComponentFunctions.tsx

@@ -1,4 +1,3 @@
-
 import ComponentStyles from '../CommonStyle/componentStyle';
 import { colors, fontWeight } from '../CommonStyle/commonStyle';
 import {
@@ -12,8 +11,10 @@ import {
     Dimensions,
     View,
     Image,
+    ViewStyle,
+    TextStyle,
+    ImageStyle,
 } from 'react-native';
-import Sound from 'react-native-sound';
 import NetInfo from '@react-native-community/netinfo';
 import { Global } from '../../../../../src/Common/Global';
 import { APIURL } from '../../../../../src/Common/apiConstants';
@@ -26,20 +27,31 @@ const {
 
 const scale = SCREEN_WIDTH / 320;
 
-export function getSound(code) {
-    Sound.setCategory('Playback');
-    const track = new Sound(code, Sound.MAIN_BUNDLE, (e) => {
-        if (e) {
-            console.log('error loading track:', e);
-        } else {
-            console.log('Playings');
-            track.play();
-        }
-    });
+// Type definitions
+interface ShadowStyle {
+    elevation?: number;
+    shadowColor?: string;
+    shadowOffset?: { width: number; height: number };
+    shadowOpacity?: number;
+    shadowRadius?: number;
+    boxShadow?: string;
 }
 
-export function CButtonShadow() {
+interface WeekDay {
+    datavalue: number;
+    displayvalue: string;
+    selected: boolean;
+}
 
+interface NetInfoState {
+    type: string;
+    isConnected: boolean | null;
+    isInternetReachable: boolean | null;
+    details?: any;
+}
+
+// Shadow Functions
+export function CButtonShadow(): ShadowStyle {
     const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
     return isAndroidBelow9 ? {
         elevation: 10,
@@ -48,12 +60,11 @@ export function CButtonShadow() {
         shadowOpacity: 0,
         shadowRadius: 20,
     } : {
-        boxShadow: `-3 3 6 -1 ${Global.AppTheme.primary_color}`,
-    };  // offsetX  offsetY blurRadius spreadDistance color
+        boxShadow: `-3px 3px 6px -1px ${Global.AppTheme.primary_color}`,
+    };
 }
 
-export function CFooterShadow() {
-
+export function CFooterShadow(): ShadowStyle {
     const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
     return isAndroidBelow9 ? {
         elevation: 10,
@@ -62,14 +73,35 @@ export function CFooterShadow() {
         shadowOpacity: 0,
         shadowRadius: 20,
     } : {
-        boxShadow: `0 4 10 0 ${Global.AppTheme.primary_color}`,
-    };  // offsetX  offsetY blurRadius spreadDistance color
+        boxShadow: `0px 4px 10px 0px ${Global.AppTheme.primary_color}`,
+    };
 }
 
-export function LoaderIndicator(i) {
+export function CShadowDynamic(
+    offsetX: number = 0,
+    offsetY: number = 2,
+    blurRadius: number = 6,
+    spreadDistance: number = 0,
+    color: string = 'rgba(0, 0, 0, 0.2)',
+): ShadowStyle {
+    const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
 
-    return (
+    return isAndroidBelow9
+        ? {
+            elevation: 6,
+            shadowColor: color,
+            shadowOffset: { width: offsetX, height: offsetY },
+            shadowOpacity: 0.25,
+            shadowRadius: blurRadius,
+        }
+        : {
+            boxShadow: `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadDistance}px ${color}`,
+        };
+}
 
+// Loader Components
+export function LoaderIndicator(i?: any): React.JSX.Element {
+    return (
         <View style={{
             backgroundColor: '#ffffff',
             padding: normalize(10),
@@ -82,16 +114,21 @@ export function LoaderIndicator(i) {
                     width: normalize(35),
                     height: normalize(35),
                 }}
-                // source={require('../Assets/gif/loading.gif')}
-                source={{uri: `${APIURL}file/getCommonFile/image/heartpulse.gif`}}
+                source={{ uri: `${APIURL}file/getCommonFile/image/heartpulse.gif` }}
                 resizeMode={Image.resizeMode.contain}
             />
         </View>
     );
+}
 
+export function Loader(): React.JSX.Element {
+    return (
+        <ActivityIndicator size={normalize(30)} style={{ marginTop: normalize(10) }} color="red" />
+    );
 }
 
-export function normalize(size) {
+// Utility Functions
+export function normalize(size: number): number {
     const newSize = scale < 1.5 ? size * scale : size * 1.6;
     if (Platform.OS === 'ios') {
         return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
@@ -100,129 +137,107 @@ export function normalize(size) {
     }
 }
 
-export function Loader() {
-    return (
-        <ActivityIndicator size={normalize(30)} style={{ marginTop: normalize(10) }} color="red" />
-    );
-}
-
-export function CShadowDynamic(
-  offsetX = 0,
-  offsetY = 2,
-  blurRadius = 6,
-  spreadDistance = 0,
-  color = 'rgba(0, 0, 0, 0.2)',
-) {
-  const isAndroidBelow9 = Platform.OS === 'android' && Platform.Version < 28;
-
-  return isAndroidBelow9
-    ? {
-        elevation: 6,
-        shadowColor: color,
-        shadowOffset: {width: offsetX, height: offsetY},
-        shadowOpacity: 0.25,
-        shadowRadius: blurRadius,
-      }
-    : {
-        boxShadow: `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadDistance}px ${color}`,
-      };
-}
-
-export async function getAppVersion() {
-    var Ver = 1.1;
-    const Results = await codePush.getUpdateMetadata();
-    if (Results) {
-        if (Results.isPending == false) {
-            Ver = Results.appVersion + Results.label;
-        } else {
-            Ver = Results.appVersion + Results.label + ' NOT UPDATED !!!';
-        }
-    }
-    return Ver;
-}
-
 
-/**
-    * To check whether value is true && null && undefined
- */
-export function isBNU(i) {
+// Value Check Functions
+export function isBNU(i: any): boolean {
     return (i && i != null && i != undefined ? true : false);
 }
 
-/**
-    * To check whether value is null && undefined
- */
-export function isNU(i) { return (i != null && i != undefined ? true : false); }
+export function isNU(i: any): boolean {
+    return (i != null && i != undefined ? true : false);
+}
 
-/**
-    * To check whether value is  null && undefined && length > 0
- */
-export function isNUL(i) { return (i != null && i != undefined && i.length > 0 ? true : false); }
+export function isNUL(i: any[] | string | null | undefined): boolean {
+    return (i != null && i != undefined && i.length > 0 ? true : false);
+}
 
-/**
-    * To check whether value is  null && undefined && !=""
- */
-export function isNUQ(i) { return (i != null && i != undefined && i != '' ? true : false); }
+export function isNUQ(i: any): boolean {
+    return (i != null && i != undefined && i !== '' ? true : false);
+}
 
-/**
-    * To check whether value is  null && undefined && !="" && != 0
- */
-export function isNUQZ(i) { return (i != null && i != undefined && i != '' && i != 0 ? true : false); }
+export function isNUQZ(i: any): boolean {
+    return (i != null && i != undefined && i !== '' && i !== 0 ? true : false);
+}
 
-/**
-    * To check whether value is true && null && undefined && length > 0
- */
-export function isBNUL(i) {
+export function isBNUL(i: any[] | string | null | undefined): boolean {
     return (i && i != null && i != undefined && i.length > 0 ? true : false);
 }
 
-export function isOrganism(i) {
+// Type Check Functions
+export function isOrganism(i: number): boolean {
     return (i == 3 ? true : false);
 }
 
-export function isDescription(i) {
+export function isDescription(i: number): boolean {
     return (i == 1 || i == 6 || i == 7 || i == 8 ? true : false);
 }
 
-export function isValueBased(i) {
+export function isValueBased(i: number): boolean {
     return (i == 2 || i == 4 || i == 5 ? true : false);
 }
 
-export function dlog(i) {
-    if (__DEV__) {
-        return console.log(i);
-    }
-    else {
+export function isDes(i: number): boolean {
+    return (i == 1 ? true : false);
+}
+
+export function isVal(i: number): boolean {
+    return (i == 2 ? true : false);
+}
+
+export function isOrg(i: number): boolean {
+    return (i == 3 ? true : false);
+}
+
+export function isSero(i: number): boolean {
+    return (i == 4 ? true : false);
+}
+
+export function isViro(i: number): boolean {
+    return (i == 5 ? true : false);
+}
+
+export function isPath(i: number): boolean {
+    return (i == 6 ? true : false);
+}
 
+// Debug Functions
+export function dlog(i: any): void {
+    if (__DEV__) {
+        console.log(i);
     }
 }
 
-export function cdev() {
+export function cdev(): boolean {
     if (__DEV__) {
         return true;
-    }
-    else {
+    } else {
         return false;
     }
 }
 
-export function clog(i) {
-    return console.log(i);
+export function clog(i: any): void {
+    console.log(i);
 }
 
-
-
-
-export function ValueCheck(value) {
+// Validation Functions
+export function ValueCheck(value: any): boolean {
     if (value) {
         return true;
     } else {
-        false;
+        return false;
     }
 }
 
-export function convertStringToArrayWeekDay(inputString) {
-    const days = [
+export function ArrayCheck(value: any[] | null | undefined): boolean {
+    if (value && value.length > 0) {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+export function convertStringToArrayWeekDay(inputString: string): WeekDay[] {
+    const days: WeekDay[] = [
         { datavalue: 1, displayvalue: 'Su', selected: true },
         { datavalue: 2, displayvalue: 'M', selected: true },
         { datavalue: 3, displayvalue: 'Tu', selected: true },
@@ -237,28 +252,20 @@ export function convertStringToArrayWeekDay(inputString) {
             datavalue: day.datavalue,
             displayvalue: day.displayvalue,
             selected: selectedDays.includes(day.datavalue) ? false : true,
-            // selected: day.selected,
         };
     });
 }
 
-export function ArrayCheck(value) {
-    if (value && value.length > 0) {
-        return true;
-    } else {
-        false;
-    }
-}
-
-export async function isPermitted() {
+// Permission Functions
+export async function isPermitted(): Promise<boolean> {
     if (Platform.OS === 'android') {
         try {
-            const apiLevel = Platform.Version;
+            const apiLevel = Platform.Version as number;
 
             // Android 13+ (API 33+) - need READ_MEDIA permissions
             if (apiLevel >= 33) {
                 const granted = await PermissionsAndroid.request(
-                    PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES
+                    PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES as any
                 );
                 return granted === PermissionsAndroid.RESULTS.GRANTED;
             }
@@ -273,7 +280,7 @@ export async function isPermitted() {
                 );
                 return granted === PermissionsAndroid.RESULTS.GRANTED;
             }
-        } catch (err) {
+        } catch (err: any) {
             Alert.alert('File access Permission not allowed', err.toString());
             return false;
         }
@@ -282,36 +289,14 @@ export async function isPermitted() {
     }
 }
 
-export function getLoading(load) {
+// Network Functions
+export function getLoading(load: () => void): void {
     setTimeout(load, 15000);
 }
-export function isDes(i) {
-    return (i == 1 ? true : false);
-}
-
-export function isVal(i) {
-    return (i == 2 ? true : false);
-}
-
-export function isOrg(i) {
-    return (i == 3 ? true : false);
-}
-
-export function isSero(i) {
-    return (i == 4 ? true : false);
-}
-
-export function isViro(i) {
-    return (i == 5 ? true : false);
-}
-
-export function isPath(i) {
-    return (i == 6 ? true : false);
-}
 
-export function isConnected() {
+export function isConnected(): Promise<void> {
     return new Promise((resolve, reject) => {
-        NetInfo.fetch().then(state => {
+        NetInfo.fetch().then((state: NetInfoState) => {
             console.log('Connection type', state.type);
             console.log('Is connected?', state.isConnected);
             console.log('Is Internet?', state.isInternetReachable);
@@ -319,70 +304,59 @@ export function isConnected() {
 
             if (state.isConnected && state.isInternetReachable) {
                 resolve();
-            }
-            else {
+            } else {
                 reject();
             }
         });
     });
 }
 
-//Footer icon
-export function getFooterIcon(opacity) {
-    return (
-        {
-            ...ComponentStyles.footer_Icon,
-            opacity: opacity,
-        }
-    );
+// Footer Functions
+export function getFooterIcon(opacity: number): ViewStyle {
+    return {
+        ...ComponentStyles.footer_Icon,
+        opacity: opacity,
+    };
 }
 
-export function notifyMessage(msg, type) {
+export function notifyMessage(msg: string, type?: any): void {
     DeviceEventEmitter.emit('event.testToast', {
         'displaytext': msg,
         'datavalue': type,
     });
-
-    // let X = bottom != undefined && bottom != null ? bottom : 80
-    // if (Platform.OS === 'android') {
-    //     ToastAndroid.showWithGravityAndOffset(msg, ToastAndroid.LONG, ToastAndroid.BOTTOM,
-    //         0,
-    //         X)
-    // } else {
-    //     Alert.alert(msg);
-    // }
 }
 
-export function getFooterIconText(opacity, color) {
-    return (
-        {
-            ...ComponentStyles.footer_Icon_Text,
-            opacity: opacity,
-            color: color,
-        }
-    );
+export function getFooterIconText(opacity: number, color: string): TextStyle {
+    return {
+        ...ComponentStyles.footer_Icon_Text,
+        opacity: opacity,
+        color: color,
+    };
 }
 
-// Header Section
-
-export function getHeaderBlockContainer(width) {
-    return (
-        {
-            ...ComponentStyles.header_section_conatiner_style,
-            width: width,
-            paddingTop: '5%',
-        }
-    );
+// Header Functions
+export function getHeaderBlockContainer(width: number): ViewStyle {
+    return {
+        ...ComponentStyles.header_section_conatiner_style,
+        width: width,
+        paddingTop: '5%',
+    };
 }
-export function getHeaderTitleContainer(width) {
-    return (
-        {
-            justifyContent: 'flex-end', paddingLeft: width * 0.02,
-        }
-    );
+
+export function getHeaderTitleContainer(width: number): ViewStyle {
+    return {
+        justifyContent: 'flex-end',
+        paddingLeft: width * 0.02,
+    };
 }
 
-export function getResultViewObservedvalueTextvalidate(value, minvalue, maxvalue, datatype) {
+// Result View Functions
+export function getResultViewObservedvalueTextvalidate(
+    value: any,
+    minvalue: number | null | undefined,
+    maxvalue: number | null | undefined,
+    datatype: string
+): string {
     switch (datatype) {
         case 'integer':
         case 'numeric':
@@ -395,238 +369,228 @@ export function getResultViewObservedvalueTextvalidate(value, minvalue, maxvalue
             else {
                 return colors.color_resulttext_normal;
             }
-            break;
         default:
             return colors.color_resulttext_normal;
     }
 }
 
-// Profile Card
-
-export function getProfileMainContainer(item) {
-    console.log('getProfileMainContainer', item);
-    return (
-        {
-            width: '96%',
-            backgroundColor: '#fff',
-            flexDirection: 'row',
-            alignItems: 'center',
-            borderRadius: 10, elevation: 5,
-            marginBottom: 5,
-            borderWidth: 0.1,
-            borderLeftWidth: 5,
-            borderColor: item.bordercolor ? item.bordercolor : 'lightgreen',
-        }
-    );
-}
-export function getProfileContentLeftlogo1(item) {
-    return (
-        {
-            borderRadius: 0,
-            // backgroundColor: "blue",
-            padding: 5,
-            color: 'black',
-            fontWeight: 'bold', fontSize: normalize(11),
-        }
-    );
-}
-export function getProfileContentLeftlogo2() {
-    return (
-        {
-            backgroundColor: '#fcb5b5',
-            padding: 5,
-            borderRadius: 50,
-            color: 'black',
-            fontSize: normalize(10),
-        }
-    );
-}
-export function getProfileContentLogo1() {
-    return (
-        {
-            fontSize: normalize(13),
-            marginTop: 3,
-            color: 'black',
-            fontWeight: 'bold',
-        }
-    );
-}
-export function getProfileContentLogo2() {
-    return (
-        {
-            fontSize: normalize(10),
-            color: 'black',
-        }
-    );
-}
-export function getProfilecardSubheadingTop(color) {
-    return (
-        {
-            fontSize: normalize(10),
-            fontWeight: fontWeight.fontWeight_700,
-            color: color,
-            // padding: 5,
-            paddingBottom: 0,
-            paddingTop: 2,
-        }
-    );
-}
-export function getProfilecardSubheadingBottom(color, position) {
-    return (
-        {
-            fontSize: normalize(10),
-            fontWeight: fontWeight.fontWeight_100,
-            color: color,
-            paddingLeft: position == 'right' ? 5 : 0,
-            paddingRight: position == 'left' ? 5 : 0,
-        }
-    );
+// Profile Card Functions
+interface ProfileItem {
+    bordercolor?: string;
+    [key: string]: any;
 }
 
-export function getProfilecardMobileNO(color, position) {
-    return (
-        {
-            fontSize: normalize(12),
-            // fontWeight: fontWeight.fontWeight_100,
-            fontWeight: fontWeight.fontWeight_Bold,
-            color: color,
-            paddingLeft: position == 'right' ? 5 : 0,
-            paddingRight: position == 'left' ? 5 : 0,
-        }
-    );
-}
-export function getProfilecardOnlineStatusBadgeContainer(backgroundcolor) {
-    return (
-        {
-            backgroundColor: backgroundcolor,
-            height: normalize(20),
-            // width:normalize(28),
-            paddingHorizontal: normalize(5),
-            borderRadius: 1000,
-            padding: 0,
-            //elevation: 5,
-            //borderColor:backgroundcolor,
-            //borderWidth:1
-        }
-    );
-}
-export function getGroupButtonView(width) {
-    return (
-        {
-            justifyContent: 'center', margin: 5,
-            width: width * 0.10,
-            alignContent: 'center', alignItems: 'center',
-        }
-    );
-}
-export function getMediaoverlayContainerStyle(height) {
-    return (
-        {
-            ...ComponentStyles.mediaoverlay_containerstyle,
-            height: height,
-        }
-    );
-}
-export function getMediaViewContainer(width, height, itemwidth) {
-    return (
-        {
-            ...ComponentStyles.View_col_center,
-            width: width * (itemwidth / 100),
-            margin: height * 0.003,
-        }
-    );
-}
-export function getMediaViewChildContainer(width, itemwidth) {
-    return (
-        {
-            borderWidth: 0.5,
-            borderRadius: 2,
-            width: width * (itemwidth / 100),
-            borderColor: colors.color_componentBordercolor,
-        }
-    );
-}
-export function getMediaIcon(width, itemwidth) {
-    return (
-        {
-            height: 120,
-            width: width * (itemwidth / 100),
-        }
-    );
-}
-export function getMediaoverlayChildrenwrapperStyle(width, height, itemheight) {
-    return (
-        {
-            width: width,
-            height: itemheight,
-            padding: height * 0.01,
-        }
-    );
-}
-export function getMediaoverlayTopLineContainer(width, height) {
-    return (
-        {
-            ...ComponentStyles.View_col_center,
-            width: width * 0.15, height: height * 0.02,
-        }
-    );
-}
-export function getMediaoverlayOptionRow(width, height) {
-    return (
-        {
-            ...ComponentStyles.View_row_spacearound,
-            borderRadius: 14,
-            marginTop: height * 0.02, width: width * 0.90,
-        }
-    );
-}
-export function getMediaoverlayOptionContainer(width, height) {
-    return (
-        {
-            ...ComponentStyles.View_col_center,
-            margin: 5,
-            height: height * 0.1,
-            width: width * 0.20,
-        }
-    );
-}
-export function getMediaoverlayMsgorLoaderView(height) {
-    return (
-        {
-            height: height,
-            ...ComponentStyles.View_col_center,
-        }
-    );
-}
-export function getMediaGalleryChildContainer(width, height) {
-    return (
-        {
-            marginTop: height * 0.01, width: width * 0.90,
-            justifyContent: 'center', alignItems: 'center',
-        }
-    );
-}
-export function getMediaGalleryDeleteView(width, height) {
-    return (
-        {
-            borderWidth: 0.5, borderRadius: 2,
-            height: height / 5, width: width * 0.90,
-            borderColor: colors.color_componentBordercolor,
-            alignItems: 'center', justifyContent: 'center',
-        }
-    );
-}
-export function getMediaIconStyle(width, height) {
-    return (
-        {
-            height: height / 5, width: width * 0.90,
-        }
-    );
-}
-export function getMediaGalleryDeleteIcon(width) {
-    return (
-        {
-            height: '40%', width: width * 0.90, resizeMode: 'contain',
-        }
-    );
-}
+export function getProfileMainContainer(item: ProfileItem): ViewStyle {
+    console.log('getProfileMainContainer', item);
+    return {
+        width: '96%',
+        backgroundColor: '#fff',
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 10,
+        elevation: 5,
+        marginBottom: 5,
+        borderWidth: 0.1,
+        borderLeftWidth: 5,
+        borderColor: item.bordercolor ? item.bordercolor : 'lightgreen',
+    };
+}
+
+export function getProfileContentLeftlogo1(item: ProfileItem): TextStyle {
+    return {
+        borderRadius: 0,
+        padding: 5,
+        color: 'black',
+        fontWeight: 'bold',
+        fontSize: normalize(11),
+    };
+}
+
+export function getProfileContentLeftlogo2(): TextStyle {
+    return {
+        backgroundColor: '#fcb5b5',
+        padding: 5,
+        borderRadius: 50,
+        color: 'black',
+        fontSize: normalize(10),
+    };
+}
+
+export function getProfileContentLogo1(): TextStyle {
+    return {
+        fontSize: normalize(13),
+        marginTop: 3,
+        color: 'black',
+        fontWeight: 'bold',
+    };
+}
+
+export function getProfileContentLogo2(): TextStyle {
+    return {
+        fontSize: normalize(10),
+        color: 'black',
+    };
+}
+
+export function getProfilecardSubheadingTop(color: string): TextStyle {
+    return {
+        fontSize: normalize(10),
+        fontWeight: fontWeight.fontWeight_700,
+        color: color,
+        paddingBottom: 0,
+        paddingTop: 2,
+    };
+}
+
+export function getProfilecardSubheadingBottom(color: string, position: string): TextStyle {
+    return {
+        fontSize: normalize(10),
+        fontWeight: fontWeight.fontWeight_100,
+        color: color,
+        paddingLeft: position == 'right' ? 5 : 0,
+        paddingRight: position == 'left' ? 5 : 0,
+    };
+}
+
+export function getProfilecardMobileNO(color: string, position: string): TextStyle {
+    return {
+        fontSize: normalize(12),
+        fontWeight: fontWeight.fontWeight_Bold,
+        color: color,
+        paddingLeft: position == 'right' ? 5 : 0,
+        paddingRight: position == 'left' ? 5 : 0,
+    };
+}
+
+export function getProfilecardOnlineStatusBadgeContainer(backgroundcolor: string): ViewStyle {
+    return {
+        backgroundColor: backgroundcolor,
+        height: normalize(20),
+        paddingHorizontal: normalize(5),
+        borderRadius: 1000,
+        padding: 0,
+    };
+}
+
+export function getGroupButtonView(width: number): ViewStyle {
+    return {
+        justifyContent: 'center',
+        margin: 5,
+        width: width * 0.10,
+        alignContent: 'center',
+        alignItems: 'center',
+    };
+}
+
+// Media Functions
+export function getMediaoverlayContainerStyle(height: number): ViewStyle {
+    return {
+        ...ComponentStyles.mediaoverlay_containerstyle,
+        height: height,
+    };
+}
+
+export function getMediaViewContainer(width: number, height: number, itemwidth: number): ViewStyle {
+    return {
+        ...ComponentStyles.View_col_center,
+        width: width * (itemwidth / 100),
+        margin: height * 0.003,
+    };
+}
+
+export function getMediaViewChildContainer(width: number, itemwidth: number): ViewStyle {
+    return {
+        borderWidth: 0.5,
+        borderRadius: 2,
+        width: width * (itemwidth / 100),
+        borderColor: colors.color_componentBordercolor,
+    };
+}
+
+export function getMediaIcon(width: number, itemwidth: number): ImageStyle {
+    return {
+        height: 120,
+        width: width * (itemwidth / 100),
+    };
+}
+
+export function getMediaoverlayChildrenwrapperStyle(
+    width: number,
+    height: number,
+    itemheight: number
+): ViewStyle {
+    return {
+        width: width,
+        height: itemheight,
+        padding: height * 0.01,
+    };
+}
+
+export function getMediaoverlayTopLineContainer(width: number, height: number): ViewStyle {
+    return {
+        ...ComponentStyles.View_col_center,
+        width: width * 0.15,
+        height: height * 0.02,
+    };
+}
+
+export function getMediaoverlayOptionRow(width: number, height: number): ViewStyle {
+    return {
+        ...ComponentStyles.View_row_spacearound,
+        borderRadius: 14,
+        marginTop: height * 0.02,
+        width: width * 0.90,
+    };
+}
+
+export function getMediaoverlayOptionContainer(width: number, height: number): ViewStyle {
+    return {
+        ...ComponentStyles.View_col_center,
+        margin: 5,
+        height: height * 0.1,
+        width: width * 0.20,
+    };
+}
+
+export function getMediaoverlayMsgorLoaderView(height: number): ViewStyle {
+    return {
+        height: height,
+        ...ComponentStyles.View_col_center,
+    };
+}
+
+export function getMediaGalleryChildContainer(width: number, height: number): ViewStyle {
+    return {
+        marginTop: height * 0.01,
+        width: width * 0.90,
+        justifyContent: 'center',
+        alignItems: 'center',
+    };
+}
+
+export function getMediaGalleryDeleteView(width: number, height: number): ViewStyle {
+    return {
+        borderWidth: 0.5,
+        borderRadius: 2,
+        height: height / 5,
+        width: width * 0.90,
+        borderColor: colors.color_componentBordercolor,
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+}
+
+export function getMediaIconStyle(width: number, height: number): ImageStyle {
+    return {
+        height: height / 5,
+        width: width * 0.90,
+    };
+}
+
+export function getMediaGalleryDeleteIcon(width: number): ImageStyle {
+    return {
+        height: '40%',
+        width: width * 0.90,
+        resizeMode: 'contain',
+    };
+}