react-native-unit-components 1.4.0 → 1.6.1

package/lib/typescript/unitSdkManager/UnitSdkManager.d.ts

@@ -9,10 +9,12 @@ export declare const UNIT_SCRIPT_URL: {
 export declare class UnitSDK {
     protected static env?: UNEnvironment;
     protected static theme?: string;
+    protected static language?: string;
     protected static signedNonce?: string;
-    static init: (env: UNEnvironment, theme?: string) => Promise<void>;
+    static init: (env: UNEnvironment, theme?: string, language?: string) => Promise<void>;
     static setSignedNonce: (signedNonce: string) => void;
     static getEnv: () => UNEnvironment | undefined;
     static getTheme: () => string | undefined;
+    static getLanguage: () => string | undefined;
     static getSignedNonce: () => string | undefined;
 }

package/lib/typescript/webComponent/WebComponent.d.ts

@@ -7,6 +7,7 @@ export interface WebComponentProps {
     presentationMode?: PresentationMode;
     params?: string;
     theme?: string;
+    language?: string;
     onMessage?: (message: WebViewMessage) => void;
     script?: string;
     isScrollable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.4.0",
+  "version": "1.6.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -1,22 +1,27 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
 import { PresentationMode } from '../../scripts/html/bodyHtml';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { View } from 'react-native';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
-import { getACHCreditParams, getACHCreditScript } from './UNACHCreditComponent.utils';
+import { Platform, View } from 'react-native';
+import { getACHCreditParams, getACHCreditScript, 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 { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import type WebView from 'react-native-webview';
+import { getAndroidPackageName } from '../utils/nativeModulesInfo';
 
 export interface UNACHCreditComponentProps {
   accountId: string;
   customerToken: string;
   theme?: string;
+  language?: string;
   isAutoFocus?: boolean;
   fee?: number;
+  withPlaid?: boolean;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
 }
@@ -24,6 +29,19 @@ export interface UNACHCreditComponentProps {
 export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
   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);
+
+  useEffect(() => {
+    const setPackageNameForAndroid = async () => {
+      if (Platform.OS === 'android') {
+        const packageName = await getAndroidPackageName();
+        setAppPackageName(packageName);
+      }
+    };
+    setPackageNameForAndroid();
+  }, []);
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -71,19 +89,42 @@ export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         }
         break;
       }
+      case UnitMessage.UNIT_PLAID_TOKEN_CREATED: {
+        const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
+        const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
+        setLinkToken(linkTokenData.attributes.linkToken);
+        break;
+      }
+
+      case UnitMessage.UNIT_REQUEST_EXTERNAL_SDK: {
+        const externalSdkType = (message.details as RequestExternalSdkEvent).type;
+        if (externalSdkType !== 'plaid') return;
+        linkToken && openLink({
+          tokenConfig: { noLoadingState: false, token: linkToken },
+          onSuccess: (success: LinkSuccess) => {
+            injectUnitPlaidResponse(webRef.current, success);
+          },
+          onExit: exit => { console.log(exit); }
+        }).catch(e => {
+          console.error(e);
+        });
+        break;
+      }
     }
   };
 
   const renderACHCreditWebView = () => {
     return (
       <WebComponent
+        ref={webRef}
         type={WebComponentType.achCreditPayment}
         presentationMode={presentationMode}
         params={getACHCreditParams(props)}
-        script={getACHCreditScript()}
+        script={getACHCreditScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         isScrollable={false}
         theme={props.theme}
+        language={props.language}
       />
     );
   };

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -1,26 +1,29 @@
 import type { UNACHCreditComponentProps } from './UNACHCreditComponent';
-
-import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import type WebView from 'react-native-webview';
+import type { LinkSuccess } from 'react-native-plaid-link-sdk';
+import { DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
   `;
 };
 
-export const getACHCreditScript = () => {
+export const getACHCreditScript = (appPackageName?: string) => {
   return `
-    window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
-      const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
-        }).catch((e) => {
-          console.log(e)
-        })
-    });
+    ${LISTENERS.unitPlaidTokenCreated}
+    ${appPackageName && `window.UnitMobileSDKConfig.androidPackageName='${appPackageName}'`}
+    ${LISTENERS.unitPaymentCreated}
+    ${DISPATCH_PLAID_RESPONSE}
   `;
 };
+
+export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
+  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
+};

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -6,19 +6,20 @@ import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHO
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
 import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { getACHDebitParams, getACHDebitScript, getAndroidPackageName, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
-
+import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
 import { LinkSuccess, openLink } 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 { getAndroidPackageName } from '../utils/nativeModulesInfo';
 
 export interface UNACHDebitComponentProps {
   accountId: string;
   customerToken: string;
   theme?: string;
+  language?: string;
   isAutoFocus?: boolean;
   fee?: number;
   onPaymentCreated?: (data: UNACHData) => void;
@@ -42,10 +43,6 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     setPackageNameForAndroid();
   }, []);
 
-  const dispatchUnitPlaidResponse = (success: LinkSuccess) => {
-    injectUnitPlaidResponse(webRef.current, success);
-  };
-
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
       return;
@@ -103,9 +100,9 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         const externalSdkType = (message.details as RequestExternalSdkEvent).type;
         if (externalSdkType !== 'plaid') return;
         linkToken && openLink({
-          tokenConfig: { noLoadingState: false, token: linkToken},
-          onSuccess: (success) => {
-            dispatchUnitPlaidResponse(success);
+          tokenConfig: { noLoadingState: false, token: linkToken },
+          onSuccess: (success: LinkSuccess) => {
+            injectUnitPlaidResponse(webRef.current, success);
           },
           onExit: exit => { console.log(exit); }
         }).catch(e => {
@@ -127,6 +124,7 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         isScrollable={false}
         theme={props.theme}
+        language={props.language}
       />
     );
   };

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -3,9 +3,6 @@ import type { UNACHDebitComponentProps } from './UNACHDebitComponent';
 
 import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
-import { NativeModules } from 'react-native';
-const { RNAppInfoModule } = NativeModules;
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   return `
@@ -17,25 +14,9 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   `;
 };
 
-export const getAndroidPackageName = async () => {
-  try {
-    const response = await RNAppInfoModule.getAppPackageName();
-    return response;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
 export const getACHDebitScript = (androidPackageName?: string) => {
   return `
