@tamagui/use-keyboard-visible 3.0.0-beta.924.1 → 3.0.1

package/dist/cjs/useKeyboardVisible.cjs

@@ -28,20 +28,21 @@ var useKeyboardVisible_exports = {};
 __export(useKeyboardVisible_exports, { useKeyboardVisible: () => useKeyboardVisible });
 module.exports = __toCommonJS(useKeyboardVisible_exports);
 var import_react = __toESM(require("react"), 1);
-var import_react_native = require("react-native-web");
+const KEYBOARD_MIN_HEIGHT = 150;
+const isKeyboardOpen = () => {
+	const viewport = window.visualViewport;
+	if (!viewport) return false;
+	return document.documentElement.clientHeight - viewport.height > KEYBOARD_MIN_HEIGHT;
+};
 const useKeyboardVisible = () => {
 	const [isKeyboardVisible, setKeyboardVisible] = import_react.default.useState(false);
 	import_react.default.useEffect(() => {
-		const keyboardDidShowListener = import_react_native.Keyboard.addListener("keyboardDidShow", () => {
-			setKeyboardVisible(true);
-		});
-		const keyboardDidHideListener = import_react_native.Keyboard.addListener("keyboardDidHide", () => {
-			setKeyboardVisible(false);
-		});
-		return () => {
-			keyboardDidHideListener.remove();
-			keyboardDidShowListener.remove();
-		};
+		const viewport = window.visualViewport;
+		if (!viewport) return;
+		const update = () => setKeyboardVisible(isKeyboardOpen());
+		update();
+		viewport.addEventListener("resize", update);
+		return () => viewport.removeEventListener("resize", update);
 	}, []);
 	return isKeyboardVisible;
 };

package/dist/cjs/useKeyboardVisible.native.cjs

