react-native-unit-components 2.2.0 → 3.0.1

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -8,14 +8,15 @@ import type {
   UNComponentsError, 
   UNPlaidAccountFilter, 
   UNACHPayment, 
-  UNCounterparty
+  UNCounterparty,
+  UNAccount
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform } from 'react-native';
 import { getACHCreditParams, getACHCreditScript, injectRequestCounterpartyDeletedScript, injectUnitPlaidResponse } from './UNACHCreditComponent.utils';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
-import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { ACHOnLoadResponse, RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
@@ -23,7 +24,7 @@ import {
   RequestRenderingEvent,
   UnitComponentsMessage,
 } from '../../messages/webMessages/unitComponentsMessages';
-import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import { LinkExit, LinkSuccess, open as openPlaidLink, create as createPlaidLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
@@ -33,9 +34,8 @@ import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { ensureArray } from '../../utils/onLoadMessages.utils';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { useDispatch } from 'react-redux';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
 import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
 
 export interface UNACHCreditComponentProps {
@@ -59,10 +59,8 @@ export interface UNACHCreditComponentProps {
 }
 
 const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
-  const dispatch = useDispatch();
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
-  const [linkToken, setLinkToken] = useState<string>();
   const [appPackageName, setAppPackageName] = useState<string>();
   const webRef = useRef<WebView>(null);
 
@@ -80,7 +78,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     injectRequestCounterpartyDeletedScript(webRef.current, data);
   };
 
-  useListenerToEvent({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: handleCounterpartyDeleted });
+  useEventListener({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: handleCounterpartyDeleted });
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -105,6 +103,20 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
       return;
     }
 
+    if (RESPONSE_KEYS.counterpartiesResult in response) {
+      const counterparties = response[RESPONSE_KEYS.counterpartiesResult].data;
+      const accountResponse = response as Partial<ACHOnLoadResponse>;
+      const accountData = accountResponse[RESPONSE_KEYS.account]?.data;
+      const achOnload: UNComponentsOnLoadResponseData<UNACHOnLoadData> = {
+        data: {
+          [RESPONSE_KEYS.account]: (accountData ? ensureArray(accountData) : []) as [UNAccount],
+          [RESPONSE_KEYS.counterpartyAccount]: counterparties,
+        },
+      };
+      props.onLoad(achOnload);
+      return;
+    }
+
     console.error('On Load Error: unexpected response type');
     return;
   };
@@ -140,7 +152,7 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
 
         break;
       }
