react-native-keyboard-toolkit 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project are documented here.
 
+## 1.0.2 - 2026-11-14
+
+- Fix: stale keyboard height / blank space remaining after going back with the keyboard open and returning to the screen.
+
 ## 1.0.1 - 2026-11-05
 
 - Fix absolutely positioned `KeyboardAwareView` footers remaining behind the

package/README.md

@@ -48,8 +48,12 @@ export function ContactForm() {
   return (
     <KeyboardAwareScrollView
       keyboardShouldPersistTaps="handled"
-      keyboardSpacing={16}
-      contentContainerStyle={{ padding: 20 }}
+      keyboardDismissMode="interactive"
+      behavior="smart"
+      keyboardSpacing={100}
+      contentContainerStyle={{
+        flexGrow: 1,
+      }}
     >
       <TextInput placeholder="Name" />
       <TextInput placeholder="Email" keyboardType="email-address" />
@@ -76,7 +80,7 @@ export function StickyForm() {
     <View style={{ flex: 1 }}>
       <KeyboardAwareScrollView
         keyboardShouldPersistTaps="handled"
-        keyboardSpacing={112} // leave room for the footer
+        keyboardSpacing={100} // leave room for the footer
         contentContainerStyle={{ padding: 20, paddingBottom: 96 }}
       >
         <TextInput placeholder="Name" />
@@ -145,15 +149,16 @@ export function SignUpForm() {
 
 Accepts all `ScrollView` props, forwards its ref to the `ScrollView`, and adds:
 
-| Prop              | Type                                                     | Default   | Description                                                                          |
-| ----------------- | -------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------ |
-| `behavior`        | `'smart' \| 'scroll' \| 'resize' \| 'padding' \| 'none'` | `'smart'` | See [Behaviors](#behaviors).                                                         |
-| `keyboardSpacing` | `number`                                                 | `16`      | Gap (points) between the focused input and the keyboard. Negative values become `0`. |
-| `enabled`         | `boolean`                                                | `true`    | Turns keyboard padding and focus scrolling on or off.                                |
+| Prop              | Type                                                     | Default   | Description                                                                            |
+| ----------------- | -------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------- |
+| `behavior`        | `'smart' \| 'scroll' \| 'resize' \| 'padding' \| 'none'` | `'smart'` | See [Behaviors](#behaviors).                                                           |
+| `keyboardSpacing` | `number`                                                 | `16`      | Gap (points) between the focused input and the keyboard. Negative values become `0`.   |
+| `enabled`         | `boolean`                                                | `true`    | Turns keyboard padding and focus scrolling on or off.                                  |
+| `isFocused`       | `boolean`                                                | –         | Optional navigation focus state; resets on blur and resyncs keyboard metrics on focus. |
 
 ### `KeyboardAwareView`
 
-Accepts all `View` props, forwards its ref to the native view, and supports `behavior`, `keyboardSpacing` (default `16`), and `enabled`.
+Accepts all `View` props, forwards its ref to the native view, and supports `behavior`, `keyboardSpacing` (default `16`), `enabled`, and optional `isFocused` navigation state.
 
 - **Normal layout:** adds bottom padding equal to the part of the view covered by the keyboard.
 - **`position: 'absolute'`:** animates the view up so it clears the keyboard plus `keyboardSpacing`.
@@ -216,11 +221,24 @@ const { focusedInput, refresh } = useFocusedInput();
 // focusedInput: { x, y, width, height } in window coordinates, or null
 ```
 
-| Hook                     | Returns                                                                                   |
-| ------------------------ | ----------------------------------------------------------------------------------------- |
-| `useKeyboardState()`     | `{ isVisible, height, progress (0 \| 1), animationDuration, screenY? }`                   |
-| `useKeyboardAnimation()` | `{ progress: Animated.Value, animationDuration }`                                         |
-| `useFocusedInput()`      | `{ focusedInput, refresh }` – the focused input's layout, and a function to re-measure it |
+For a screen that stays mounted in a navigation stack, pass its focus state to
+both keyboard-aware components. This does not add a React Navigation dependency
+to the toolkit:
+
+```tsx
+const isFocused = useIsFocused(); // from @react-navigation/native
+
+<KeyboardAwareScrollView isFocused={isFocused}>...</KeyboardAwareScrollView>
+<KeyboardAwareView isFocused={isFocused} style={footerStyle}>
+  ...
+</KeyboardAwareView>
+```
+
+| Hook                               | Returns                                                                                   |
+| ---------------------------------- | ----------------------------------------------------------------------------------------- |
+| `useKeyboardState({ isFocused? })` | `{ isVisible, height, progress (0 \| 1), animationDuration, screenY? }`                   |
+| `useKeyboardAnimation()`           | `{ progress: Animated.Value, animationDuration }`                                         |
+| `useFocusedInput()`                | `{ focusedInput, refresh }` – the focused input's layout, and a function to re-measure it |
 
 Example: animate a view with the keyboard.
 
@@ -250,6 +268,18 @@ function FadeWithKeyboard({ children }: { children: React.ReactNode }) {
 - Use only one keyboard-spacing component per region to avoid adding space twice.
 - Keyboard coordinates can differ across devices, edge-to-edge modes, and modals — test on the devices you support.
 
+## Troubleshooting
+
+The stale keyboard-height / blank-space issue after navigating away with the
+keyboard open and returning is fixed in **1.0.2**. For stack screens that stay
+mounted, pass `useIsFocused()` to both `KeyboardAwareScrollView` and
+`KeyboardAwareView` so the state is reconciled on focus.
+
+Manual check: focus a Screen A field, select **Go to Screen B**, then use
+Screen B's **Back** button. Repeat with a fast transition and with the app
+backgrounded while the keyboard is open. Screen A should return with no
+keyboard-sized gap and its sticky button at the original position.
+
 More guides: [Installation](docs/installation.md) · [API](docs/api.md) · [Android](docs/android.md) · [iOS](docs/ios.md) · [Troubleshooting](docs/troubleshooting.md)
 
 ## License

package/dist/components/KeyboardAwareScrollView.js

@@ -11,8 +11,8 @@ const useKeyboardState_1 = require("../hooks/useKeyboardState");
 const constants_1 = require("../utils/constants");
 const platform_1 = require("../utils/platform");
 /** A ScrollView that adds keyboard space and scrolls a covered focused input into view. */
-exports.KeyboardAwareScrollView = (0, react_1.forwardRef)(function KeyboardAwareScrollViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, contentContainerStyle, onScroll, onScrollBeginDrag, onContentSizeChange, onLayout, onFocusCapture, scrollEventThrottle = 16, ...props }, forwardedRef) {
-    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+exports.KeyboardAwareScrollView = (0, react_1.forwardRef)(function KeyboardAwareScrollViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, isFocused, contentContainerStyle, onScroll, onScrollBeginDrag, onContentSizeChange, onLayout, onFocusCapture, scrollEventThrottle = 16, ...props }, forwardedRef) {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)({ isFocused });
     const debug = (0, KeyboardContext_1.useKeyboardDebug)();
     const scrollRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(forwardedRef, () => scrollRef.current, []);

package/dist/components/KeyboardAwareView.js

@@ -8,8 +8,8 @@ const constants_1 = require("../utils/constants");
 const useKeyboardState_1 = require("../hooks/useKeyboardState");
 const scrollManager_1 = require("../utils/scrollManager");
 /** Adds keyboard spacing to in-flow content and keeps absolute footers visible. */
-exports.KeyboardAwareView = (0, react_1.forwardRef)(function KeyboardAwareViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, style, onLayout, ...props }, forwardedRef) {
-    const keyboard = (0, useKeyboardState_1.useKeyboardState)();
+exports.KeyboardAwareView = (0, react_1.forwardRef)(function KeyboardAwareViewComponent({ behavior = 'smart', keyboardSpacing = constants_1.DEFAULT_KEYBOARD_SPACING, enabled = true, isFocused, style, onLayout, ...props }, forwardedRef) {
+    const keyboard = (0, useKeyboardState_1.useKeyboardState)({ isFocused });
     const viewRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(forwardedRef, () => viewRef.current, []);
     const measurementSequence = (0, react_1.useRef)(0);

package/dist/hooks/useKeyboardState.d.ts

@@ -1,2 +1,4 @@
 /** Subscribe to the shared, normalized keyboard state. A provider is optional. */
-export declare function useKeyboardState(): import("..").KeyboardState;
+export declare function useKeyboardState(options?: {
+    isFocused?: boolean;
+}): import("..").KeyboardState;

package/dist/hooks/useKeyboardState.js

@@ -4,6 +4,10 @@ exports.useKeyboardState = useKeyboardState;
 const react_1 = require("react");
 const keyboardEvents_1 = require("../utils/keyboardEvents");
 /** Subscribe to the shared, normalized keyboard state. A provider is optional. */
-function useKeyboardState() {
-    return (0, react_1.useSyncExternalStore)(keyboardEvents_1.subscribeKeyboardState, keyboardEvents_1.getKeyboardState, keyboardEvents_1.getKeyboardState);
+function useKeyboardState(options = {}) {
+    const keyboard = (0, react_1.useSyncExternalStore)(keyboardEvents_1.subscribeKeyboardState, keyboardEvents_1.getKeyboardState, keyboardEvents_1.getKeyboardState);
+    (0, react_1.useEffect)(() => {
+        (0, keyboardEvents_1.synchronizeKeyboardState)(options.isFocused !== false);
+    }, [options.isFocused]);
+    return keyboard;
 }

package/dist/types/index.d.ts

@@ -21,6 +21,8 @@ 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`; absolute-positioned views are moved above the keyboard. */
@@ -29,6 +31,8 @@ export interface KeyboardAwareViewProps extends ViewProps {
     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 {
     children: ReactNode;

package/dist/utils/keyboardEvents.d.ts

@@ -1,4 +1,6 @@
 import type { KeyboardState } from '../types';
+/** Reconcile the shared snapshot with the platform's current keyboard metrics. */
+export declare function synchronizeKeyboardState(isFocused?: boolean): void;
 /** Subscribe to the shared keyboard event stream. */
 export declare function subscribeKeyboardState(subscriber: () => void): () => void;
 /** Return the stable current snapshot used by `useSyncExternalStore`. */

package/dist/utils/keyboardEvents.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.synchronizeKeyboardState = synchronizeKeyboardState;
 exports.subscribeKeyboardState = subscribeKeyboardState;
 exports.getKeyboardState = getKeyboardState;
 exports.resetKeyboardStateForTests = resetKeyboardStateForTests;
@@ -15,9 +16,20 @@ const initialState = {
 let state = initialState;
 let listeners = [];
 const subscribers = new Set();
+function publish(nextState) {
+    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, visible) {
     const coordinates = event.endCoordinates;
-    state = {
+    publish({
         isVisible: visible,
         height: visible ? Math.max(0, coordinates?.height ?? 0) : 0,
         progress: visible ? 1 : 0,
@@ -25,25 +37,32 @@ function update(event, visible) {
         ...(visible && typeof coordinates?.screenY === 'number'
             ? { screenY: coordinates.screenY }
             : {}),
-    };
-    subscribers.forEach(subscriber => subscriber());
+    });
 }
-function syncCurrentKeyboardState() {
+function resetKeyboardState() {
+    publish(initialState);
+}
+/** Reconcile the shared snapshot with the platform's current keyboard metrics. */
+function synchronizeKeyboardState(isFocused = true) {
+    if (!isFocused) {
+        resetKeyboardState();
+        return;
+    }
     const metrics = typeof react_native_1.Keyboard.metrics === 'function' ? react_native_1.Keyboard.metrics() : undefined;
     const isVisible = typeof react_native_1.Keyboard.isVisible === 'function'
         ? react_native_1.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() {
     const names = (0, platform_1.getKeyboardEventNames)();
@@ -51,17 +70,31 @@ function startListening() {
         listeners = [
             react_native_1.Keyboard.addListener(names.frameChange, event => update(event, event.endCoordinates.height > 0)),
         ];
-        syncCurrentKeyboardState();
-        return;
     }
-    const showSubscription = react_native_1.Keyboard.addListener(names.show, event => update(event, true));
-    const hideSubscription = react_native_1.Keyboard.addListener(names.hide, event => update(event, false));
-    listeners = [showSubscription, hideSubscription];
-    syncCurrentKeyboardState();
+    else {
+        const showSubscription = react_native_1.Keyboard.addListener(names.show, event => update(event, true));
+        const hideSubscription = react_native_1.Keyboard.addListener(names.hide, event => update(event, false));
+        listeners = [showSubscription, hideSubscription];
+    }
+    listeners.push(react_native_1.AppState.addEventListener('change', nextState => {
+        if (nextState === 'active') {
+            synchronizeKeyboardState();
+        }
+        else {
+            resetKeyboardState();
+        }
+    }));
+    listeners.push(react_native_1.Dimensions.addEventListener('change', () => {
+        if (typeof react_native_1.Keyboard.metrics === 'function') {
+            synchronizeKeyboardState();
+        }
+    }));
+    synchronizeKeyboardState();
 }
 function stopListening() {
     listeners.forEach(subscription => subscription.remove());
     listeners = [];
+    resetKeyboardState();
 }
 /** Subscribe to the shared keyboard event stream. */
 function subscribeKeyboardState(subscriber) {

package/docs/api.md

@@ -11,6 +11,9 @@ Extends React Native `ScrollViewProps`.
   none disables keyboard adjustment.
 - `keyboardSpacing?: number` (default `16`): spacing in points.
 - `enabled?: boolean` (default `true`): disable keyboard adjustments.
+- `isFocused?: boolean`: optional navigation focus state. Pass `useIsFocused()`
+  from React Navigation to clear state on blur and resync native keyboard
+  metrics on focus; the library does not depend on React Navigation.
 
 The component measures its viewport and the focused native input. It adds
 scrollable bottom space based on measured viewport/keyboard-frame overlap,
@@ -20,7 +23,9 @@ underlying React Native `ScrollView`.
 
 ## `KeyboardAwareView`
 
-Extends `ViewProps`. Supports `behavior`, `keyboardSpacing`, and `enabled`.
+Extends `ViewProps`. Supports `behavior`, `keyboardSpacing`, `enabled`, and
+`isFocused` (with the same optional navigation integration as
+`KeyboardAwareScrollView`).
 Smart, scroll, and padding add bottom padding for the measured overlap. Resize
 and none do not adjust the layout. When `style.position` is `absolute`, the
 component animates the view upward by the distance from its measured bottom
@@ -59,8 +64,10 @@ before keyboard dismissal.
 
 ## Hooks
 
-- `useKeyboardState()` and its alias `useKeyboard()` return a stable
+- `useKeyboardState({ isFocused? })` and its alias `useKeyboard()` return a stable
   `KeyboardState`: `{ isVisible, height, progress, animationDuration, screenY? }`.
+  The optional focus flag resets state when false and re-reads current keyboard
+  metrics when true.
 - `useKeyboardAnimation()` returns `{ progress: Animated.Value,
 animationDuration }`.
 - `useFocusedInput()` returns `{ focusedInput, refresh }`; the layout is

package/docs/troubleshooting.md

@@ -42,3 +42,30 @@ scroll view both respond to the same keyboard state; disable one with
 Place the scroll view inside the modal content and verify the modal's measured
 window frame. Presentation styles and window insets vary; test on the target
 platform rather than assuming the main screen's coordinates apply to a modal.
+
+## A navigation screen returns with stale keyboard spacing
+
+The shared keyboard state is reset when its last subscriber unmounts and is
+reconciled with `Keyboard.isVisible()` / `Keyboard.metrics()` when subscribers
+mount or the app returns to the foreground. For stack screens that stay mounted,
+pass the route's focus state to both aware components:
+
+```tsx
+const isFocused = useIsFocused();
+
+<KeyboardAwareScrollView isFocused={isFocused}>...</KeyboardAwareScrollView>
+<KeyboardAwareView isFocused={isFocused}>...</KeyboardAwareView>
+```
+
+`useIsFocused` comes from React Navigation; the toolkit itself does not require
+that package. Verify the lifecycle manually:
+
+1. Open the navigation regression demo, focus the Screen A input, and wait for
+   the scroll padding and sticky action to move.
+2. Press **Dismiss + open Screen B**, then **Go back to Screen A** without
+   focusing another input. The keyboard height and spacing should be zero.
+3. Repeat with a rapid navigation press and, on iOS, a cancelled swipe-back.
+4. Background and foreground the app while the keyboard is open; verify offsets
+   reflect the keyboard state after returning.
+5. Rotate the device or resize an Android split-screen window and check that
+   layout measurements are recalculated.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-toolkit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Keyboard-aware scrolling, views, sticky form actions, and keyboard hooks for React Native on iOS and Android.",
   "author": "Denish Dabhi <dabhidenish57@gmail.com>",
   "license": "MIT",

package/src/components/KeyboardAwareScrollView.tsx

@@ -28,6 +28,7 @@ export const KeyboardAwareScrollView: React.ForwardRefExoticComponent<
       behavior = 'smart',
       keyboardSpacing = DEFAULT_KEYBOARD_SPACING,
       enabled = true,
+      isFocused,
       contentContainerStyle,
       onScroll,
       onScrollBeginDrag,
@@ -39,7 +40,7 @@ export const KeyboardAwareScrollView: React.ForwardRefExoticComponent<
     },
     forwardedRef,
   ): React.JSX.Element {
-    const keyboard = useKeyboardState();
+    const keyboard = useKeyboardState({ isFocused });
     const debug = useKeyboardDebug();
     const scrollRef = useRef<KeyboardAwareScrollViewRef>(null);
     useImperativeHandle(forwardedRef, () => scrollRef.current!, []);

package/src/components/KeyboardAwareView.tsx

@@ -25,13 +25,14 @@ export const KeyboardAwareView: React.ForwardRefExoticComponent<
       behavior = 'smart',
       keyboardSpacing = DEFAULT_KEYBOARD_SPACING,
       enabled = true,
+      isFocused,
       style,
       onLayout,
       ...props
     },
     forwardedRef,
   ): React.JSX.Element {
-    const keyboard = useKeyboardState();
+    const keyboard = useKeyboardState({ isFocused });
     const viewRef = useRef<KeyboardAwareViewRef>(null);
     useImperativeHandle(forwardedRef, () => viewRef.current!, []);
     const measurementSequence = useRef(0);

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,6 +49,8 @@ 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 {
@@ -58,6 +60,8 @@ export interface KeyboardAwareViewProps extends ViewProps {
   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. */