@@ -26,9 +26,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useKeyboardVisible_exports = {};
-__export(useKeyboardVisible_exports, { useKeyboardVisible: () => useKeyboardVisible });
-module.exports = __toCommonJS(useKeyboardVisible_exports);
+var useKeyboardVisible_native_exports = {};
+__export(useKeyboardVisible_native_exports, { useKeyboardVisible: () => useKeyboardVisible });
+module.exports = __toCommonJS(useKeyboardVisible_native_exports);
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
 var useKeyboardVisible = function() {

package/dist/cjs/useKeyboardVisible.native.js

@@ -26,9 +26,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useKeyboardVisible_exports = {};
-__export(useKeyboardVisible_exports, { useKeyboardVisible: () => useKeyboardVisible });
-module.exports = __toCommonJS(useKeyboardVisible_exports);
+var useKeyboardVisible_native_exports = {};
+__export(useKeyboardVisible_native_exports, { useKeyboardVisible: () => useKeyboardVisible });
+module.exports = __toCommonJS(useKeyboardVisible_native_exports);
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
 var useKeyboardVisible = function() {

package/dist/cjs/useKeyboardVisible.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardVisible.native.js","names":[],"sources":["cjs/useKeyboardVisible.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar useKeyboardVisible_exports = {};\n__export(useKeyboardVisible_exports, {\n  useKeyboardVisible: () => useKeyboardVisible\n});\nmodule.exports = __toCommonJS(useKeyboardVisible_exports);\nvar import_react = __toESM(require(\"react\"), 1);\nvar import_react_native = require(\"react-native\");\nvar useKeyboardVisible = function() {\n  var [isKeyboardVisible, setKeyboardVisible] = import_react.default.useState(false);\n  import_react.default.useEffect(function() {\n    var keyboardDidShowListener = import_react_native.Keyboard.addListener(\"keyboardDidShow\", function() {\n      setKeyboardVisible(true);\n    });\n    var keyboardDidHideListener = import_react_native.Keyboard.addListener(\"keyboardDidHide\", function() {\n      setKeyboardVisible(false);\n    });\n    return function() {\n      keyboardDidHideListener.remove();\n      keyboardDidShowListener.remove();\n    };\n  }, []);\n  return isKeyboardVisible;\n};\n//# sourceMappingURL=useKeyboardVisible.js.map\n"],"mappings":";;;AACA,IAAI,WAAW,OAAO;AACtB,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO;AAC1B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,WAAW,KAAK,YAAY,YAAY,SAAS,OAAO,OAAO,SAAS,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,YAKnG,cAAc,CAAC,OAAO,CAAC,IAAI,aAAa,UAAU,QAAQ,WAAW;CAAE,OAAO;CAAK,YAAY;AAAK,CAAC,IAAI,QACzG,GACF;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,6BAA6B,CAAC;AAClC,SAAS,4BAA4B,EACnC,0BAA0B,mBAC5B,CAAC;AACD,OAAO,UAAU,aAAa,0BAA0B;AACxD,IAAI,eAAe,QAAQ,QAAQ,OAAO,GAAG,CAAC;AAC9C,IAAI,sBAAsB,QAAQ,cAAc;AAChD,IAAI,qBAAqB,WAAW;CAClC,IAAI,CAAC,mBAAmB,sBAAsB,aAAa,QAAQ,SAAS,KAAK;CACjF,aAAa,QAAQ,UAAU,WAAW;EACxC,IAAI,0BAA0B,oBAAoB,SAAS,YAAY,mBAAmB,WAAW;GACnG,mBAAmB,IAAI;EACzB,CAAC;EACD,IAAI,0BAA0B,oBAAoB,SAAS,YAAY,mBAAmB,WAAW;GACnG,mBAAmB,KAAK;EAC1B,CAAC;EACD,OAAO,WAAW;GAChB,wBAAwB,OAAO;GAC/B,wBAAwB,OAAO;EACjC;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}
+{"version":3,"file":"useKeyboardVisible.native.js","names":[],"sources":["cjs/useKeyboardVisible.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar useKeyboardVisible_native_exports = {};\n__export(useKeyboardVisible_native_exports, {\n  useKeyboardVisible: () => useKeyboardVisible\n});\nmodule.exports = __toCommonJS(useKeyboardVisible_native_exports);\nvar import_react = __toESM(require(\"react\"), 1);\nvar import_react_native = require(\"react-native\");\nvar useKeyboardVisible = function() {\n  var [isKeyboardVisible, setKeyboardVisible] = import_react.default.useState(false);\n  import_react.default.useEffect(function() {\n    var keyboardDidShowListener = import_react_native.Keyboard.addListener(\"keyboardDidShow\", function() {\n      setKeyboardVisible(true);\n    });\n    var keyboardDidHideListener = import_react_native.Keyboard.addListener(\"keyboardDidHide\", function() {\n      setKeyboardVisible(false);\n    });\n    return function() {\n      keyboardDidHideListener.remove();\n      keyboardDidShowListener.remove();\n    };\n  }, []);\n  return isKeyboardVisible;\n};\n//# sourceMappingURL=useKeyboardVisible.native.js.map\n"],"mappings":";;;AACA,IAAI,WAAW,OAAO;AACtB,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO;AAC1B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,YAAY,QAAQ,QAAQ;CAC9B,KAAK,IAAI,QAAQ,KACf,UAAU,QAAQ,MAAM;EAAE,KAAK,IAAI;EAAO,YAAY;CAAK,CAAC;AAChE;AACA,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,WAAW,KAAK,YAAY,YAAY,SAAS,OAAO,OAAO,SAAS,aAAa,GAAG,CAAC,IAAI,CAAC,GAAG,YAKnG,cAAc,CAAC,OAAO,CAAC,IAAI,aAAa,UAAU,QAAQ,WAAW;CAAE,OAAO;CAAK,YAAY;AAAK,CAAC,IAAI,QACzG,GACF;AACA,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,oCAAoC,CAAC;AACzC,SAAS,mCAAmC,EAC1C,0BAA0B,mBAC5B,CAAC;AACD,OAAO,UAAU,aAAa,iCAAiC;AAC/D,IAAI,eAAe,QAAQ,QAAQ,OAAO,GAAG,CAAC;AAC9C,IAAI,sBAAsB,QAAQ,cAAc;AAChD,IAAI,qBAAqB,WAAW;CAClC,IAAI,CAAC,mBAAmB,sBAAsB,aAAa,QAAQ,SAAS,KAAK;CACjF,aAAa,QAAQ,UAAU,WAAW;EACxC,IAAI,0BAA0B,oBAAoB,SAAS,YAAY,mBAAmB,WAAW;GACnG,mBAAmB,IAAI;EACzB,CAAC;EACD,IAAI,0BAA0B,oBAAoB,SAAS,YAAY,mBAAmB,WAAW;GACnG,mBAAmB,KAAK;EAC1B,CAAC;EACD,OAAO,WAAW;GAChB,wBAAwB,OAAO;GAC/B,wBAAwB,OAAO;EACjC;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}

package/dist/esm/useKeyboardVisible.mjs

@@ -1,19 +1,20 @@
 import React from "react";
-import { Keyboard } from "react-native-web";
 
+const KEYBOARD_MIN_HEIGHT = 150;
+const isKeyboardOpen = () => {
+	const viewport = window.visualViewport;
+	if (!viewport) return false;
+	return document.documentElement.clientHeight - viewport.height > KEYBOARD_MIN_HEIGHT;
+};
 const useKeyboardVisible = () => {
 	const [isKeyboardVisible, setKeyboardVisible] = React.useState(false);
 	React.useEffect(() => {
-		const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
-			setKeyboardVisible(true);
-		});
-		const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
-			setKeyboardVisible(false);
-		});
-		return () => {
-			keyboardDidHideListener.remove();
-			keyboardDidShowListener.remove();
-		};
+		const viewport = window.visualViewport;
+		if (!viewport) return;
+		const update = () => setKeyboardVisible(isKeyboardOpen());
+		update();
+		viewport.addEventListener("resize", update);
+		return () => viewport.removeEventListener("resize", update);
 	}, []);
 	return isKeyboardVisible;
 };

