react-native-unit-components 1.12.0 → 1.14.0

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -1,5 +1,4 @@
-import React, { useImperativeHandle, useRef, useState } from 'react';
-import { View } from 'react-native';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';
 import {
@@ -34,6 +33,7 @@ import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { UNAccountMenuItem, UNCreditAccount } from '../../types/shared';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNAccountComponentProps {
   // inputs
@@ -71,7 +71,11 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   const [height, setHeight] = useState(0);
   const webRef = useRef<WebView>(null);
   // currentAccountId is used to store the current account id for the "imperative" refresh event.
-  const accountIdRef = useRef<string | undefined>(props.accountId);
+  const accountIdRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    accountIdRef.current = props.accountId;
+  }, [props.accountId]);
 
   const handleAccountChanged = (account: UNAccountData) => {
     accountIdRef.current = account.id;
@@ -161,7 +165,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   };
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.account}
@@ -173,7 +177,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </UNBaseView>
   );
 });
 

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { Dimensions } from 'react-native';
 import {
   RequestRefreshEvent,
   RequestRenderingEvent,
@@ -31,6 +31,7 @@ import { setEvent } from '../../slices/SharedEventsSlice';
 import { useDispatch } from 'react-redux';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import type { UNActivityComponentPaginationType } from '../../types/shared';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
@@ -140,8 +141,10 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     }
   };
 
-  const renderActivityWebView = () => {
-    return (
+  const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.activity}
@@ -153,17 +156,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
         language={props.language}
         script={getActivityScript()}
       />
-    );
-  };
-
-  if (!defaultHeight) {
-    return renderActivityWebView();
-  }
-
-  return (
-    <View style={{ height: defaultHeight }}>
-      {renderActivityWebView()}
-    </View>
+    </UNBaseView>
   );
 });
 

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -10,13 +10,14 @@ import type {
   UNOnLoadResponseData,
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNBookPaymentComponentProps {
   //inputs
@@ -35,7 +36,7 @@ export interface UNBookPaymentComponentProps {
 
   // events
   onPaymentCreated?: (data: UNBookPaymentData) => void;
-  onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
+  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
 }
@@ -55,8 +56,12 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     }
 
     if (RESPONSE_KEYS.account in response) {
+      const account = response[RESPONSE_KEYS.account].data;
       // AccountOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<UNAccountData>);
+      const paymentOnload: UNOnLoadResponseData<[UNAccountData]> = {
+        data: ensureArray(account),
+      };
+      props.onLoad(paymentOnload);
       return;
     }
 
@@ -93,29 +98,21 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     }
   };
 
-  const renderBookPaymentWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.bookPayment}
         presentationMode={presentationMode}
         params={getBookPaymentParams(props)}
         script={getBookPaymentScript()}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-        isScrollable={false}
+        isScrollable={true}
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderBookPaymentWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderBookPaymentWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -39,7 +39,6 @@ import { WebComponentType } from '../../types/internal/webComponent.types';
 import { getNativeComponentDataFromEvent } from './UNBottomSheetComponent.utils';
 
 const UNBottomSheetComponent = () => {
-
   const dispatch = useDispatch();
 
   const isBottomSheetActive = useSelector((state: RootState) => state.bottomSheet.isBottomSheetActive);

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
-import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -32,6 +31,7 @@ import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { UNCardMenuItem } from '../../types/shared';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNCardComponentProps {
   // inputs
@@ -169,7 +169,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
   }, []);
 
   return (
-    <View style={{ height, width: '100%', minWidth: 235 }}>
+    <UNBaseView style={{ height, width: '100%', minWidth: 235 }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}
@@ -181,7 +181,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </UNBaseView>
   );
 
 });

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, NativeModules, Platform } from 'react-native';
+import { NativeModules, Platform } from 'react-native';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
@@ -12,6 +12,7 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const { Camera } = NativeModules;
 
@@ -101,8 +102,10 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
     }
   };
 
-  const renderBookPaymentWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.checkDeposit}
         presentationMode={presentationMode}
@@ -113,17 +116,7 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
         language={props.language}
         isScrollable={true}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderBookPaymentWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderBookPaymentWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNFundAccountPaymentComponent/UNFundAccountPaymentComponent.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable no-case-declarations */
