@os1-platform/dispatch-mobile 3.1.8 → 3.2.0

package/lib/typescript/{utils → src/utils}/Constants.d.ts

@@ -1,2 +1,6 @@
 export declare const PROGRESS_GROUP: string;
 export declare const EXPIRY_TIME = 21600;
+export interface ExecQuery {
+    query: string;
+    args: any[];
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@os1-platform/dispatch-mobile",
-  "version": "3.1.8",
+  "version": "3.2.0",
   "description": "Dispatch SDK React Native Package",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "lib/module/index",
-  "source": "lib/module/index",
+  "source": "./src/index.tsx",
   "files": [
     "src",
     "lib",
@@ -40,7 +40,8 @@
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "local": "yarn && cd example && yarn start",
-    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build"
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build",
+    "postinstall": "patch-package"
   },
   "keywords": [
     "react-native",
@@ -52,90 +53,87 @@
   "homepage": "https://github.com/FoxtrotPlatform/platform-coreos-dispatch-sdk/#readme",
   "devDependencies": {
     "@apollo/client": "^3.5.6",
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-typescript": "^7.15.0",
-    "@babel/runtime": "^7.12.5",
+    "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@expo-google-fonts/ibm-plex-sans": "*",
-    "@react-native-async-storage/async-storage": "1.18.2",
-    "@react-native-community/datetimepicker": "7.2.0",
-    "@react-native-community/netinfo": "9.3.10",
-    "@react-native-community/slider": "4.4.2",
+    "@expo-google-fonts/ibm-plex-sans": "0.4.1",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/netinfo": "11.4.1",
     "@react-native-cookies/cookies": "^6.0.8",
     "@react-native-firebase/analytics": "20.1.0",
     "@react-native-firebase/app": "20.1.0",
     "@react-native-firebase/crashlytics": "20.1.0",
     "@react-native-firebase/messaging": "20.1.0",
     "@react-native-firebase/remote-config": "20.1.0",
-    "@react-native/eslint-config": "^0.72.2",
-    "@react-native/metro-config": "^0.72.11",
+    "@react-native/eslint-config": "0.77.3",
+    "@react-native/metro-config": "0.77.3",
+    "@react-native/typescript-config": "0.77.3",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",
     "@release-it/conventional-changelog": "^2.0.0",
-    "@sentry/react-native": "5.10.0",
+    "@sentry/react-native": "~6.10.0",
     "@tsconfig/react-native": "^3.0.0",
     "@types/enzyme": "^3.10.10",
     "@types/i18n-js": "^3.8.8",
+    "@types/jest": "^29.5.13",
     "@types/json-logic-js": "^1.2.1",
     "@types/jsonpath-plus": "^5.0.2",
     "@types/lodash": "^4.14.182",
-    "@types/react-native": "^0.69.3",
-    "@types/react-native-vector-icons": "^6.4.10",
+    "@types/react": "~18.3.12",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
-    "axios": "^0.24.0",
-    "babel-jest": "^26.6.3",
+    "axios": "1.5.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "commitlint": "^11.0.0",
-    "enzyme": "^3.11.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "expo": "~49.0.23",
-    "expo-barcode-scanner": "~12.5.3",
-    "expo-blur": "~12.4.1",
-    "expo-camera": "~13.4.4",
-    "expo-file-system": "~15.4.5",
-    "expo-font": "~11.4.0",
-    "expo-image-manipulator": "~11.3.0",
-    "expo-image-picker": "~14.3.2",
-    "expo-location": "~16.1.0",
-    "expo-sqlite": "~11.3.3",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "expo": "~52.0.46",
+    "expo-blur": "~14.0.3",
+    "expo-camera": "~16.0.18",
+    "expo-file-system": "~18.0.12",
+    "expo-font": "~13.0.4",
+    "expo-image-picker": "~16.0.6",
+    "expo-location": "~18.0.10",
+    "expo-sqlite": "~15.1.4",
     "graphql": "^16.2.0",
     "husky": "^4.2.5",
-    "jest": "^29.2.1",
-    "jest-expo": "~49.0.0",
-    "metro-react-native-babel-preset": "0.76.8",
+    "jest": "^29.6.3",
+    "jest-expo": "~52.0.6",
     "msw": "^0.34.0",
+    "patch-package": "^8.0.0",
     "pod-install": "^0.1.0",
-    "prettier": "^2.0.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.72.10",
+    "postinstall-postinstall": "^2.1.0",
+    "prettier": "2.8.8",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.77.3",
     "react-native-builder-bob": "^0.18.0",
     "react-native-compressor": "^1.8.24",
     "react-native-dropdown-picker": "^5.4.0",
     "react-native-fast-image": "^8.6.3",
-    "react-native-get-random-values": "~1.9.0",
+    "react-native-get-random-values": "~1.11.0",
     "react-native-image-picker": "7.0.2",
-    "react-native-paper": "^4.9.2",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-vector-icons": "^9.0.0",
-    "react-test-renderer": "17.0.2",
+    "react-native-paper": "5.14.1",
+    "react-native-safe-area-context": "5.1.0",
+    "react-native-screens": "4.10.0",
+    "react-test-renderer": "18.3.1",
     "release-it": "^14.2.2",
-    "typescript": "^5.1.3"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@apollo/client": "^3.5.6",
-    "@expo-google-fonts/ibm-plex-sans": "*",
-    "@react-native-async-storage/async-storage": ">=1.18.2",
-    "@react-native-community/datetimepicker": ">=7.2.0",
-    "@react-native-community/netinfo": "^6.0.2",
-    "@react-native-community/slider": "^4.1.7",
+    "@expo-google-fonts/ibm-plex-sans": "^0.4.1",
+    "@react-native-async-storage/async-storage": "2.1.0",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/netinfo": "11.4.1",
     "@react-native-firebase/analytics": "20.1.0",
     "@react-native-firebase/app": "20.1.0",
     "@react-native-firebase/crashlytics": "20.1.0",
@@ -143,33 +141,30 @@
     "@react-native-firebase/remote-config": "20.1.0",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",
-    "@sentry/react-native": "^5.13.0",
-    "axios": "^0.24.0",
-    "expo": "~49.0.23",
-    "expo-barcode-scanner": "~12.5.3",
-    "expo-blur": "~12.4.1",
-    "expo-camera": "~13.4.4",
-    "expo-file-system": "~15.4.5",
-    "expo-font": "~11.4.0",
-    "expo-image-manipulator": "~11.3.0",
-    "expo-image-picker": "~14.3.2",
-    "expo-location": "~16.1.0",
-    "expo-sqlite": "~11.3.3",
+    "@sentry/react-native": "~6.10.0",
+    "axios": "1.5.1",
+    "expo": "~52.0.46",
+    "expo-blur": "~14.0.3",
+    "expo-camera": "~16.0.18",
+    "expo-file-system": "~18.0.12",
+    "expo-font": "~13.0.4",
+    "expo-image-picker": "~16.0.6",
+    "expo-location": "~18.0.10",
+    "expo-sqlite": "~15.1.4",
     "graphql": "^16.2.0",
-    "react": "^18.2.0",
-    "react-native": "0.72.10",
+    "react": "18.3.1",
+    "react-native": "0.77.3",
     "react-native-compressor": "^1.8.24",
     "react-native-dropdown-picker": "^5.4.0",
-    "react-native-get-random-values": "^1.9.0",
-    "react-native-paper": "^4.9.2",
-    "react-native-safe-area-context": "4.6.3",
-    "react-native-screens": "~3.22.0",
-    "react-native-vector-icons": "^9.0.0"
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-paper": "5.14.1",
+    "react-native-safe-area-context": "5.1.0",
+    "react-native-screens": "4.10.0"
   },
   "dependencies": {
     "@coralogix/react-native-sdk": "^1.0.15",
-    "@os1-platform/platform-coreos-execution-engine-sdk": "1.1.2",
-    "@rjsf/core": "^2.0.0",
+    "@os1-platform/platform-coreos-execution-engine-sdk": "1.1.5",
+    "@rjsf/core": "^2.2.0",
     "apollo-link-timeout": "^4.0.0",
     "decompress": "^4.2.1",
     "i18n-js": "^4.3.2",
@@ -179,38 +174,15 @@
     "latlng-to-dms": "^1.0.2",
     "lodash": "^4.17.21",
     "react-native-fs": "^2.20.0",
-    "react-native-image-marker": "1.1.15",
-    "react-native-otp-textinput": "0.0.8",
-    "react-native-svg": "13.9.0",
+    "react-native-image-marker": "1.2.6",
+    "react-native-otp-textinput": "1.1.7",
+    "react-native-svg": "15.11.1",
     "recyclerlistview": "^4.2.0",
     "rjsf-native": "^1.0.14",
     "toggle-switch-react-native": "^3.3.0",
-    "uuid-by-string": "^4.0.0"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "preset": "jest-expo",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/example/__tests__",
-      "<rootDir>/lib/",
-      "<rootDir>/node_modules/",
-      "<rootDir>/node_modules/*"
-    ],
-    "testMatch": [
-      "<rootDir>/__tests__/*",
-      "<rootDir>/__tests__/**/*"
-    ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!react-native|@react-native|@react-native-firebase/app|@react-native-firebase/messaging|@react-native-async-storage/async-storage|expo-sqlite|expo|expo-modules-core|expo-asset|expo-constants|expo-file-system|expo-image-loader|expo-modules-autolinking|expo-image-picker|expo-barcode-scanner|expo-intent-launcher|expo-location|expo-modules-autolinking|expo-application|expo-asset|expo-sqlite|expo-constants|@react-native-community/netinfo)"
-    ]
+    "uuid-by-string": "^4.0.0",
+    "@react-native-vector-icons/material-design-icons": "^12.3.0",
+    "@react-native-vector-icons/material-icons": "^12.3.0"
   },
   "husky": {},
   "commitlint": {
@@ -280,4 +252,4 @@
       ]
     ]
   }