-      window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
-        const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
-        }).catch((e) => {
-          console.log(e)
-        })
-      });
+    ${LISTENERS.unitPlaidTokenCreated}
     ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
     ${DISPATCH_PLAID_RESPONSE}

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -23,6 +23,7 @@ export interface UNAccountComponentProps {
 
   // ui
   theme?: string;
+  language?: string;
   hideActionsMenuButton?: boolean;
   hideSelectionMenuButton?: boolean;
 
@@ -122,6 +123,7 @@ export const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountCompon
         params={getAccountParams(props)}
         script={getAccountScript()}
         theme={props.theme}
+        language={props.language}
         onMessage={message => handleMessage(message)}
         width={windowWidth}
         isScrollable={false}

package/src/components/UNAccountComponent/UNAccountComponent.utils.ts

@@ -5,9 +5,10 @@ import { WebComponentType } from '../../webComponent/WebComponent';
 import type { UNAccountMenuAction } from 'src/sharedTypes';
 
 export const getAccountParams = (props: UNAccountComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   return `
-    account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    ${accountIdParam}
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-selection-menu-button="${props.hideSelectionMenuButton || false}"
   `;

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -18,12 +18,13 @@ import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 export interface UNActivityComponentProps {
   // inputs
-  accountId: string;
   customerToken: string;
+  accountId?: string;
   queryFilter?: string
 
   // ui
   theme?: string;
+  language?: string;
   hideFilterButton?: boolean;
 
   // event
@@ -43,7 +44,7 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
   };
 
   useListenerToBus({ busEventKey: UnitMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToBus({ busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, action: dispatchActivityFiltersChanged});
+  useListenerToBus({ busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED, action: dispatchActivityFiltersChanged });
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -103,6 +104,7 @@ export const UNActivityComponent = (props: UNActivityComponentProps) => {
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         nestedScrollEnabled={true}
         theme={props.theme}
+        language={props.language}
         script={getActivityScript()}
       />
     );

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

@@ -5,10 +5,12 @@ import { DISPATCH_REQUEST_REFRESH } from './../../scripts/html/bodyScript';
 import type { UNActivityComponentProps } from './UNActivityComponent';
 
 export const getActivityParams = (props: UNActivityComponentProps) => {
+  const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
   const queryFilterParam = props.queryFilter ? `query-filter="${props.queryFilter}"` : '';
+
   return `
-    account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    ${accountIdParam}
     hide-filter-button="${props.hideFilterButton || false}"
     ${queryFilterParam}
     style="height: 100%"

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -12,12 +12,19 @@ import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMes
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 
 export interface UNBookPaymentComponentProps {
+  //inputs
   accountId: string;
   customerToken: string;
   isSameCustomer: boolean;
   counterPartyAccountId: string;
   counterPartyName: string;
+
+  // ui
   theme?: string;
+  language?: string;
+  isAutoFocus?: boolean;
+
+  // events
   onPaymentCreated?: (data: UNBookPaymentData) => void;
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
 }
@@ -77,6 +84,7 @@ export const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         isScrollable={false}
         theme={props.theme}
+        language={props.language}
       />
     );
   };

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.utils.ts

@@ -10,6 +10,7 @@ export const getBookPaymentParams = (props: UNBookPaymentComponentProps) => {
     is-same-customer="${props.isSameCustomer}"
     counterparty-account-id="${props.counterPartyAccountId}"
     counterparty-name="${props.counterPartyName}"
+    is-auto-focus="${props.isAutoFocus || false}"
     style="height: 100%"
   `;
 };

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -21,9 +21,11 @@ export interface UNCardComponentProps {
   // inputs
   cardId: string;
   customerToken: string;
+  learnMoreUrl?: string;
 
   // ui
   theme?: string;
+  language?: string;
   hideActionsMenuButton?: boolean;
   hideCardTitle?: boolean;
   hideSensitiveDataButton?: boolean;
@@ -36,10 +38,10 @@ export interface UNCardComponentProps {
 }
 export interface CardRef {
   openActionsMenu: () => void;
-  openAction:(action: UNCardMenuAction) => void;
+  openAction: (action: UNCardMenuAction) => void;
 }
 
-export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent (props, cardRef) {
+export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function UNCardComponent(props, cardRef) {
   const [height, setHeight] = useState(0);
   const windowWidth = Dimensions.get('window').width;
 
@@ -169,6 +171,7 @@ export const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(f
         presentationMode={PresentationMode.Default}
         params={getCardParams(props)}
         theme={props.theme}
+        language={props.language}
         script={getCardScript()}
         onMessage={message => handleMessage(message)}
         width={windowWidth}

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -17,6 +17,7 @@ export const getCardParams = (props: UNCardComponentProps) => {
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"
+    learn-more-url="${props.learnMoreUrl || ''}"
   `;
 };
 

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -18,6 +18,7 @@ export interface UNCheckDepositComponentProps {
   fee: number;
   customerToken: string;
   theme?: string;
+  language?: string;
   onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
   onDepositCreated?: (checkData: UNCheckDepositData) => void
   onRestartRequest?: (checkData: UNCheckDepositData) => void
@@ -31,7 +32,7 @@ export const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) =>
     const requestCameraAccess = async () => {
       try {
         await Camera.requestAccess();
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
         console.error(error);
       }
@@ -95,6 +96,7 @@ export const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) =>
         script={getCheckDepositScript()}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         theme={props.theme}
+        language={props.language}
         isScrollable={true}
       />
     );

package/src/components/utils/nativeModulesInfo.ts

@@ -0,0 +1,11 @@
+import { NativeModules } from 'react-native';
+const { RNAppInfoModule } = NativeModules;
+
+export const getAndroidPackageName = async () => {
+  try {
+    const response = await RNAppInfoModule.getAppPackageName();
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};

package/src/scripts/html/bodyScript.ts

@@ -84,7 +84,7 @@ export const LISTENERS = {
   window.addEventListener("${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", (e) => {
     postMessageToSDK({ type: "${UnitMessage.UNIT_REQUEST_EXTERNAL_SDK}", details: e.detail })
   });
-`,
+  `,
   unitPaymentCreated: `
   window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
     const response = e.detail
@@ -93,8 +93,18 @@ export const LISTENERS = {
       }).catch((e) => {
         console.log(e)
       })
-  });`
-  ,
+  });
+  `,
+  unitPlaidTokenCreated: `
+  window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
+    const response = e.detail
+    response.then((data) => {
+      postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
+    }).catch((e) => {
+      console.log(e)
+    })
+  });
+  `,
   unitAccountChanged: `
     window.addEventListener("${AccountMessage.UNIT_ACCOUNT_CHANGED}", (e) => {
       const response = e.detail

package/src/unitSdkManager/UnitSdkManager.ts

@@ -14,12 +14,14 @@ export const UNIT_SCRIPT_URL = {
 export class UnitSDK {
   protected static env?: UNEnvironment;
   protected static theme?: string;
+  protected static language?: string;
   protected static signedNonce?: string;
 
-  public static init = async (env: UNEnvironment, theme?: string) => {
+  public static init = async (env: UNEnvironment, theme?: string, language?: string) => {
     try {
       this.env = env;
       this.theme = theme;
+      this.language = language;
       await fetchUnitScript();
       EventBus.Instance.event(SDKMessage.IS_SDK_INITIALIZED, {});
     } catch (e) {
@@ -39,6 +41,10 @@ export class UnitSDK {
     return this.theme;
   };
 
+  public static getLanguage = () => {
+    return this.language;
+  };
+
   public static getSignedNonce = () => {
     return this.signedNonce;
   };

package/src/webComponent/WebComponent.tsx

@@ -20,6 +20,7 @@ export interface WebComponentProps {
   presentationMode?: PresentationMode,
   params?: string;
   theme?: string;
+  language?: string;
   onMessage?: (message: WebViewMessage) => void;
   script?: string;
   isScrollable?: boolean,
@@ -43,6 +44,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
   const [unitScript, setUnitScript] = useState<string | undefined>(globalUnitScript);
   const [sourceHtml, setSourceHtml] = useState<string | null>(null);
   const [componentCurrentTheme, setComponentCurrentTheme] = useState<string | undefined>(props.theme ?? UnitSDK.getTheme());
+  const [componentCurrentLanguage, setComponentCurrentLanguage] = useState<string | undefined>(props.language ?? UnitSDK.getLanguage());
   const [baseName, setBaseName] = useState<string>();
   const width = props.width ?? '100%';
 
@@ -52,6 +54,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
 
   const updateInitializedParams = () => {
     setComponentCurrentTheme(props.theme ?? UnitSDK.getTheme());
+    setComponentCurrentLanguage(props.language ?? UnitSDK.getLanguage());
   };
 
   useListenerToBus({ busEventKey: SDKMessage.IS_SCRIPT_FETCHED, action: updateUnitScript });
@@ -83,11 +86,14 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       return;
     }
 
-    const componentParams = (props.params || '') + (componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '');
+    const themeParam = componentCurrentTheme ? ` theme="${componentCurrentTheme}"` : '';
+    const languageParam = componentCurrentLanguage ? ` language="${componentCurrentLanguage}"` : '';
+
+    const componentParams = (props.params || '') + themeParam + languageParam;
     let newHtml = html.replace(HTML_PLACEHOLDER.BODY, getHtmlBody(props.type.valueOf(), componentParams, props.presentationMode));
     newHtml = newHtml.replace(HTML_PLACEHOLDER.SCRIPT_FROM_NATIVE, props.script || '');
     setSourceHtml(newHtml);
-  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, props.script]);
+  }, [props.params, unitScript, props.presentationMode, componentCurrentTheme, componentCurrentLanguage, props.script]);
 
   const onMessage = (e: WebViewMessageEvent) => {
     const message = JSON.parse(e.nativeEvent.data) as WebViewMessage;
@@ -133,7 +139,7 @@ export const WebComponent = React.forwardRef<WebView, WebComponentProps>(functio
       onScroll={_onScroll}
       overScrollMode="never"
       injectedJavaScript={unitScript}
-      style={{ width: width, flex: 1, opacity: 0.99}}
+      style={{ width: width, flex: 1, opacity: 0.99, backgroundColor: "transparent" }}
       source={{ html: sourceHtml, baseUrl: `https://${baseName}` }}
       onMessage={onMessage}
       androidHardwareAccelerationDisabled

package/ios/UnitReactNativeComponents.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-</Workspace>

package/ios/UnitReactNativeComponents.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

package/ios/UnitReactNativeComponents.xcodeproj/xcuserdata/alonshprung.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>UnitReactNativeComponents.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>