@nihinmedia/medgen-react-native 1.0.12 → 1.0.13

package/lib/commonjs/MedGenWebView.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.originOf = exports.isSameOrigin = exports.decideNavigation = exports.MedGenWebView = void 0;
+exports.useIOSKeyboardOverlap = exports.originOf = exports.isSameOrigin = exports.decideNavigation = exports.MedGenWebView = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -43,6 +43,27 @@ const originOf = u => {
 
 exports.originOf = originOf;
 
+const useIOSKeyboardOverlap = container => {
+  const [overlap, setOverlap] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== "ios") return undefined;
+    const change = _reactNative.Keyboard.addListener("keyboardWillChangeFrame", e => {
+      const keyboardTop = e.endCoordinates.screenY;
+      container.current?.measureInWindow((_x, y, _w, height) => {
+        setOverlap(Math.max(0, Math.round(y + height - keyboardTop)));
+      });
+    });
+    const hide = _reactNative.Keyboard.addListener("keyboardWillHide", () => setOverlap(0));
+    return () => {
+      change.remove();
+      hide.remove();
+    };
+  }, [ container ]);
+  return overlap;
+};
+
+exports.useIOSKeyboardOverlap = useIOSKeyboardOverlap;
+
 const decideNavigation = (url, base, isTopFrame) => {
   if (isSameOrigin(url, base)) return "load";
   if (isTopFrame === false) return "block";
@@ -88,6 +109,8 @@ exports.isSameOrigin = isSameOrigin;
 
 const MedGenWebView = ({url: url, handlers: handlers, capabilities: capabilities, onClose: onClose}) => {
   const ref = (0, _react.useRef)(null);
+  const frameRef = (0, _react.useRef)(null);
+  const keyboardOverlap = useIOSKeyboardOverlap(frameRef);
   const nonce = (0, _react.useMemo)(() => makeNonce(), [ url ]);
   const isMedGenOrigin = (0, _react.useCallback)(target => isSameOrigin(target, (0, 
   _client.embedBase)()), []);
@@ -124,7 +147,12 @@ const MedGenWebView = ({url: url, handlers: handlers, capabilities: capabilities
       nonce: nonce
     });
   }, [ isMedGenOrigin, handlers, capabilities, onClose, nonce ]);
-  return _react.default.createElement(WebView, {
+  return _react.default.createElement(_reactNative.View, {
+    ref: frameRef,
+    style: [ styles.web, {
+      paddingBottom: keyboardOverlap
+    } ]
+  }, _react.default.createElement(WebView, {
     ref: ref,
     source: {
       uri: url
@@ -184,7 +212,7 @@ const MedGenWebView = ({url: url, handlers: handlers, capabilities: capabilities
     })),
     bounces: false,
     overScrollMode: "never"
-  });
+  }));
 };
 
 exports.MedGenWebView = MedGenWebView;

package/lib/commonjs/client.js

@@ -62,7 +62,7 @@ const ASSERTION_TIMEOUT_MS = 1e4;
 
 const ATTESTATION_TIMEOUT_MS = 15e3;
 
-const SDK_VERSION = exports.SDK_VERSION = "1.0.12";
+const SDK_VERSION = exports.SDK_VERSION = "1.0.13";
 
 const DEFAULT_API = {
   development: "https://dev.sugoimed.com",

package/lib/module/MedGenWebView.js

@@ -1,6 +1,6 @@
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import { ActivityIndicator, Linking, StyleSheet, View } from "react-native";
+import { ActivityIndicator, Keyboard, Linking, Platform, StyleSheet, View } from "react-native";
 
 import { WebView as RNWebView } from "react-native-webview";
 
@@ -15,6 +15,25 @@ export const originOf = u => {
   return m ? m[0].toLowerCase() : "";
 };
 
+export const useIOSKeyboardOverlap = container => {
+  const [overlap, setOverlap] = useState(0);
+  useEffect(() => {
+    if (Platform.OS !== "ios") return undefined;
+    const change = Keyboard.addListener("keyboardWillChangeFrame", e => {
+      const keyboardTop = e.endCoordinates.screenY;
+      container.current?.measureInWindow((_x, y, _w, height) => {
+        setOverlap(Math.max(0, Math.round(y + height - keyboardTop)));
+      });
+    });
+    const hide = Keyboard.addListener("keyboardWillHide", () => setOverlap(0));
+    return () => {
+      change.remove();
+      hide.remove();
+    };
+  }, [ container ]);
+  return overlap;
+};
+
 export const decideNavigation = (url, base, isTopFrame) => {
   if (isSameOrigin(url, base)) return "load";
   if (isTopFrame === false) return "block";
@@ -56,6 +75,8 @@ export const isSameOrigin = (target, base) => {
 
 export const MedGenWebView = ({url: url, handlers: handlers, capabilities: capabilities, onClose: onClose}) => {
   const ref = useRef(null);
+  const frameRef = useRef(null);
+  const keyboardOverlap = useIOSKeyboardOverlap(frameRef);
   const nonce = useMemo(() => makeNonce(), [ url ]);
   const isMedGenOrigin = useCallback(target => isSameOrigin(target, embedBase()), []);
   const onShouldStartLoadWithRequest = useCallback(req => {
@@ -91,7 +112,12 @@ export const MedGenWebView = ({url: url, handlers: handlers, capabilities: capab
       nonce: nonce
     });
   }, [ isMedGenOrigin, handlers, capabilities, onClose, nonce ]);
-  return React.createElement(WebView, {
+  return React.createElement(View, {
+    ref: frameRef,
+    style: [ styles.web, {
+      paddingBottom: keyboardOverlap
+    } ]
+  }, React.createElement(WebView, {
     ref: ref,
     source: {
       uri: url
@@ -151,7 +177,7 @@ export const MedGenWebView = ({url: url, handlers: handlers, capabilities: capab
     })),
     bounces: false,
     overScrollMode: "never"
-  });
+  }));
 };
 
 const styles = StyleSheet.create({

package/lib/module/client.js

@@ -12,7 +12,7 @@ const ASSERTION_TIMEOUT_MS = 1e4;
 
 const ATTESTATION_TIMEOUT_MS = 15e3;
 
-export const SDK_VERSION = "1.0.12";
+export const SDK_VERSION = "1.0.13";
 
 const DEFAULT_API = {
   development: "https://dev.sugoimed.com",

package/lib/typescript/MedGenWebView.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { View } from 'react-native';
 import { MedGenCapabilities, MedGenNativeHandlers } from './types';
 
 export declare const originOf: (u: string) => string;
 
+export declare const useIOSKeyboardOverlap: (container: React.RefObject<View>) => number;
 export type NavigationDecision = 'load' | 'external' | 'block';
 export declare const decideNavigation: (url: string, base: string, isTopFrame?: boolean) => NavigationDecision;
 

package/lib/typescript/client.d.ts

@@ -1,5 +1,5 @@
 import { MedGenBranding, ExchangeResult, MedGenCapabilities, MedGenConfig, MedGenEventName } from './types';
-export declare const SDK_VERSION = "1.0.12";
+export declare const SDK_VERSION = "1.0.13";
 
 export declare function configure(cfg: MedGenConfig): void;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nihinmedia/medgen-react-native",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "MedGen Japan SDK for React Native",
   "license": "SEE LICENSE IN LICENSE",
   "private": false,