+import React, { useRef } from 'react';
+import type WebView from 'react-native-webview';
+import {
+  UnitMessage,
+} from '../../messages/webMessages/unitMessages';
+import { WebComponent } from '../../webComponent/WebComponent';
+import type { WebViewMessage } from '../../messages/webMessages';
+import {
+  getFundAccountPaymentParams,
+  getFundAccountPaymentScript,
+} from './UNFundAccountPaymentComponent.utils';
+import type { UNFundAccountPaymentData, UNFundAccountPaymentOnLoadData, UNAstraExternalCardData, UNCardData, UNError, UNOnLoadResponse } from '../../types/shared';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { withReduxStore } from '../../helpers/store/helpers';
+import { SafeAreaView } from 'react-native';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import { FundAccountPaymentEvent } from '../../messages/webMessages/fundAccountPaymentMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+
+export interface UNFundAccountPaymentComponentProps {
+  // inputs
+  accountId?: string;
+  customerToken: string;
+  fee?: number;
+  isAutoFocus?: boolean;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  initialStageBackButton?: boolean;
+  finalStageDoneButton?: boolean;
+
+  // events
+  onLoad?: (response: UNOnLoadResponse<UNFundAccountPaymentOnLoadData>) => void;
+  onPaymentCreated?: (data: UNFundAccountPaymentData) => void;
+  onInitialStageBackButtonClicked?: () => void;
+  onFinalStageDoneButtonClicked?: () => void;
+}
+
+const UNFundAccountPaymentComponent = (props: UNFundAccountPaymentComponentProps) => {
+  const webRef = useRef<WebView>(null);
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    if (RESPONSE_KEYS.astraExternalCard in response) {
+      // AstraOnLoadResponse
+      props.onLoad(response[RESPONSE_KEYS.astraExternalCard] as UNOnLoadResponse<[UNAstraExternalCardData]>);
+      return;
+    }
+
+    if (RESPONSE_KEYS.accountCards in response) {
+      props.onLoad(response[RESPONSE_KEYS.accountCards] as UNOnLoadResponse<[UNCardData]>);
+      return;
+    }
+
+    console.error('On Load Error: unexpected response type');
+    return;
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    switch (message.type) {
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case PaymentMessage.PAYMENT_CREATED:
+        const fundAccountPayment = message.details as FundAccountPaymentEvent;
+        props.onPaymentCreated && props.onPaymentCreated(fundAccountPayment.data as UNFundAccountPaymentData);
+        break;
+      case PaymentMessage.INITIAL_STAGE_BACK_BUTTON_CLICKED: {
+        props.onInitialStageBackButtonClicked && props.onInitialStageBackButtonClicked();
+        break;
+      }
+      case PaymentMessage.FINAL_STAGE_DONE_BUTTON_CLICKED: {
+        props.onFinalStageDoneButtonClicked && props.onFinalStageDoneButtonClicked();
+        break;
+      }
+    }
+  };
+
+  return (
+    <SafeAreaView style={{flex: 1, minHeight: 400}}>
+      <UNBaseView style={{flex: 1}} onLoadError={ handleUnitOnLoad }>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.fundAccountPayment}
+          presentationMode={PresentationMode.Inherit}
+          params={getFundAccountPaymentParams(props)}
+          script={getFundAccountPaymentScript()}
+          theme={props.theme}
+          language={props.language}
+          onMessage={message => handleMessage(message)}
+          isScrollable={true}
+          nestedScrollEnabled={true}
+        />
+      </UNBaseView>
+    </SafeAreaView>
+  );
+};
+
+export default withReduxStore<UNFundAccountPaymentComponentProps>(UNFundAccountPaymentComponent);

package/src/components/UNFundAccountPaymentComponent/UNFundAccountPaymentComponent.utils.ts

@@ -0,0 +1,24 @@
+import { UNFundAccountPaymentComponentProps } from './UNFundAccountPaymentComponent';
+import { LISTENERS } from '../../scripts/html/bodyScript';
+
+export const getFundAccountPaymentParams = (props: UNFundAccountPaymentComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
+  const feeParam = props.fee ? `fee="${props.fee}"` : '';
+  return `
+    customer-token="${props.customerToken}"
+    ${accountIdParam}
+    ${feeParam}
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    initial-stage-back-button="${props.initialStageBackButton ?? false}"
+    final-stage-done-button="${props.finalStageDoneButton ?? false}"
+    style="height: 100%"
+  `;
+};
+
+export const getFundAccountPaymentScript = () => {
+  return `
+    ${LISTENERS.unitPaymentCreated}
+    ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
+    ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
+  `;
+};

package/src/components/UNFundAccountPaymentComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNFundAccountPaymentComponent, UNFundAccountPaymentComponentProps } from './UNFundAccountPaymentComponent';

package/src/components/UNMultipleCardsComponent/UNMultipleCardsComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { Dimensions } from 'react-native';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { WebComponent } from '../../webComponent/WebComponent';
@@ -21,6 +21,7 @@ import type {
   UNOnLoadResponseData,
 } from '../../types/shared';
 import { MultipleCardsCardClickedEvent, MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
@@ -90,8 +91,9 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
     }
   };
 
