react-native-keyboard-toolkit 1.0.0 → 1.0.2

package/src/hooks/useKeyboardState.ts

@@ -1,14 +1,21 @@
-import { useSyncExternalStore } from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
 import {
   getKeyboardState,
   subscribeKeyboardState,
+  synchronizeKeyboardState,
 } from '../utils/keyboardEvents';
 
 /** Subscribe to the shared, normalized keyboard state. A provider is optional. */
-export function useKeyboardState() {
-  return useSyncExternalStore(
+export function useKeyboardState(options: { isFocused?: boolean } = {}) {
+  const keyboard = useSyncExternalStore(
     subscribeKeyboardState,
     getKeyboardState,
     getKeyboardState,
   );
+
+  useEffect(() => {
+    synchronizeKeyboardState(options.isFocused !== false);
+  }, [options.isFocused]);
+
+  return keyboard;
 }

package/src/types/index.ts

@@ -49,15 +49,19 @@ export interface KeyboardAwareScrollViewProps extends ScrollViewProps {
   keyboardSpacing?: number;
   /** Disable keyboard-driven padding and focus scrolling. */
   enabled?: boolean;
+  /** Pass the navigation focus state to resync keyboard metrics on refocus. */
+  isFocused?: boolean;
 }
 
 export interface KeyboardAwareViewProps extends ViewProps {
-  /** Defaults to `smart`. `resize` relies on the platform window resize behavior. */
+  /** Defaults to `smart`; absolute-positioned views are moved above the keyboard. */
   behavior?: KeyboardBehavior;
   /** Extra space between the view content and the keyboard, in points. */
   keyboardSpacing?: number;
   /** Disable keyboard-driven layout changes. */
   enabled?: boolean;
+  /** Pass the navigation focus state to resync keyboard metrics on refocus. */
+  isFocused?: boolean;
 }
 
 export interface KeyboardProviderProps {

package/src/utils/keyboardEvents.ts

@@ -1,4 +1,6 @@
 import {
+  AppState,
+  Dimensions,
   Keyboard,
   type KeyboardEvent,
   type EmitterSubscription,
@@ -18,9 +20,23 @@ let state = initialState;
 let listeners: EmitterSubscription[] = [];
 const subscribers = new Set<() => void>();
 
+function publish(nextState: KeyboardState): void {
+  if (
+    state.isVisible === nextState.isVisible &&
+    state.height === nextState.height &&
+    state.progress === nextState.progress &&
+    state.animationDuration === nextState.animationDuration &&
+    state.screenY === nextState.screenY
+  ) {
+    return;
+  }
+  state = nextState;
+  subscribers.forEach(subscriber => subscriber());
+}
+
 function update(event: KeyboardEvent, visible: boolean): void {
   const coordinates = event.endCoordinates;
-  state = {
+  publish({
     isVisible: visible,
     height: visible ? Math.max(0, coordinates?.height ?? 0) : 0,
     progress: visible ? 1 : 0,
@@ -31,29 +47,39 @@ function update(event: KeyboardEvent, visible: boolean): void {
     ...(visible && typeof coordinates?.screenY === 'number'
       ? { screenY: coordinates.screenY }
       : {}),
-  };
-  subscribers.forEach(subscriber => subscriber());
+  });
+}
+
+function resetKeyboardState(): void {
+  publish(initialState);
 }
 
-function syncCurrentKeyboardState(): void {
+/** Reconcile the shared snapshot with the platform's current keyboard metrics. */
+export function synchronizeKeyboardState(isFocused = true): void {
+  if (!isFocused) {
+    resetKeyboardState();
+    return;
+  }
+
   const metrics =
     typeof Keyboard.metrics === 'function' ? Keyboard.metrics() : undefined;
   const isVisible =
     typeof Keyboard.isVisible === 'function'
       ? Keyboard.isVisible()
       : metrics != null;
+
   if (!isVisible || !metrics) {
+    resetKeyboardState();
     return;
   }
 
-  state = {
+  publish({
     isVisible: true,
     height: metrics.height,
     progress: 1,
     animationDuration: 0,
     screenY: metrics.screenY,
-  };
-  subscribers.forEach(subscriber => subscriber());
+  });
 }
 
 function startListening(): void {
@@ -64,23 +90,39 @@ function startListening(): void {
         update(event, event.endCoordinates.height > 0),
       ),
     ];
-    syncCurrentKeyboardState();
-    return;
+  } else {
+    const showSubscription = Keyboard.addListener(names.show, event =>
+      update(event, true),
+    );
+    const hideSubscription = Keyboard.addListener(names.hide, event =>
+      update(event, false),
+    );
+    listeners = [showSubscription, hideSubscription];
   }
 
-  const showSubscription = Keyboard.addListener(names.show, event =>
-    update(event, true),
+  listeners.push(
+    AppState.addEventListener('change', nextState => {
+      if (nextState === 'active') {
+        synchronizeKeyboardState();
+      } else {
+        resetKeyboardState();
+      }
+    }),
   );
-  const hideSubscription = Keyboard.addListener(names.hide, event =>
-    update(event, false),
+  listeners.push(
+    Dimensions.addEventListener('change', () => {
+      if (typeof Keyboard.metrics === 'function') {
+        synchronizeKeyboardState();
+      }
+    }),
   );
-  listeners = [showSubscription, hideSubscription];
-  syncCurrentKeyboardState();
+  synchronizeKeyboardState();
 }
 
 function stopListening(): void {
   listeners.forEach(subscription => subscription.remove());
   listeners = [];
+  resetKeyboardState();
 }
 
 /** Subscribe to the shared keyboard event stream. */

package/src/utils/scrollManager.ts

@@ -13,6 +13,18 @@ export interface ScrollCalculation {
   delta: number;
 }
 
+/** Return how far a bottom edge must move to clear the keyboard and spacing. */
+export function calculateKeyboardDisplacement(
+  viewport: ScrollViewport,
+  keyboardTop: number,
+  spacing: number,
+): number {
+  return Math.max(
+    0,
+    viewport.y + viewport.height - keyboardTop + Math.max(0, spacing),
+  );
+}
+
 /** Return the part of the measured view actually covered by the keyboard. */
 export function calculateKeyboardOverlap(
   viewport: ScrollViewport,