-}
+}

package/src/components/executiontasks/captureInput/CaptureText.tsx

@@ -1,6 +1,6 @@
 import type { CaptureTextInput } from './CaptureInputSchema';
-import { View, Text } from 'react-native';
-import { Button, TextInput, Modal, Portal, Provider } from 'react-native-paper';
+import { View } from 'react-native';
+import { Button, TextInput, Provider } from 'react-native-paper';
 import {
   CommonStyles,
   deliverETStyles,
@@ -13,7 +13,7 @@ import {
   ExecutionTaskID,
 } from '../../../models/execTasks/ETConfig';
 import { checkForValidation } from './utils';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
@@ -24,6 +24,7 @@ import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyti
 
 const CaptureText = (props: CaptureTextInput) => {
   const [showBackModal, setShowBackModal] = useState(false);
+  
 
   useLayoutEffect(() => {
     props.navigation.setOptions({
@@ -70,9 +71,8 @@ const CaptureText = (props: CaptureTextInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/collectPayment/components/CompletePayment.tsx

@@ -51,9 +51,8 @@ const CompletePayment = (props: CollectPaymentInput & CollectPaymentOutput) => {
       const onBackPress = () => {
         return false;
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler =  BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/collectPayment/components/InitPayment.tsx

@@ -22,7 +22,7 @@ import {
 } from '../../../../styles/executionTasks/CommonStyles';
 import { showToast } from '../../../widgets/Toaster';
 import { Button, Provider, RadioButton } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import {
   GO_BACK_EVENT_CODE,
   PAYMENT_NOTIFICATION,
@@ -367,15 +367,11 @@ const InitPayment = (props: CollectPaymentInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', () => {
+      const backHandler =  BackHandler.addEventListener('hardwareBackPress', () => {
         onBackPress();
         return true;
       });
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', () => {
-          onBackPress();
-          return true;
-        });
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/collectPayment/components/PaymentContactDetails.tsx

@@ -20,7 +20,7 @@ import {
   Fonts,
 } from '../../../../styles/executionTasks/CommonStyles';
 import { Button, Provider, RadioButton, TextInput } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import {
   EMAIL_REGEX,
   PAYMENT_NOTIFICATION,
@@ -317,9 +317,8 @@ const PaymentContactDetails = (
           }))();
         return true;
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler =  BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/collectPayment/components/ProcessPayment.tsx

@@ -55,11 +55,11 @@ import {
   Portal,
   Provider,
 } from 'react-native-paper';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { PAYMENT_NOTIFICATION } from '../../../../constants/constants';
 import { useFocusEffect } from '@react-navigation/native';
 import ProgressDialog from '../../../../components/widgets/ProgressDialog';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialIcon from '@react-native-vector-icons/material-design-icons';
 import ModalWidget from '../../../../components/widgets/ModalWidget';
 import FailedIcon from '../../../../icons/FailedIcon';
 import EventListener from '../../../../events';
@@ -278,9 +278,8 @@ const ProcessPayment = (props: CollectPaymentInput & ProcessPaymentInput) => {
         isRetryEnabled ? onNext() : setGoBackModal(true);
         return true;
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [isRetryEnabled, backDisable])
   );
 

package/src/components/executiontasks/deliver/SLDeliverET.tsx

@@ -30,7 +30,7 @@ import {
   DEFAULT_DELIVER_TITLE,
   GO_BACK_EVENT_CODE,
 } from '../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../components/utils';
 import { useFocusEffect } from '@react-navigation/native';
@@ -109,9 +109,8 @@ const DeliverET = (props: DeliverETInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/doodle/SignatureET.tsx

@@ -28,7 +28,7 @@ import {
   DEFAULT_SIGN_ET_MESSAGE,
   GO_BACK_EVENT_CODE,
 } from '../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
@@ -40,6 +40,7 @@ import LocationManager from '../../../manager/location/LocationManager';
 import callbackHandler from '../../../manager/sdk/callbacksHandler';
 
 const SignatureET = (props: SignatureInput) => {
+  
   const signatureViewRef = useRef<any>();
   const [dragged, setDragged] = useState(0);
   const dragRef = useRef<number>(0);
@@ -61,9 +62,8 @@ const SignatureET = (props: SignatureInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/dropCash/SLDropCash.tsx

@@ -18,7 +18,7 @@ import { isEmptyOrBlank } from '../../../utils/utils';
 import type { DropCashInput } from './DropCashSchema';
 import { getPaymentValue } from '../payments/PaymentUtils';
 import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { hasGoBackConnector } from '../../../components/utils';
 import { useFocusEffect } from '@react-navigation/native';
@@ -69,9 +69,8 @@ const SLDropCash = (props: DropCashInput) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 

package/src/components/executiontasks/forms/FormGenerator.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect } from 'react';
 import {
   BackHandler,
   KeyboardAvoidingView,
@@ -13,7 +13,7 @@ import DateTimeWidget from './widgets/DateTimeWidget';
 import TimeRangeSelector from './widgets/TimeRangeSelector';
 import QRBarcodeScannerWidget from './widgets/QRBarcodeScannerWidget';
 import DropdownWidget from './widgets/DropdownWidget';
-import { Button, Modal, Portal, Provider } from 'react-native-paper';
+import { Button, Provider } from 'react-native-paper';
 import type { FormInputSchema } from './FormSchema';
 import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
 import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
@@ -26,13 +26,11 @@ import {
   Fonts,
 } from '../../../styles/executionTasks/CommonStyles';
 import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from '@react-native-vector-icons/material-icons';
 import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
 import { hasGoBackConnector } from '../../../components/utils';
 import GoBackModal from '../../../components/widgets/GoBackModal';
 import { useFocusEffect } from '@react-navigation/native';
-import { ScreenNameSdkConstants, SentryEventNameSdkConstants, SeverityLevelValue } from '../../../analytics/sentry/SentrySdkConstants';
-import { fireEventWithScreenName } from '../../../analytics/sentry/SentryAnalyticsUtils';
 
 const customWidgets = {
   datePicker: DateTimeWidget,
@@ -61,9 +59,8 @@ const FormGenerator = (props: FormInputSchema) => {
           return true;
         }
       };
-      BackHandler.addEventListener('hardwareBackPress', onBackPress);
-      return () =>
-        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () => backHandler.remove();
     }, [])
   );
 
@@ -80,9 +77,6 @@ const FormGenerator = (props: FormInputSchema) => {
               )
                 setShowBackModal(true);
               else props.navigation.goBack();
-              const cta = 'Back Arrow';
-              fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
-
             }}
             name="arrow-back"
             color={'black'}
@@ -125,13 +119,10 @@ const FormGenerator = (props: FormInputSchema) => {
     <Provider>
       {renderModal()}
       <KeyboardAvoidingView style={CommonStyles.mainContainer}>
-        <ScrollView style={{ flex: 1, flexGrow: 1 }}>
+        <View style={{ flex: 1 }}>
+        <ScrollView style={{ flex: 1}}>
           <View
-            style={{
-              flex: 1,
-              padding: 20,
-            }}
-          >
+            style={{ flex: 1, padding: 20 }}>
             <FormContext.Provider
               value={{
                 ...defaultProps,
@@ -222,42 +213,35 @@ const FormGenerator = (props: FormInputSchema) => {
             </FormContext.Provider>
           </View>
         </ScrollView>
+        </View>
         <View style={styles.bottomView}>
-            <Button
-              style={[styles.mainBtnStyles, CommonStyles.nextButton]}
-              labelStyle={CommonStyles.nextButtonLabel}
-              mode={'contained'}
-              onPress={() => {
-                if (form.current) {
-                  setOnCancel(false);
-                  // @ts-ignore
-                  form.current.submit();
-                }
-                const cta = 'Proceed';
-                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
-  
-              }}
-            >
-              Proceed
-            </Button>
-            {(props.isSelfLoop == false) && <Button
-              style={[styles.mainBtnStyles, CommonStyles.cancelButton]}
-              labelStyle={CommonStyles.cancelButtonLabel}
-              mode={'outlined'}
-              onPress={() => {
-                if (form.current) {
-                  setOnCancel(true);
-                  // @ts-ignore
-                  form.current.submit();
-                }
-                const cta = 'Cancel';
-                fireEventWithScreenName({ severityLevel: SeverityLevelValue.LOG, eventName: SentryEventNameSdkConstants.BUTTON_CLICKED, screenName: ScreenNameSdkConstants.FORM_ET_SCREEN, cta: cta });    
-  
-              }}
-            >
-              Cancel
-            </Button>
-            }
+          <Button
+            style={[styles.mainBtnStyles, CommonStyles.nextButton]}
+            labelStyle={CommonStyles.nextButtonLabel}
+            mode={'contained'}
+            onPress={() => {
+              if (form.current) {
+                setOnCancel(false);
+                // @ts-ignore
+                form.current.submit();
+              }
+            }}>
+            Proceed
+          </Button>
+          {(props.isSelfLoop == false) && <Button
+            style={[styles.mainBtnStyles, CommonStyles.cancelButton]}
+            labelStyle={CommonStyles.cancelButtonLabel}
+            mode={'outlined'}
+            onPress={() => {
+              if (form.current) {
+                setOnCancel(true);
+                // @ts-ignore
+                form.current.submit();
+              }
+            }}>
+            Cancel
+          </Button>
+          }
         </View>
       </KeyboardAvoidingView>
     </Provider>
@@ -283,18 +267,17 @@ const styles = StyleSheet.create({
   },
   bottomView: {
     flexDirection: 'row-reverse',
-    justifyContent: 'space-evenly',
+    justifyContent: 'space-between',
     padding: 16,
     backgroundColor: 'white',
     gap: 16,
   },
   mainBtnStyles: {
+    flexGrow: 1,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    flex: 1,
-    width: '100%',
     backgroundColor: 'white',
   },
 });