@@ -155,23 +167,21 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
       case PlaidMessage.UNIT_PLAID_TOKEN_CREATED: {
         const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
         const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
-        setLinkToken(linkTokenData.attributes.linkToken);
+        const link: string = linkTokenData.attributes.linkToken;
+        createPlaidLink({ token: link });  
         break;
       }
 
       case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK: {
         const externalSdkType = (message.details as RequestExternalSdkEvent).type;
         if (externalSdkType !== 'plaid') return;
-        linkToken && openLink({
-          tokenConfig: { noLoadingState: false, token: linkToken },
+        openPlaidLink({
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => {
+          onExit: (exit: LinkExit) => {
             console.log(exit);
           },
-        }).catch(e => {
-          console.error(e);
         });
         break;
       }

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -8,7 +8,8 @@ import type {
   UNACHOnLoadData, 
   UNACHPayment, 
   UNPlaidAccountFilter, 
-  UNCounterparty
+  UNCounterparty,
+  UNAccount
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform } from 'react-native';
@@ -20,11 +21,11 @@ import {
   UnitComponentsMessage,
 } from '../../messages/webMessages/unitComponentsMessages';
 import { getACHDebitParams, getACHDebitScript, injectRequestCounterpartyDeletedScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
-import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import { LinkExit, LinkSuccess, open as openPlaidLink, create as createPlaidLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
-import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { ACHOnLoadResponse, RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import AppInfo from '../../utils/AppInfo';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
@@ -33,9 +34,8 @@ import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import { ensureArray } from '../../utils/onLoadMessages.utils';
 import { BottomSheetRenderingType, BottomSheetSlotData, SlotRendering } from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { useDispatch } from 'react-redux';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
 import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
 
 export interface UNACHDebitComponentProps {
@@ -57,10 +57,8 @@ export interface UNACHDebitComponentProps {
 }
 
 const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
-  const dispatch = useDispatch();
   const [height, setHeight] = useState<number>(0);
   const [appPackageName, setAppPackageName] = useState<string>('');
-  const [linkToken, setLinkToken] = useState<string>('');
   const webRef = useRef<WebView>(null);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
 
@@ -78,7 +76,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     injectRequestCounterpartyDeletedScript(webRef.current, data);
   };
   
-  useListenerToEvent({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: handleCounterpartyDeleted });
+  useEventListener({ busEventKey: PayeeManagementMessage.UNIT_COUNTERPARTY_DELETED, action: handleCounterpartyDeleted });
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -103,6 +101,20 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       return;
     }
 
+    if (RESPONSE_KEYS.counterpartiesResult in response) {
+      const counterparties = response[RESPONSE_KEYS.counterpartiesResult].data;
+      const accountResponse = response as Partial<ACHOnLoadResponse>;
+      const accountData = accountResponse[RESPONSE_KEYS.account]?.data;
+      const achOnload: UNComponentsOnLoadResponseData<UNACHOnLoadData> = {
+        data: {
+          [RESPONSE_KEYS.account]: (accountData ? ensureArray(accountData) : []) as [UNAccount],
+          [RESPONSE_KEYS.counterpartyAccount]: counterparties,
+        },
+      };
+      props.onLoad(achOnload);
+      return;
+    }
+
     console.error('On Load Error: unexpected response type');
     return;
   };
@@ -138,7 +150,7 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
       
         break;
       }
@@ -153,23 +165,21 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
       case PlaidMessage.UNIT_PLAID_TOKEN_CREATED: {
         const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
         const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
-        setLinkToken(linkTokenData.attributes.linkToken);
+        const link: string = linkTokenData.attributes.linkToken;
+        createPlaidLink({ token: link });  
         break;
       }
 
       case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK: {
         const externalSdkType = (message.details as RequestExternalSdkEvent).type;
         if (externalSdkType !== 'plaid') return;
-        linkToken && openLink({
-          tokenConfig: { noLoadingState: false, token: linkToken },
+        openPlaidLink({
           onSuccess: (success: LinkSuccess) => {
             injectUnitPlaidResponse(webRef.current, success);
           },
-          onExit: exit => {
+          onExit: (exit: LinkExit) => {
             console.log(exit);
-          },
-        }).catch(e => {
-          console.error(e);
+          }
         });
         break;
       }

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -36,9 +36,8 @@ import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
-import { useDispatch } from 'react-redux';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNAccountComponentProps {
@@ -79,7 +78,6 @@ export enum UNAccountAction {
 
 const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProps>(function UNAccountComponent(props, accountRef) {
 
-  const dispatch = useDispatch();
   const [height, setHeight] = useState(0);
   const webRef = useRef<WebView>(null);
   // currentAccountId is used to store the current account id for the "imperative" refresh event.
@@ -126,8 +124,8 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
     console.error('On Load Error: unexpected response type.');
     return;
   };
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({ busEventKey: AccountMessage.UNIT_ACCOUNT_CHANGED, action: handleAccountChanged });
 
   useImperativeHandle(accountRef, () => ({
     openActionsMenu() {
@@ -162,7 +160,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
           type: BottomSheetRenderingType.Slot,
           data: slotData,
         } as SlotRendering;
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
 
         break;
       }

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -32,9 +32,8 @@ import type { BottomSheetSlotData, SlotRendering } from '../../types/internal/bo
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { useDispatch } from 'react-redux';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { eventBus } from '../../utils/eventBus';
+import { useEventListener } from '../../hooks/useEventListener';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
@@ -52,6 +51,7 @@ export interface UNActivityComponentProps {
   hideBackToTop?: boolean;
   paginationType?: UNActivityComponentPaginationType;
   transactionsPerPage?: number;
+  showDeclinedActivity?: boolean;
   // event
   onLoad?: (response: UNComponentsOnLoadResponse<UNActivityOnLoadData>) => void;
 }
@@ -61,7 +61,6 @@ export interface UNActivityRef {
 }
 
 const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentProps>(function UNActivityComponent(props, activityRef) {
-  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const [defaultHeight, setDefaultHeight] = useState<number>();
 
@@ -84,8 +83,8 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     injectActivityFiltersChanged(webRef.current, query);
   };
 
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
   });
@@ -100,12 +99,12 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
       return;
     }
 
-    if (RESPONSE_KEYS.authorizations in response && RESPONSE_KEYS.transactions in response) {
+    if (RESPONSE_KEYS.authorizations in response) {
       // ActivityOnLoadResponse;
       const activityOnLoad: UNComponentsOnLoadResponseData<UNActivityOnLoadData> = {
         data: {
           [RESPONSE_KEYS.authorizations]: response[RESPONSE_KEYS.authorizations].data,
-          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions].data,
+          [RESPONSE_KEYS.transactions]: response[RESPONSE_KEYS.transactions]?.data,
         },
       };
       props.onLoad(activityOnLoad);
@@ -130,7 +129,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
         break;
       }
       case UnitComponentsMessage.UNIT_ON_LOAD:

package/src/components/UNActivityComponent/UNActivityComponent.utils.ts

@@ -14,6 +14,7 @@ export const getActivityParams = (props: UNActivityComponentProps) => {
     hide-filter-button="${props.hideFilterButton || false}"
     hide-back-to-top="${props.hideBackToTop || false}"
     hide-title="${props.hideTitle || false}"
+    show-declined-activity="${props.showDeclinedActivity || false}"
     ${queryFilterParam}
     ${paginationTypeParam}
     ${transactionsPerPageParam}

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.constants.ts

@@ -1,23 +1,35 @@
-import { Dimensions, Platform, StatusBar } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 export const BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE = 0.9;
 
-export const androidStatusBarHeight = StatusBar.currentHeight || 0;
+const windowHeight = Dimensions.get('window').height;
+const screenHeight = Dimensions.get('screen').height;
+const statusBarHeight = initialWindowMetrics?.insets.top ?? 0;
+const isAndroid = Platform.OS === 'android';
+const isAndroid15AndAbove = isAndroid && Platform.Version >= 35;
 
-// For iOS - we are currently using hard coded height
-export const iosStatusBarHeight = Dimensions.get('window').height * 0.05;
+// Android 15+ edge-to-edge detection
+const isEdgeToEdgeActive = isAndroid15AndAbove && Math.abs(screenHeight - windowHeight) < 10;
 
-export const statusBarHeight = Platform.OS === 'android' ? androidStatusBarHeight : iosStatusBarHeight;
-// Android 10 and above - need to add status bar height to the window height to get the full screen height because Dimensions.get('window').height returns the height without the status bar
-// reference: https://github.com/facebook/react-native/issues/23693#issuecomment-1403560728
-export const isAndroid10AndAbove = Platform.OS === 'android' && Platform.Version >= 29;
+// Calculate overFullScreenHeight based on platform
+const calculateOverFullScreenHeight = (): number => {
+  if (!isAndroid) {
+    // iOS: simple percentage of window height
+    return windowHeight * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+  }
+  
+  // Android: adjust for edge-to-edge status
+  const topMargin = screenHeight * (1 - BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE);
+  if (isEdgeToEdgeActive) {
+    return screenHeight - topMargin;
+  } else {
+    // Edge-to-edge opted out: status bar is outside window, adjust margin
+    return windowHeight - (topMargin - statusBarHeight);
+  }
+};
 
-export const fullScreenHeight =
-  isAndroid10AndAbove ?
-    Dimensions.get('window').height + statusBarHeight
-    : Dimensions.get('window').height;
-
-export const overFullScreenHeight = Dimensions.get('window').height * BOTTOM_SHEET_OVER_FULLSCREEN_PERCENTAGE_SIZE;
+export const overFullScreenHeight = calculateOverFullScreenHeight();
 
 export const TOP_PADDING = 48;
 export const BOTTOM_PADDING = 24;

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -17,11 +17,10 @@ import {
   BottomSheetRenderingMessage,
 } from '../../messages/nativeMessages/bottomSheetMessage';
 import { withReduxStore } from '../../helpers/store/helpers';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { useEventListener } from '../../hooks/useEventListener';
 import { useDispatch, useSelector } from 'react-redux';
-import { fullScreenHeight, overFullScreenHeight } from './UNBottomSheetComponent.constants';
+import { overFullScreenHeight } from './UNBottomSheetComponent.constants';
 import { RootState } from '../../store';
-
 import {
   resetBottomSheetSlice,
   setIsBottomSheetActive,
@@ -35,9 +34,11 @@ import UNBottomSheetSlotComponent from './components/UNBottomSheetSlotComponent/
 import UNBottomSheetNativeComponent from './components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 import { getNativeComponentDataFromEvent } from './UNBottomSheetComponent.utils';
+import { useSafeAreaDimensions } from '../../hooks/useSafeAreaDimensions';
 
 const UNBottomSheetComponent = () => {
   const dispatch = useDispatch();
+  const { fullScreenHeight } = useSafeAreaDimensions();
 
   const isBottomSheetActive = useSelector((state: RootState) => state.bottomSheet.isBottomSheetActive);
   const isComponentLoading = useSelector((state: RootState) => state.bottomSheet.isComponentLoading);
@@ -66,7 +67,6 @@ const UNBottomSheetComponent = () => {
         case BottomSheetNativePlaceType.overFullScreen:
           setHeight(overFullScreenHeight);
           break;
-        // For modal native place type, set the height to the fullScreenHeight.
         case BottomSheetNativePlaceType.modal:
           setHeight(fullScreenHeight);
           break;
@@ -134,8 +134,8 @@ const UNBottomSheetComponent = () => {
     dispatch(setIsBottomSheetActive(false));
   };
 
-  useListenerToEvent({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
+  useEventListener({ busEventKey: BottomSheetNativeMessage.REQUEST_RENDERING, action: requestRendering });
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW, action: handleCloseFlow });
 
   const handleRequestRendering = (rendering: BottomSheetRenderingMessage) => {
     if (rendering === currentBottomSheetRenderingMessage) {

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.ts

@@ -8,6 +8,7 @@ import {
   BottomSheetNativeAddToWalletComponentType,
   BottomSheetNativeBookPaymentComponentType,
   BottomSheetNativeCheckDepositComponentType,
+  BottomSheetNativeCheckPaymentComponentType,
   BottomSheetNativeComponentType,
   BottomSheetNativeCreateCardComponentType,
   BottomSheetNativePlaceType,
@@ -171,6 +172,25 @@ const getCheckDepositComponentDataFromEvent = (event: BottomSheetSlotData): Bott
   };
 };
 
+const getCheckPaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeCheckPaymentComponentType | null => {
+  const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
+  const theme = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'theme');
+  const language = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'language');
+  const initialStageBackButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'initial-stage-back-button');
+  const finalStageDoneButton = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'final-stage-done-button');
+
+  return {
+    type: BottomSheetNativeComponentType.CheckPaymentComponent,
+    props: {
+      accountId: accountId,
+      theme: theme,
+      language: language,
+      initialStageBackButton: initialStageBackButton ? initialStageBackButton === 'true' : undefined,
+      finalStageDoneButton: finalStageDoneButton ? finalStageDoneButton === 'true' : undefined,
+    },
+  };
+};
+
 const getBookPaymentComponentDataFromEvent = (event: BottomSheetSlotData): BottomSheetNativeBookPaymentComponentType | null => {
   const accountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'account-id');
   const counterPartyAccountId = extractValueFromRequestRenderingEvent(event.requestRenderingEvent, 'counterparty-account-id');
@@ -275,6 +295,10 @@ export const getNativeComponentDataFromEvent = (event: BottomSheetSlotData) => {
       componentData = getCheckDepositComponentDataFromEvent(event);
       break;
 
+    case WebComponentType.checkPayment:
+      componentData = getCheckPaymentComponentDataFromEvent(event);
+      break;
+
     case WebComponentType.bookPayment:
       componentData = getBookPaymentComponentDataFromEvent(event);
       break;

package/src/components/UNBottomSheetComponent/components/UNBottomSheetNativeComponent/UNBottomSheetNativeComponent.tsx

@@ -7,15 +7,17 @@ import {
 import { useDispatch } from 'react-redux';
 import { setComponentHeight, setScrollState, setShouldEnableBottomSheetScroll } from '../../../../slices/BottomSheetSlice';
 import { UNAddToWalletComponent } from '../../../../nativeComponents/UNAddToWallet/UNAddToWalletComponent';
-import { fullScreenHeight, overFullScreenHeight, statusBarHeight } from '../../UNBottomSheetComponent.constants';
+import { overFullScreenHeight } from '../../UNBottomSheetComponent.constants';
+import { useSafeAreaDimensions } from '../../../../hooks/useSafeAreaDimensions';
 import UNACHCreditComponent from '../../../UNACHCreditComponent/UNACHCreditComponent';
 import UNCheckDepositComponent from '../../../UNCheckDepositComponent/UNCheckDepositComponent';
+import UNCheckPaymentComponent from '../../../UNCheckPaymentComponent/UNCheckPaymentComponent';
 import UNACHDebitComponent from '../../../UNACHDebitComponent/UNACHDebitComponent';
 import UNBookPaymentComponent from '../../../UNBookPaymentComponent/UNBookPaymentComponent';
 import UNWirePaymentComponent from '../../../UNWirePaymentComponent/UNWirePaymentComponent';
 import UNCreateCardComponent from '../../../UNCreateCardComponent/UNCreateCardComponent';
 import { PageMessage } from '../../../../messages/webMessages/pageMessage';
-import { useListenerToEvent } from '../../../../hooks/useListenerToEvent';
+import { useEventListener } from '../../../../hooks/useEventListener';
 import UNKeyboardAvoidingView from '../../../../helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView';
 
 export interface UNBottomSheetNativeComponentProps {
@@ -24,6 +26,7 @@ export interface UNBottomSheetNativeComponentProps {
 
 const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps) => {
   const dispatch = useDispatch();
+  const { contentHeight, effectiveBottomInset } = useSafeAreaDimensions();
   const [height, setHeight] = useState<number>(0);
   const [paddingTop, setPaddingTop] = useState<number>(0);
   const [paddingBottom, setPaddingBottom] = useState<number>(0);
@@ -35,7 +38,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
     dispatch(setComponentHeight(height));
   };
 
-  useListenerToEvent({ busEventKey: PageMessage.PAGE_HEIGHT, action: updateComponetHeight });
+  useEventListener({ busEventKey: PageMessage.PAGE_HEIGHT, action: updateComponetHeight });
 
   useEffect(() => {
     const setPaddingForNativeComponent = () => {
@@ -44,7 +47,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
         setPadding(20);
         setPaddingTop(30);
       }
-      setPaddingBottom(20);
+      setPaddingBottom(20 + effectiveBottomInset);
     };
     const setScrollStateForNativeComponent = () => {
       const scrollState = props.nativeComponentData.scrollState ?? ScrollState.unScrollable;
@@ -54,7 +57,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
 
     setScrollStateForNativeComponent();
     setPaddingForNativeComponent();
-  }, [dispatch, props.nativeComponentData]);
+  }, [dispatch, props.nativeComponentData, effectiveBottomInset]);
 
   useEffect(() => {
     const setBottomSheetNativeComponentViewHeight = () => {
@@ -63,8 +66,8 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
         case BottomSheetNativePlaceType.overFullScreen:
           adjustedHeight = overFullScreenHeight;
           break;
-        case BottomSheetNativePlaceType.modal: 
-          adjustedHeight = fullScreenHeight - statusBarHeight;
+        case BottomSheetNativePlaceType.modal:
+          adjustedHeight = contentHeight;
           break;
         default:
           return;
@@ -76,7 +79,7 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
     };
 
     setBottomSheetNativeComponentViewHeight();
-  }, [props.nativeComponentData.nativePlace]);
+  }, [props.nativeComponentData.nativePlace, contentHeight, dispatch]);
 
   const renderNativeComponent = () => {
     switch (props.nativeComponentData?.component.type) {
@@ -104,6 +107,12 @@ const UNBottomSheetNativeComponent = (props: UNBottomSheetNativeComponentProps)
             {...props.nativeComponentData.component.props}
           />
         );
+      case BottomSheetNativeComponentType.CheckPaymentComponent:
+        return (
+          <UNCheckPaymentComponent
+            {...props.nativeComponentData.component.props}
+          />
+        );
       case BottomSheetNativeComponentType.BookPaymentComponent:
         return (
           <UNBookPaymentComponent