package/dist/esm/useKeyboardVisible.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardVisible.js","names":[],"sources":["esm/useKeyboardVisible.js"],"sourcesContent":["import React from \"react\";\nimport { Keyboard } from \"react-native-web\";\nconst useKeyboardVisible = () => {\n  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false);\n  React.useEffect(() => {\n    const keyboardDidShowListener = Keyboard.addListener(\"keyboardDidShow\", () => {\n      setKeyboardVisible(true);\n    });\n    const keyboardDidHideListener = Keyboard.addListener(\"keyboardDidHide\", () => {\n      setKeyboardVisible(false);\n    });\n    return () => {\n      keyboardDidHideListener.remove();\n      keyboardDidShowListener.remove();\n    };\n  }, []);\n  return isKeyboardVisible;\n};\nexport {\n  useKeyboardVisible\n};\n//# sourceMappingURL=useKeyboardVisible.js.map\n"],"mappings":";;;;AAEA,MAAM,2BAA2B;CAC/B,MAAM,CAAC,mBAAmB,sBAAsB,MAAM,SAAS,KAAK;CACpE,MAAM,gBAAgB;EACpB,MAAM,0BAA0B,SAAS,YAAY,yBAAyB;GAC5E,mBAAmB,IAAI;EACzB,CAAC;EACD,MAAM,0BAA0B,SAAS,YAAY,yBAAyB;GAC5E,mBAAmB,KAAK;EAC1B,CAAC;EACD,aAAa;GACX,wBAAwB,OAAO;GAC/B,wBAAwB,OAAO;EACjC;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}
+{"version":3,"file":"useKeyboardVisible.js","names":[],"sources":["esm/useKeyboardVisible.js"],"sourcesContent":["import React from \"react\";\nconst KEYBOARD_MIN_HEIGHT = 150;\nconst isKeyboardOpen = () => {\n  const viewport = window.visualViewport;\n  if (!viewport) return false;\n  return document.documentElement.clientHeight - viewport.height > KEYBOARD_MIN_HEIGHT;\n};\nconst useKeyboardVisible = () => {\n  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false);\n  React.useEffect(() => {\n    const viewport = window.visualViewport;\n    if (!viewport) return;\n    const update = () => setKeyboardVisible(isKeyboardOpen());\n    update();\n    viewport.addEventListener(\"resize\", update);\n    return () => viewport.removeEventListener(\"resize\", update);\n  }, []);\n  return isKeyboardVisible;\n};\nexport {\n  useKeyboardVisible\n};\n//# sourceMappingURL=useKeyboardVisible.js.map\n"],"mappings":";;;AACA,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;CAC3B,MAAM,WAAW,OAAO;CACxB,IAAI,CAAC,UAAU,OAAO;CACtB,OAAO,SAAS,gBAAgB,eAAe,SAAS,SAAS;AACnE;AACA,MAAM,2BAA2B;CAC/B,MAAM,CAAC,mBAAmB,sBAAsB,MAAM,SAAS,KAAK;CACpE,MAAM,gBAAgB;EACpB,MAAM,WAAW,OAAO;EACxB,IAAI,CAAC,UAAU;EACf,MAAM,eAAe,mBAAmB,eAAe,CAAC;EACxD,OAAO;EACP,SAAS,iBAAiB,UAAU,MAAM;EAC1C,aAAa,SAAS,oBAAoB,UAAU,MAAM;CAC5D,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}

package/dist/esm/useKeyboardVisible.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardVisible.native.js","names":[],"sources":["esm/useKeyboardVisible.native.js"],"sourcesContent":["import React from \"react\";\nimport { Keyboard } from \"react-native\";\nvar useKeyboardVisible = function() {\n  var [isKeyboardVisible, setKeyboardVisible] = React.useState(false);\n  React.useEffect(function() {\n    var keyboardDidShowListener = Keyboard.addListener(\"keyboardDidShow\", function() {\n      setKeyboardVisible(true);\n    });\n    var keyboardDidHideListener = Keyboard.addListener(\"keyboardDidHide\", function() {\n      setKeyboardVisible(false);\n    });\n    return function() {\n      keyboardDidHideListener.remove();\n      keyboardDidShowListener.remove();\n    };\n  }, []);\n  return isKeyboardVisible;\n};\nexport {\n  useKeyboardVisible\n};\n//# sourceMappingURL=useKeyboardVisible.js.map\n"],"mappings":";;;;AAEA,IAAI,qBAAqB,WAAW;CAClC,IAAI,CAAC,mBAAmB,sBAAsB,MAAM,SAAS,KAAK;CAClE,MAAM,UAAU,WAAW;EACzB,IAAI,0BAA0B,SAAS,YAAY,mBAAmB,WAAW;GAC/E,mBAAmB,IAAI;EACzB,CAAC;EACD,IAAI,0BAA0B,SAAS,YAAY,mBAAmB,WAAW;GAC/E,mBAAmB,KAAK;EAC1B,CAAC;EACD,OAAO,WAAW;GAChB,wBAAwB,OAAO;GAC/B,wBAAwB,OAAO;EACjC;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}
+{"version":3,"file":"useKeyboardVisible.native.js","names":[],"sources":["esm/useKeyboardVisible.native.js"],"sourcesContent":["import React from \"react\";\nimport { Keyboard } from \"react-native\";\nvar useKeyboardVisible = function() {\n  var [isKeyboardVisible, setKeyboardVisible] = React.useState(false);\n  React.useEffect(function() {\n    var keyboardDidShowListener = Keyboard.addListener(\"keyboardDidShow\", function() {\n      setKeyboardVisible(true);\n    });\n    var keyboardDidHideListener = Keyboard.addListener(\"keyboardDidHide\", function() {\n      setKeyboardVisible(false);\n    });\n    return function() {\n      keyboardDidHideListener.remove();\n      keyboardDidShowListener.remove();\n    };\n  }, []);\n  return isKeyboardVisible;\n};\nexport {\n  useKeyboardVisible\n};\n//# sourceMappingURL=useKeyboardVisible.native.js.map\n"],"mappings":";;;;AAEA,IAAI,qBAAqB,WAAW;CAClC,IAAI,CAAC,mBAAmB,sBAAsB,MAAM,SAAS,KAAK;CAClE,MAAM,UAAU,WAAW;EACzB,IAAI,0BAA0B,SAAS,YAAY,mBAAmB,WAAW;GAC/E,mBAAmB,IAAI;EACzB,CAAC;EACD,IAAI,0BAA0B,SAAS,YAAY,mBAAmB,WAAW;GAC/E,mBAAmB,KAAK;EAC1B,CAAC;EACD,OAAO,WAAW;GAChB,wBAAwB,OAAO;GAC/B,wBAAwB,OAAO;EACjC;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/use-keyboard-visible",
-  "version": "3.0.0-beta.924.1",
+  "version": "3.0.1",
+  "license": "MIT",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "files": [
     "src",
@@ -34,9 +35,9 @@
     "clean:build": "tamagui-build clean:build"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.924.1",
+    "@tamagui/build": "3.0.1",
     "react": "19.2.3",
-    "react-native": "0.86.2"
+    "react-native": "0.87.1"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -46,5 +47,6 @@
     "type": "git",
     "url": "git+https://github.com/tamagui/tamagui.git",
     "directory": "code/core/use-keyboard-visible"
-  }
+  },
+  "releaseSourceCommit": "c156b7cc55e5a6cc5883ebc8189720850ac32dbd"
 }

