webview call to action button is not visibile in v0.1.6 due to safe-area

[alzalabany]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

there is UI bug in "lean-react-native": "^0.1.6" that makes the modal show behind phone edges (not within safe-area)

in index.js Dimensions.get('window').height is used, and no factor for edges, and since there is no way to pass styles to adjust offset we had to patch packages for now to fix this.

image from IOS 13 pro max:

[alzalabany]

to fix the problem for now I used following patch-package

diff --git a/node_modules/lean-react-native/src/components/LinkSDK/index.js b/node_modules/lean-react-native/src/components/LinkSDK/index.js
index df27ef4..88b9ea7 100644
--- a/node_modules/lean-react-native/src/components/LinkSDK/index.js
+++ b/node_modules/lean-react-native/src/components/LinkSDK/index.js
@@ -1,5 +1,5 @@
 import React, {forwardRef, useImperativeHandle, useRef, useState} from 'react';
-import {Dimensions, Linking, Platform, StyleSheet, View} from 'react-native';
+import {Linking, Modal, Platform} from 'react-native';
 import {WebView} from 'react-native-webview';

 const pkg = require('../../../package.json');
@@ -207,14 +207,18 @@ const LinkSDK = forwardRef((props, ref) => {
   }

   return (
-    <View
-      style={styles.container}
-      height={Dimensions.get('window').height}
-      width={Dimensions.get('window').width}>
+    <Modal visible={isOpen} transparent animationType="fade">
       <WebView
         {...props.webViewProps}
         ref={SDK}
-        style={styles.WebView}
+        style={[{
+          backgroundColor:'rgba(0,0,0,.1)',
+          position:'absolute',
+          bottom:0,
+          width: '100%',
+          height: '100%'
+        }]}
+        containerStyle={{flex:1, backgroundColor:'rgba(0,0,0,.1)'}}
         originWhitelist={['*']}
         allowsInlineMediaPlayback={true}
         mediaPlaybackRequiresUserAction={false}
@@ -242,8 +246,8 @@ const LinkSDK = forwardRef((props, ref) => {
         onMessage={(event) => {
           internalCallback(event.nativeEvent.data);
         }}
-      />
-    </View>
+        />
+    </Modal>
   );
 });

@@ -251,25 +255,4 @@ LinkSDK.defaultProps = {
   webViewProps: {},
 };

-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-    zIndex: 2,
-  },
-  WebView: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    backgroundColor: 'transparent',
-    zIndex: 100,
-  },
-});
-
 export default LinkSDK;