Shayan/77946/account switcher is breaking in mobile ios

packages/components/@types/react-div-100vh/react-div-100vh-config.d.ts

@@ -0,0 +1,12 @@
+declare module 'react-div-100vh' {
+    export default function Div100vh(
+        props: React.PropsWithChildren<{
+            className: string | undefined;
+            id: string | undefined;
+            style: {
+                height?: string | null;
+                maxHeight?: string | null;
+            };
+        }>
+    ): JSX.Element;
+}

packages/components/src/components/div100vh-container/div100vh-container.tsx

@@ -1,5 +1,18 @@
-import React, { PropsWithChildren } from 'react';
-import { use100vh } from 'react-div-100vh';
+/* eslint @typescript-eslint/triple-slash-reference: "off" */
+/// <reference path="../../../@types/react-div-100vh/react-div-100vh-config.d.ts" />
+import React from 'react';
+import Div100vh from 'react-div-100vh';
+
+/* Div100vh is workaround for getting accurate height of 100vh from browsers on mobile,
+    because using normal css vh is not returning correct screen height */
+/* To adjust max-height using calculation when using height: auto (or no rvh units), pass style props and use rvh unit instead vh,
+        e.g - style={{ maxHeight: calc(100rvh - 100px )}}
+    */
+/* To adjust height using calculation, pass style props and use rvh unit instead vh,
+    e.g - style={{ height: calc(100rvh - 100px )}}
+*/
+/* To manually remove rvh calculation and revert to default browser calculation use is_disabled */
+/* To bypass usage of component altogether, use is_bypassed */
 
 type TDiv100vhContainerProps = {
     id?: string;
@@ -14,25 +27,22 @@ type TDiv100vhContainerProps = {
 const Div100vhContainer = ({
     children,
     className,
-    is_bypassed = false, // to bypass usage of component altogether, pass it
-    is_disabled = false, // To manually remove use100vh() calculation and revert to default browser calculation pass it
+    is_bypassed,
+    is_disabled,
     id,
     height_offset,
     max_autoheight_offset,
-}: PropsWithChildren<TDiv100vhContainerProps>) => {
-    const screen_vertical_height = use100vh();
-    const height = screen_vertical_height ? `${screen_vertical_height}px` : '100vh';
-    const height_rule = height_offset ? `calc(${height} - ${height_offset})` : `calc(${height})`;
-
-    const height_style = max_autoheight_offset
-        ? { maxHeight: `calc(100vh - ${max_autoheight_offset})` }
-        : { height: height_rule };
-
+}: React.PropsWithChildren<TDiv100vhContainerProps>) => {
+    const height_rule = height_offset ? `calc(100rvh - ${height_offset})` : 'calc(100rvh)';
+    const height_style = {
+        height: max_autoheight_offset ? null : height_rule,
+        maxHeight: max_autoheight_offset ? `calc(100rvh - ${max_autoheight_offset})` : null,
+    };
     if (is_bypassed) return children;
     return (
-        <div id={id} className={className} style={is_disabled ? {} : height_style}>
+        <Div100vh id={id} className={className} style={is_disabled ? {} : height_style}>
             {children}
-        </div>
+        </Div100vh>
     );
 };
 

packages/components/tsconfig.json

@@ -7,5 +7,5 @@
             "@deriv/*": ["../*/src"]
         }
     },
-    "include": ["src"]
+    "include": ["src", "./@types/react-div-100vh/react-div-100vh-config.d.ts"]
 }