leantechnologies / link-sdk-react-native

LinkSDK for React Native
MIT License
5 stars 6 forks source link

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

Open alzalabany opened 1 year ago

alzalabany commented 1 year ago

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:

image

alzalabany commented 1 year ago

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;