Add a text view behind the StandaloneWebView and make StandaloneWebVi…

…ew's background transparent
klarna · Mar 25, 2024 · 9526c8a · 9526c8a
1 parent 5894f52
commit 9526c8a
Showing 1 changed file with 47 additions and 28 deletions.
diff --git a/TestApp/src/standalonewebview/StandaloneWebViewScreen.tsx b/TestApp/src/standalonewebview/StandaloneWebViewScreen.tsx
@@ -1,10 +1,10 @@
-import {Keyboard, TextInput, View} from 'react-native';
+import {Keyboard, Text, TextInput, View} from 'react-native';
 import styles from '../common/ui/Styles';
 import React, {useRef, useState} from 'react';
 import {
   KlarnaStandaloneWebView,
-  KlarnaWebViewKlarnaMessageEvent,
   KlarnaWebViewError,
+  KlarnaWebViewKlarnaMessageEvent,
   KlarnaWebViewNavigationEvent,
   KlarnaWebViewProgressEvent,
   KlarnaWebViewRenderProcessGoneEvent,
@@ -112,32 +112,51 @@ export default function StandaloneWebViewScreen() {
         {renderGoBackButton()}
         {renderGoForwardButton()}
       </View>
-      <KlarnaStandaloneWebView
-        ref={klarnaStandaloneWebViewRef}
-        /* eslint-disable-next-line react-native/no-inline-styles */
-        style={{
-          flex: 1,
-        }}
-        returnUrl={'returnUrl://'}
-        onLoadStart={(event: KlarnaWebViewNavigationEvent) => {
-          onEvent('onLoadStart', JSON.stringify(event));
-        }}
-        onLoadEnd={(event: KlarnaWebViewNavigationEvent) => {
-          onEvent('onLoadEnd', JSON.stringify(event));
-        }}
-        onError={(event: KlarnaWebViewError) => {
-          onEvent('onError', JSON.stringify(event));
-        }}
-        onLoadProgress={(event: KlarnaWebViewProgressEvent) => {
-          onEvent('onLoadProgress', JSON.stringify(event));
-        }}
-        onKlarnaMessage={(event: KlarnaWebViewKlarnaMessageEvent) => {
-          onEvent('onKlarnaMessage', JSON.stringify(event));
-        }}
-        onRenderProcessGone={(event: KlarnaWebViewRenderProcessGoneEvent) => {
-          onEvent('onRenderProcessGone', JSON.stringify(event));
-        }}
-      />
+      <View style={{flex: 1}}>
+        <Text
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            textAlign: 'center',
+            backgroundColor: 'lightblue',
+            color: 'black',
+            fontSize: 20,
+            textAlignVertical: 'center',
+          }}>
+          On top of this blue area there is a StandaloneWebView with transparent
+          background!
+        </Text>
+        <KlarnaStandaloneWebView
+          ref={klarnaStandaloneWebViewRef}
+          /* eslint-disable-next-line react-native/no-inline-styles */
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'transparent',
+          }}
+          returnUrl={'returnUrl://'}
+          onLoadStart={(event: KlarnaWebViewNavigationEvent) => {
+            onEvent('onLoadStart', JSON.stringify(event));
+          }}
+          onLoadEnd={(event: KlarnaWebViewNavigationEvent) => {
+            onEvent('onLoadEnd', JSON.stringify(event));
+          }}
+          onError={(event: KlarnaWebViewError) => {
+            onEvent('onError', JSON.stringify(event));
+          }}
+          onLoadProgress={(event: KlarnaWebViewProgressEvent) => {
+            onEvent('onLoadProgress', JSON.stringify(event));
+          }}
+          onKlarnaMessage={(event: KlarnaWebViewKlarnaMessageEvent) => {
+            onEvent('onKlarnaMessage', JSON.stringify(event));
+          }}
+          onRenderProcessGone={(event: KlarnaWebViewRenderProcessGoneEvent) => {
+            onEvent('onRenderProcessGone', JSON.stringify(event));
+          }}
+        />
+      </View>
     </View>
   );
 }