package/src/useKeyboardVisible.native.ts

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Keyboard } from 'react-native'
+
+export const useKeyboardVisible = (): boolean => {
+  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false)
+
+  React.useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+      setKeyboardVisible(true)
+    })
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setKeyboardVisible(false)
+    })
+
+    return () => {
+      keyboardDidHideListener.remove()
+      keyboardDidShowListener.remove()
+    }
+  }, [])
+
+  return isKeyboardVisible
+}

package/src/useKeyboardVisible.ts

@@ -1,21 +1,34 @@
 import React from 'react'
-import { Keyboard } from 'react-native'
+
+/**
+ * On mobile web the soft keyboard is not an event, it is a shrunken visual
+ * viewport: the layout viewport stays put and `visualViewport.height` drops by
+ * the height of the keyboard. Anything smaller than that is a scroll or a
+ * pinch, hence the threshold.
+ *
+ * Desktop browsers never shrink it, so this stays false there, which is what
+ * the react-native version reported on web before this file existed.
+ */
+const KEYBOARD_MIN_HEIGHT = 150
+
+const isKeyboardOpen = () => {
+  const viewport = window.visualViewport
+  if (!viewport) return false
+  return document.documentElement.clientHeight - viewport.height > KEYBOARD_MIN_HEIGHT
+}
 
 export const useKeyboardVisible = (): boolean => {
   const [isKeyboardVisible, setKeyboardVisible] = React.useState(false)
 
   React.useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardVisible(true)
-    })
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardVisible(false)
-    })
+    const viewport = window.visualViewport
+    if (!viewport) return
+
+    const update = () => setKeyboardVisible(isKeyboardOpen())
+    update()
 
