react-native-earl-accessory-view 1.0.0

package/dist/useKeyboardAccessory.d.ts

@@ -0,0 +1,18 @@
+import { UseKeyboardAccessoryOptions, KeyboardAccessoryState } from "./types";
+/**
+ * Hook that manages keyboard visibility and height.
+ *
+ * Cross-platform:
+ * - iOS: uses `keyboardWillShow` / `keyboardWillHide` for pre-animation sync.
+ * - Android: uses `keyboardDidShow` / `keyboardDidHide`.
+ * - Web: falls back to `resize` event via React Native's Keyboard API.
+ *
+ * Initializes with the current global keyboard state so that mounting
+ * while the keyboard is already visible works correctly (e.g. when
+ * switching between input fields).
+ *
+ * @param options - Configuration for callbacks.
+ * @returns Current keyboard state.
+ */
+export declare const useKeyboardAccessory: (options?: UseKeyboardAccessoryOptions) => KeyboardAccessoryState;
+//# sourceMappingURL=useKeyboardAccessory.d.ts.map

package/dist/useKeyboardAccessory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardAccessory.d.ts","sourceRoot":"","sources":["../src/useKeyboardAccessory.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAyC9E;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,oBAAoB,GAChC,UAAS,2BAAgC,KACvC,sBAyDF,CAAC"}

package/dist/useKeyboardAccessory.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardAccessory = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+// ─── Global keyboard state tracker ─────────────────────────────────
+// Tracks keyboard state at module level so that newly mounted hooks
+// (e.g. when switching between inputs without closing the keyboard)
+// can immediately know whether the keyboard is already visible.
+let _globalKeyboardVisible = false;
+let _globalKeyboardHeight = 0;
+let _globalListenerCount = 0;
+let _globalShowSub = null;
+let _globalHideSub = null;
+function _startGlobalTracking() {
+    if (_globalListenerCount === 0) {
+        const showEvent = react_native_1.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+        const hideEvent = react_native_1.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+        _globalShowSub = react_native_1.Keyboard.addListener(showEvent, (e) => {
+            _globalKeyboardVisible = true;
+            _globalKeyboardHeight = e.endCoordinates.height;
+        });
+        _globalHideSub = react_native_1.Keyboard.addListener(hideEvent, () => {
+            _globalKeyboardVisible = false;
+            _globalKeyboardHeight = 0;
+        });
+    }
+    _globalListenerCount++;
+}
+function _stopGlobalTracking() {
+    _globalListenerCount--;
+    if (_globalListenerCount === 0) {
+        _globalShowSub === null || _globalShowSub === void 0 ? void 0 : _globalShowSub.remove();
+        _globalHideSub === null || _globalHideSub === void 0 ? void 0 : _globalHideSub.remove();
+        _globalShowSub = null;
+        _globalHideSub = null;
+    }
+}
+/**
+ * Hook that manages keyboard visibility and height.
+ *
+ * Cross-platform:
+ * - iOS: uses `keyboardWillShow` / `keyboardWillHide` for pre-animation sync.
+ * - Android: uses `keyboardDidShow` / `keyboardDidHide`.
+ * - Web: falls back to `resize` event via React Native's Keyboard API.
+ *
+ * Initializes with the current global keyboard state so that mounting
+ * while the keyboard is already visible works correctly (e.g. when
+ * switching between input fields).
+ *
+ * @param options - Configuration for callbacks.
+ * @returns Current keyboard state.
+ */
+const useKeyboardAccessory = (options = {}) => {
+    const { onKeyboardShow, onKeyboardHide } = options;
+    // Use refs for callbacks so the effect never re-subscribes listeners
+    const onShowRef = (0, react_1.useRef)(onKeyboardShow);
+    const onHideRef = (0, react_1.useRef)(onKeyboardHide);
+    onShowRef.current = onKeyboardShow;
+    onHideRef.current = onKeyboardHide;
+    const [keyboardVisible, setKeyboardVisible] = (0, react_1.useState)(_globalKeyboardVisible);
+    const [keyboardHeight, setKeyboardHeight] = (0, react_1.useState)(_globalKeyboardHeight);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        _startGlobalTracking();
+        // Sync if keyboard was already visible when this hook mounted
+        if (_globalKeyboardVisible) {
+            setKeyboardVisible(true);
+            setKeyboardHeight(_globalKeyboardHeight);
+            (_a = onShowRef.current) === null || _a === void 0 ? void 0 : _a.call(onShowRef, _globalKeyboardHeight);
+        }
+        const showEvent = react_native_1.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+        const hideEvent = react_native_1.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+        const handleShow = (event) => {
+            var _a;
+            const h = event.endCoordinates.height;
+            setKeyboardVisible(true);
+            setKeyboardHeight(h);
+            (_a = onShowRef.current) === null || _a === void 0 ? void 0 : _a.call(onShowRef, h);
+        };
+        const handleHide = () => {
+            var _a;
+            setKeyboardVisible(false);
+            setKeyboardHeight(0);
+            (_a = onHideRef.current) === null || _a === void 0 ? void 0 : _a.call(onHideRef);
+        };
+        const showSub = react_native_1.Keyboard.addListener(showEvent, handleShow);
+        const hideSub = react_native_1.Keyboard.addListener(hideEvent, handleHide);
+        return () => {
+            showSub.remove();
+            hideSub.remove();
+            _stopGlobalTracking();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return {
+        keyboardVisible,
+        keyboardHeight,
+    };
+};
+exports.useKeyboardAccessory = useKeyboardAccessory;
+//# sourceMappingURL=useKeyboardAccessory.js.map

package/dist/useKeyboardAccessory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardAccessory.js","sourceRoot":"","sources":["../src/useKeyboardAccessory.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "react-native-earl-accessory-view",
+	"version": "1.0.0",
+	"description": "A fully customizable React Native keyboard accessory view that appears above the keyboard. Supports text positioning, dismiss button, character counter, animations, and custom content. Works on Android, iOS, and Web.",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist/",
+		"README.md",
+		"LICENSE"
+	],
+	"scripts": {
+		"build": "tsc",
+		"prepare": "tsc",
+		"clean": "rimraf dist"
+	},
+	"keywords": [
+		"react-native",
+		"keyboard",
+		"accessory",
+		"accessory-view",
+		"keyboard-accessory",
+		"input-accessory",
+		"keyboard-toolbar",
+		"keyboard-bar",
+		"customizable",
+		"ios",
+		"android",
+		"web",
+		"cross-platform"
+	],
+	"author": "ORDOVEZ, E,R",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ordovez-er/react-native-earl-accessory-view"
+	},
+	"bugs": {
+		"url": "https://github.com/ordovez-er/react-native-earl-accessory-view/issues"
+	},
+	"homepage": "https://github.com/ordovez-er/react-native-earl-accessory-view#readme",
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-native": ">=0.60.0"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.0",
+		"@types/react-native": "^0.72.0",
+		"typescript": "^5.3.0"
+	}
+}