-  const renderMultipleCardsWebView = () => {
-    return (
+  const style = defaultHeight ? { height: defaultHeight } : { flex: 1};
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.multipleCards}
@@ -103,17 +105,7 @@ const UNMultipleCardsComponent = (props: UNMultipleCardsComponentProps) => {
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (!defaultHeight) {
-    return renderMultipleCardsWebView();
-  }
-
-  return (
-    <View style={{ height: defaultHeight }}>
-      {renderMultipleCardsWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNNextRepaymentComponent/UNNextRepaymentComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { WebComponent } from '../../webComponent/WebComponent';
@@ -12,6 +11,7 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { UNRepaymentData } from '../../types/shared/repayment.types';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNNextRepaymentComponentProps {
   // inputs
@@ -63,7 +63,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
   };
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.nextRepayment}
         presentationMode={PresentationMode.Default}
@@ -73,7 +73,7 @@ const UNNextRepaymentComponent = (props: UNNextRepaymentComponentProps) => {
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNPayeeManagementComponent/UNPayeeManagementComponent.tsx

@@ -19,6 +19,7 @@ import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import { OpenPlaidEvent, PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeConnectedAccountEvent, PayeeCounterpartyEvent, PayeeManagementMessage, PayeeMicroDepositeConnectionEvent } from '../../messages/webMessages/payeeManagementMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNPayeeManagementComponentProps {
   // inputs
@@ -136,17 +137,19 @@ const UNPayeeManagementComponent = (props: UNPayeeManagementComponentProps) => {
   };
 
   return (
-    <WebComponent
-      ref={webRef}
-      type={WebComponentType.payeeManagement}
-      presentationMode={PresentationMode.Inherit}
-      params={getPayeeParams(props)}
-      script={getPayeeManagementScript()}
-      theme={props.theme}
-      nestedScrollEnabled={true}
-      language={props.language}
-      onMessage={message => handleMessage(message)}
-    />
+    <UNBaseView style={{ height: '100%' }}>
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.payeeManagement}
+        presentationMode={PresentationMode.Inherit}
+        params={getPayeeParams(props)}
+        script={getPayeeManagementScript()}
+        theme={props.theme}
+        nestedScrollEnabled={true}
+        language={props.language}
+        onMessage={message => handleMessage(message)}
+      />
+    </UNBaseView>
   );
 };
 

package/src/components/UNProgramDetailsComponent/UNProgramDetailsComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { View } from 'react-native';
 import { WebComponent } from '../../webComponent/WebComponent';
 import { UNAccountData, UNError, UNOnLoadResponse, UNOnLoadResponseData } from '../../types/shared';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
@@ -9,6 +8,7 @@ import { withReduxStore } from '../../helpers/store/helpers';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNProgramDetailsComponentProps {
   // inputs
@@ -61,7 +61,7 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
   };
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.programDetails}
         presentationMode={PresentationMode.Default}
@@ -70,7 +70,7 @@ const UNProgramDetailsComponent =  (props: UNProgramDetailsComponentProps) => {
         language={props.language}
         onMessage={handleMessage}
       />
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -24,6 +24,7 @@ import { PageMessage } from '../../messages/webMessages/pageMessage';
 import UNStoreManagerHelper from '../../nativeModulesHelpers/UNStoreManagerHelper/UNStoreManagerHelper';
 import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { setItemInWindowUnitStore } from '../../utils/windowUnitStore';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNWhiteLabelAppComponentProps {
   // inputs
@@ -79,7 +80,7 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
     try {
       const token = await UNStoreManagerHelper.getValue(UserDataKeys.unitCustomerToken);
       if (token) {
-        setItemInWindowUnitStore(webRef.current, UserDataKeys.unitCustomerToken, token + ' s');
+        setItemInWindowUnitStore(webRef.current, UserDataKeys.unitCustomerToken, token);
       }
     } catch (e) {
       console.log(e);
@@ -102,17 +103,19 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
 
   const renderWebView = () => {
     return (
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.whiteLabelApp}
-        presentationMode={PresentationMode.Inherit}
-        params={getWhiteLabelAppParams(props)}
-        onMessage={handleWebViewMessage}
-        isScrollable={true}
-        theme={props.theme}
-        language={props.language}
-        script={getWhiteLabelAppScript()}
-      />
+      <UNBaseView style={{ flex: 1 }}>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.whiteLabelApp}
+          presentationMode={PresentationMode.Inherit}
+          params={getWhiteLabelAppParams(props)}
+          onMessage={handleWebViewMessage}
+          isScrollable={true}
+          theme={props.theme}
+          language={props.language}
+          script={getWhiteLabelAppScript()}
+        />
+      </UNBaseView>
     );
   };