-    return () => {
-      keyboardDidHideListener.remove()
-      keyboardDidShowListener.remove()
-    }
+    viewport.addEventListener('resize', update)
+    return () => viewport.removeEventListener('resize', update)
   }, [])
 
   return isKeyboardVisible

package/types/useKeyboardVisible.d.ts.map

@@ -1,11 +1,11 @@
 {
-  "mappings": "AAGA,OAAO,cAAM",
+  "mappings": "AAmBA,OAAO,cAAM",
   "names": [],
   "sources": [
     "src/useKeyboardVisible.ts"
   ],
   "version": 3,
   "sourcesContent": [
-    "import React from 'react'\nimport { Keyboard } from 'react-native'\n\nexport const useKeyboardVisible = (): boolean => {\n  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {\n      setKeyboardVisible(true)\n    })\n    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {\n      setKeyboardVisible(false)\n    })\n\n    return () => {\n      keyboardDidHideListener.remove()\n      keyboardDidShowListener.remove()\n    }\n  }, [])\n\n  return isKeyboardVisible\n}\n"
+    "import React from 'react'\n\n/**\n * On mobile web the soft keyboard is not an event, it is a shrunken visual\n * viewport: the layout viewport stays put and `visualViewport.height` drops by\n * the height of the keyboard. Anything smaller than that is a scroll or a\n * pinch, hence the threshold.\n *\n * Desktop browsers never shrink it, so this stays false there, which is what\n * the react-native version reported on web before this file existed.\n */\nconst KEYBOARD_MIN_HEIGHT = 150\n\nconst isKeyboardOpen = () => {\n  const viewport = window.visualViewport\n  if (!viewport) return false\n  return document.documentElement.clientHeight - viewport.height > KEYBOARD_MIN_HEIGHT\n}\n\nexport const useKeyboardVisible = (): boolean => {\n  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    const viewport = window.visualViewport\n    if (!viewport) return\n\n    const update = () => setKeyboardVisible(isKeyboardOpen())\n    update()\n\n    viewport.addEventListener('resize', update)\n    return () => viewport.removeEventListener('resize', update)\n  }, [])\n\n  return isKeyboardVisible\n}\n"
   ]
 }

package/types/useKeyboardVisible.native.d.ts

@@ -0,0 +1,3 @@
+export declare const useKeyboardVisible: () => boolean;
+
+//# sourceMappingURL=useKeyboardVisible.native.d.ts.map

package/types/useKeyboardVisible.native.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAGA,OAAO,cAAM",
+  "names": [],
+  "sources": [
+    "src/useKeyboardVisible.native.ts"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "import React from 'react'\nimport { Keyboard } from 'react-native'\n\nexport const useKeyboardVisible = (): boolean => {\n  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false)\n\n  React.useEffect(() => {\n    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {\n      setKeyboardVisible(true)\n    })\n    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {\n      setKeyboardVisible(false)\n    })\n\n    return () => {\n      keyboardDidHideListener.remove()\n      keyboardDidShowListener.remove()\n    }\n  }, [])\n\n  return isKeyboardVisible\n}\n"
+  ]
+}