react-native-unit-components 1.13.0 → 1.14.0

package/react-native-unit-components.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.license      = package["license"]
   s.authors      = package["author"]
 
-  s.platforms    = { :ios => "10.0" }
+  s.platforms    = { :ios => "14.0" }
   s.source       = { :git => "https://github.com/github_account/unit-react-native-components.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift}"

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -3,7 +3,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { Platform, View } from 'react-native';
+import { Platform } from 'react-native';
 import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from './UNACHCreditComponent.utils';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
@@ -21,6 +21,8 @@ import { PresentationMode, WebComponentType } from '../../types/internal/webComp
 import { withReduxStore } from '../../helpers/store/helpers';
 import { UNPlaidAccountFilter } from '../../types/shared';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNACHCreditComponentProps {
   accountId?: string;
@@ -69,10 +71,11 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     }
 
     if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
+      const account = response[RESPONSE_KEYS.account].data;
       // ACHOnLoadResponse;
       const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
         data: {
-          [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
+          [RESPONSE_KEYS.account]: ensureArray(account),
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
         },
       };
@@ -138,8 +141,10 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     }
   };
 
-  const renderACHCreditWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.achCreditPayment}
@@ -147,21 +152,11 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         params={getACHCreditParams(props)}
         script={getACHCreditScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-        isScrollable={false}
+        isScrollable={true}
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderACHCreditWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderACHCreditWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -3,7 +3,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { Platform, View } from 'react-native';
+import { Platform } from 'react-native';
 import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
@@ -22,6 +22,8 @@ import { PresentationMode, WebComponentType } from '../../types/internal/webComp
 import { withReduxStore } from '../../helpers/store/helpers';
 import { UNPlaidAccountFilter } from '../../types/shared';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNACHDebitComponentProps {
   accountId?: string;
@@ -69,10 +71,11 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     }
 
     if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
+      const account = response[RESPONSE_KEYS.account].data;
       // ACHOnLoadResponse;
       const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
         data: {
-          [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
+          [RESPONSE_KEYS.account]: ensureArray(account),
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
         },
       };
@@ -138,8 +141,10 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     }
   };
 
-  const renderACHDebitWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.achDebitPayment}
@@ -147,22 +152,11 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         params={getACHDebitParams(props)}
         script={getACHDebitScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-        isScrollable={false}
+        isScrollable={true}
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderACHDebitWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderACHDebitWebView()}
-    </View>
-
+    </UNBaseView>
   );
 };
 

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { View } from 'react-native';
 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
@@ -165,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}
@@ -177,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

@@ -17,6 +17,8 @@ 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;
@@ -88,18 +90,20 @@ const UNFundAccountPaymentComponent = (props: UNFundAccountPaymentComponentProps
 
   return (
     <SafeAreaView style={{flex: 1, minHeight: 400}}>
-      <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 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>
   );
 };

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
@@ -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>
     );
   };