From ade6c8bb1e48fdd339cce279898837846888a343 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 6 Nov 2023 14:38:05 +0530
Subject: [PATCH] chore: ios window color [skip e2e]

---
 packages/mobile/src/MobileWebAppContainer.tsx | 81 ++++++++++---------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx
index e931da90c..ce2eedf1e 100644
--- a/packages/mobile/src/MobileWebAppContainer.tsx
+++ b/packages/mobile/src/MobileWebAppContainer.tsx
@@ -356,45 +356,52 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
   }
 
   return (
-    <WebView
-      ref={webViewRef}
-      source={{ uri: sourceUri }}
+    <View
       style={{
+        flex: 1,
         backgroundColor: '#000000',
-        opacity: didLoadEnd ? 1 : 0,
       }}
-      originWhitelist={['*']}
-      onError={(err) => console.error('An error has occurred', err)}
-      onHttpError={() => console.error('An HTTP error occurred')}
-      onMessage={onMessage}
-      onContentProcessDidTerminate={() => {
-        webViewRef.current?.reload()
-      }}
-      onRenderProcessGone={() => {
-        webViewRef.current?.reload()
-      }}
-      hideKeyboardAccessoryView={true}
-      onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-      allowFileAccess={true}
-      allowUniversalAccessFromFileURLs={true}
-      injectedJavaScriptBeforeContentLoaded={injectedJS}
-      bounces={false}
-      keyboardDisplayRequiresUserAction={false}
-      allowsInlineMediaPlayback={requireInlineMediaPlaybackForMomentsFeature}
-      mediaPlaybackRequiresUserAction={requireMediaUserInteractionForMomentsFeature}
-      scalesPageToFit={true}
-      /**
-       * This disables the global window scroll but keeps scroll within div elements like lists and textareas.
-       * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears.
-       */
-      scrollEnabled={false}
-      overScrollMode="never"
-      nativeConfig={Platform.select({
-        android: {
-          component: CustomAndroidWebView,
-        } as WebViewNativeConfig,
-      })}
-      webviewDebuggingEnabled
-    />
+    >
+      <WebView
+        ref={webViewRef}
+        source={{ uri: sourceUri }}
+        style={{
+          backgroundColor: Platform.OS === 'ios' ? 'transparent' : '#000000',
+          opacity: didLoadEnd ? 1 : 0,
+        }}
+        originWhitelist={['*']}
+        onError={(err) => console.error('An error has occurred', err)}
+        onHttpError={() => console.error('An HTTP error occurred')}
+        onMessage={onMessage}
+        onContentProcessDidTerminate={() => {
+          webViewRef.current?.reload()
+        }}
+        onRenderProcessGone={() => {
+          webViewRef.current?.reload()
+        }}
+        hideKeyboardAccessoryView={true}
+        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
+        allowFileAccess={true}
+        allowUniversalAccessFromFileURLs={true}
+        injectedJavaScriptBeforeContentLoaded={injectedJS}
+        bounces={false}
+        keyboardDisplayRequiresUserAction={false}
+        allowsInlineMediaPlayback={requireInlineMediaPlaybackForMomentsFeature}
+        mediaPlaybackRequiresUserAction={requireMediaUserInteractionForMomentsFeature}
+        scalesPageToFit={true}
+        /**
+         * This disables the global window scroll but keeps scroll within div elements like lists and textareas.
+         * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears.
+         */
+        scrollEnabled={false}
+        overScrollMode="never"
+        nativeConfig={Platform.select({
+          android: {
+            component: CustomAndroidWebView,
+          } as WebViewNativeConfig,
+        })}
+        webviewDebuggingEnabled
+      />
+    </View>
   )
 }