react-native-keyboard-controller 1.17.4 → 1.18.0

package/lib/typescript/views/KeyboardExtender/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { KeyboardExtenderProps } from "../../types";
+import type { PropsWithChildren } from "react";
+/**
+ * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
+ *
+ * @param props - Component props.
+ * @returns A view component that renders inside the keyboard above all system buttons.
+ * @example
+ * ```tsx
+ * <KeyboardExtender>
+ *   <Button>10$</Button>
+ *   <Button>20$</Button>
+ *   <Button>50$</Button>
+ * </KeyboardExtender>
+ * ```
+ */
+declare const KeyboardExtender: (props: PropsWithChildren<KeyboardExtenderProps>) => React.JSX.Element;
+export default KeyboardExtender;

package/lib/typescript/views/KeyboardExtender/index.ios.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { KeyboardExtenderProps } from "../../types";
+import type { PropsWithChildren } from "react";
+/**
+ * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
+ *
+ * @param props - Component props.
+ * @returns A view component that renders inside the keyboard above all system buttons.
+ * @example
+ * ```tsx
+ * <KeyboardExtender>
+ *   <Button>10$</Button>
+ *   <Button>20$</Button>
+ *   <Button>50$</Button>
+ * </KeyboardExtender>
+ * ```
+ */
+declare const KeyboardExtender: (props: PropsWithChildren<KeyboardExtenderProps>) => React.JSX.Element;
+export default KeyboardExtender;

package/lib/typescript/views/index.d.ts

@@ -1 +1,2 @@
 export { default as OverKeyboardView } from "./OverKeyboardView";
+export { default as KeyboardExtender } from "./KeyboardExtender";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.17.4",
+  "version": "1.18.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -60,11 +60,13 @@
     "avoid keyboard",
     "sticky view",
     "over keyboard view",
+    "keyboard background view",
     "keyboard aware scroll view",
     "keyboard toolbar",
     "keyboard done button",
     "keyboard next button",
     "keyboard previous button",
+    "extend keyboard",
     "ios",
     "android"
   ],
@@ -79,7 +81,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "react-native-is-edge-to-edge": "^1.1.6"
+    "react-native-is-edge-to-edge": "^1.2.1"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
@@ -180,7 +182,9 @@
       "componentProvider": {
         "KeyboardControllerView": "KeyboardControllerView",
         "KeyboardGestureArea": "KeyboardGestureArea",
-        "OverKeyboardView": "OverKeyboardView"
+        "OverKeyboardView": "OverKeyboardView",
+        "KeyboardBackgroundView": "KeyboardBackgroundView",
+        "KeyboardExtender": "KeyboardExtender"
       }
     }
   }

package/react-native.config.js

@@ -6,6 +6,7 @@ module.exports = {
           "KeyboardControllerViewComponentDescriptor",
           "KeyboardGestureAreaComponentDescriptor",
           "OverKeyboardViewComponentDescriptor",
+          "KeyboardBackgroundViewComponentDescriptor",
         ],
         cmakeListsPath: "../android/src/main/jni/CMakeLists.txt",
       },

package/src/animated.tsx

@@ -1,5 +1,5 @@
 /* eslint react/jsx-sort-props: off */
-import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Platform, StyleSheet } from "react-native";
 import {
   controlEdgeToEdgeValues,
@@ -11,7 +11,7 @@ import { KeyboardControllerView } from "./bindings";
 import { KeyboardContext } from "./context";
 import { focusedInputEventsMap, keyboardEventsMap } from "./event-mappings";
 import { useAnimatedValue, useEventHandlerRegistration } from "./internal";
-import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
+import { KeyboardController } from "./module";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
@@ -83,6 +83,13 @@ type KeyboardProviderProps = {
    * Defaults to `true`.
    */
   enabled?: boolean;
+  /**
+   * A boolean prop indicating whether to preload the keyboard to reduce time-to-interaction (TTI) on first input focus.
+   * Defaults to `true`.
+   *
+   * @platform ios
+   */
+  preload?: boolean;
 };
 
 // capture `Platform.OS` in separate variable to avoid deep workletization of entire RN package
@@ -110,6 +117,7 @@ export const KeyboardProvider = (props: KeyboardProviderProps) => {
     navigationBarTranslucent,
     preserveEdgeToEdge,
     enabled: initiallyEnabled = true,
+    preload = true,
   } = props;
   // ref
   const viewTagRef = useRef<React.Component<KeyboardControllerProps>>(null);
@@ -216,14 +224,11 @@ export const KeyboardProvider = (props: KeyboardProviderProps) => {
     [],
   );
 
-  // layout effects
-  useLayoutEffect(() => {
-    if (enabled) {
-      applyMonkeyPatch();
-    } else {
-      revertMonkeyPatch();
+  useEffect(() => {
+    if (preload) {
+      KeyboardController.preload();
     }
-  }, [enabled]);
+  }, [preload]);
 
   if (__DEV__) {
     controlEdgeToEdgeValues({

package/src/bindings.native.ts

@@ -2,9 +2,11 @@ import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
   FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
+  KeyboardExtenderProps,
   KeyboardGestureAreaProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
@@ -60,3 +62,9 @@ export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
     : ({ children }: KeyboardGestureAreaProps) => children;
 export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
   require("./specs/OverKeyboardViewNativeComponent").default;
+export const KeyboardBackgroundView: React.FC<KeyboardBackgroundViewProps> =
+  require("./specs/KeyboardBackgroundViewNativeComponent").default;
+export const RCTKeyboardExtender: React.FC<KeyboardExtenderProps> =
+  Platform.OS === "ios"
+    ? require("./specs/KeyboardExtenderNativeComponent").default
+    : ({ children }: KeyboardExtenderProps) => children;

package/src/bindings.ts

@@ -2,9 +2,11 @@ import { View } from "react-native";
 
 import type {
   FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
+  KeyboardExtenderProps,
   KeyboardGestureAreaProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
@@ -16,6 +18,7 @@ const NOOP = () => {};
 export const KeyboardControllerNative: KeyboardControllerNativeModule = {
   setDefaultMode: NOOP,
   setInputMode: NOOP,
+  preload: NOOP,
   dismiss: NOOP,
   setFocusTo: NOOP,
   addListener: NOOP,
@@ -59,3 +62,18 @@ export const KeyboardGestureArea =
   View as unknown as React.FC<KeyboardGestureAreaProps>;
 export const RCTOverKeyboardView =
   View as unknown as React.FC<OverKeyboardViewProps>;
+/**
+ * A view that matches keyboard background.
+ *
+ * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-background-view|Documentation} page for more details.
+ */
+export const KeyboardBackgroundView =
+  View as unknown as React.FC<KeyboardBackgroundViewProps>;
+/**
+ * A container that will embed its children into the keyboard
+ * and will always show them above the keyboard.
+ *
+ * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-extender|Documentation} page for more details.
+ */
+export const RCTKeyboardExtender =
+  View as unknown as React.FC<KeyboardExtenderProps>;

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useMemo } from "react";
 import Reanimated, {
+  clamp,
   interpolate,
   runOnUI,
   scrollTo,
@@ -32,7 +33,7 @@ import type {
 } from "react-native-keyboard-controller";
 
 export type KeyboardAwareScrollViewProps = {
-  /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
+  /** The distance between the keyboard and the caret inside a focused `TextInput` when the keyboard is shown. Default is `0`. */
   bottomOffset?: number;
   /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
   disableScrollOnKeyboardHide?: boolean;
@@ -127,6 +128,8 @@ const KeyboardAwareScrollView = forwardRef<
     const scrollBeforeKeyboardMovement = useSharedValue(0);
     const { input } = useReanimatedFocusedInput();
     const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
+    const lastSelection =
+      useSharedValue<FocusedInputSelectionChangedEvent | null>(null);
 
     const { height } = useWindowDimensions();
 
@@ -191,9 +194,9 @@ const KeyboardAwareScrollView = forwardRef<
           return interpolatedScrollTo;
         }
 
-        if (absoluteY < 0) {
-          const positionOnScreen = visibleRect - inputHeight - bottomOffset;
-          const topOfScreen = scrollPosition.value + absoluteY;
+        if (point < 0) {
+          const positionOnScreen = visibleRect - bottomOffset;
+          const topOfScreen = scrollPosition.value + point;
 
           scrollTo(
             scrollViewAnimatedRef,
@@ -222,65 +225,89 @@ const KeyboardAwareScrollView = forwardRef<
       [extraKeyboardSpace],
     );
 
-    const scrollFromCurrentPosition = useCallback(
-      (customHeight?: number) => {
-        "worklet";
+    const updateLayoutFromSelection = useCallback(() => {
+      "worklet";
 
-        const prevScrollPosition = scrollPosition.value;
-        const prevLayout = layout.value;
+      const customHeight = lastSelection.value?.selection.end.y;
 
-        if (!input.value?.layout) {
-          return;
-        }
+      if (!input.value?.layout || !customHeight) {
+        return false;
+      }
 
-        // eslint-disable-next-line react-compiler/react-compiler
-        layout.value = {
-          ...input.value,
-          layout: {
-            ...input.value.layout,
-            height: customHeight ?? input.value.layout.height,
-          },
-        };
-        scrollPosition.value = position.value;
-        maybeScroll(keyboardHeight.value, true);
-        scrollPosition.value = prevScrollPosition;
-        layout.value = prevLayout;
-      },
-      [maybeScroll],
-    );
-    const onChangeText = useCallback(() => {
+      layout.value = {
+        ...input.value,
+        layout: {
+          ...input.value.layout,
+          // when we have multiline input with limited amount of lines, then custom height can be very big
+          // so we clamp it to max input height
+          height: clamp(customHeight, 0, input.value.layout.height),
+        },
+      };
+
+      return true;
+    }, [input, lastSelection, layout]);
+    const scrollFromCurrentPosition = useCallback(() => {
       "worklet";
 
-      // if typing a text caused layout shift, then we need to ignore this handler
-      // because this event will be handled in `useAnimatedReaction` below
-      if (layout.value?.layout.height !== input.value?.layout.height) {
+      const prevScrollPosition = scrollPosition.value;
+      const prevLayout = layout.value;
+
+      if (!updateLayoutFromSelection()) {
         return;
       }
 
+      // eslint-disable-next-line react-compiler/react-compiler
+      scrollPosition.value = position.value;
+      maybeScroll(keyboardHeight.value, true);
+      scrollPosition.value = prevScrollPosition;
+      layout.value = prevLayout;
+    }, [maybeScroll]);
+    const onChangeText = useCallback(() => {
+      "worklet";
+
+      console.debug("maybeScroll - onChangeText");
       scrollFromCurrentPosition();
     }, [scrollFromCurrentPosition]);
+    const onChangeTextHandler = useMemo(
+      () => debounce(onChangeText, 200),
+      [onChangeText],
+    );
     const onSelectionChange = useCallback(
       (e: FocusedInputSelectionChangedEvent) => {
         "worklet";
 
+        const lastTarget = lastSelection.value?.target;
+        const latestSelection = lastSelection.value?.selection;
+
+        lastSelection.value = e;
+
+        if (e.target !== lastTarget) {
+          // ignore this event, because "focus changed" event handled in `useSmoothKeyboardHandler`
+          return;
+        }
+        // caret in the end + end coordinates has been changed -> we moved to a new line
+        // so input may grow
+        if (
+          e.selection.end.position === e.selection.start.position &&
+          latestSelection?.end.y !== e.selection.end.y
+        ) {
+          return scrollFromCurrentPosition();
+        }
+        // selection has been changed
         if (e.selection.start.position !== e.selection.end.position) {
-          scrollFromCurrentPosition(e.selection.end.y);
+          return scrollFromCurrentPosition();
         }
-      },
-      [scrollFromCurrentPosition],
-    );
 
-    const onChangeTextHandler = useMemo(
-      () => debounce(onChangeText, 200),
-      [onChangeText],
+        onChangeTextHandler();
+      },
+      [scrollFromCurrentPosition, onChangeTextHandler],
     );
 
     useFocusedInputHandler(
       {
-        onChangeText: onChangeTextHandler,
         onSelectionChange: onSelectionChange,
       },
-      [onChangeTextHandler, onSelectionChange],
+      [onSelectionChange],
     );
 
     useSmoothKeyboardHandler(
@@ -322,9 +349,8 @@ const KeyboardAwareScrollView = forwardRef<
           // focus was changed
           if (focusWasChanged) {
             tag.value = e.target;
-
             // save position of focused text input when keyboard starts to move
-            layout.value = input.value;
+            updateLayoutFromSelection();
             // save current scroll position - when keyboard will hide we'll reuse
             // this value to achieve smooth hide effect
             scrollBeforeKeyboardMovement.value = position.value;
@@ -369,11 +395,10 @@ const KeyboardAwareScrollView = forwardRef<
           current?.target === previous?.target &&
           current?.layout.height !== previous?.layout.height
         ) {
-          const prevLayout = layout.value;
-
-          layout.value = input.value;
-          scrollPosition.value += maybeScroll(keyboardHeight.value, true);
-          layout.value = prevLayout;
+          // input has changed layout - let's check if we need to scroll
+          // may happen when you paste text, then onSelectionChange will be
+          // fired earlier than text actually changes its layout
+          scrollFromCurrentPosition();
         }
       },
       [],

package/src/components/KeyboardToolbar/Arrow.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 
-import useColorScheme from "../hooks/useColorScheme";
+import { useKeyboardState } from "../../hooks";
 
 import type { KeyboardToolbarTheme } from "./types";
 import type { ViewStyle } from "react-native";
@@ -13,7 +13,7 @@ type ArrowProps = {
 };
 
 const ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
 
   const color = useMemo(
     () => ({

package/src/components/KeyboardToolbar/Button.tsx

@@ -6,7 +6,7 @@ import {
   View,
 } from "react-native";
 
-import useColorScheme from "../hooks/useColorScheme";
+import { useKeyboardState } from "../../hooks";
 
 import type { KeyboardToolbarTheme } from "./types";
 import type { PropsWithChildren } from "react";
@@ -64,7 +64,7 @@ const ButtonAndroid = ({
   style,
   theme,
 }: PropsWithChildren<ButtonProps>) => {
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
   const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
   const ripple = useMemo(
     () =>

package/src/components/KeyboardToolbar/constants.ts

@@ -0,0 +1,15 @@
+import { Platform } from "react-native";
+
+import type { HEX } from "./types";
+
+export const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
+export const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
+export const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
+export const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
+export const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
+
+export const KEYBOARD_TOOLBAR_HEIGHT = 42;
+export const DEFAULT_OPACITY: HEX = "FF";
+export const KEYBOARD_HAS_ROUNDED_CORNERS =
+  Platform.OS === "ios" && parseInt(Platform.Version, 10) >= 26;
+export const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;

package/src/components/KeyboardToolbar/index.tsx

@@ -2,13 +2,24 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 
 import { FocusedInputEvents } from "../../bindings";
+import { useKeyboardState } from "../../hooks";
 import { KeyboardController } from "../../module";
-import useColorScheme from "../hooks/useColorScheme";
 import KeyboardStickyView from "../KeyboardStickyView";
 
 import Arrow from "./Arrow";
 import Button from "./Button";
 import { colors } from "./colors";
+import {
+  DEFAULT_OPACITY,
+  KEYBOARD_HAS_ROUNDED_CORNERS,
+  KEYBOARD_TOOLBAR_HEIGHT,
+  OPENED_OFFSET,
+  TEST_ID_KEYBOARD_TOOLBAR,
+  TEST_ID_KEYBOARD_TOOLBAR_CONTENT,
+  TEST_ID_KEYBOARD_TOOLBAR_DONE,
+  TEST_ID_KEYBOARD_TOOLBAR_NEXT,
+  TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS,
+} from "./constants";
 
 import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
@@ -65,15 +76,6 @@ export type KeyboardToolbarProps = Omit<
   insets?: SafeAreaInsets;
 } & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 
-const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
-const TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS = `${TEST_ID_KEYBOARD_TOOLBAR}.previous`;
-const TEST_ID_KEYBOARD_TOOLBAR_NEXT = `${TEST_ID_KEYBOARD_TOOLBAR}.next`;
-const TEST_ID_KEYBOARD_TOOLBAR_CONTENT = `${TEST_ID_KEYBOARD_TOOLBAR}.content`;
-const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
-
-const KEYBOARD_TOOLBAR_HEIGHT = 42;
-const DEFAULT_OPACITY: HEX = "FF";
-
 /**
  * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` buttons from left and
  * `Done` button from the right (to dismiss the keyboard). Allows to add customizable content (yours UI elements) in the middle.
@@ -104,7 +106,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = (props) => {
     insets,
     ...rest
   } = props;
-  const colorScheme = useColorScheme();
+  const colorScheme = useKeyboardState((state) => state.appearance);
   const [inputs, setInputs] = useState({
     current: 0,
     count: 0,
@@ -129,15 +131,32 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = (props) => {
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
-      {
-        paddingLeft: insets?.left,
-        paddingRight: insets?.right,
-      },
+      !KEYBOARD_HAS_ROUNDED_CORNERS
+        ? {
+            paddingLeft: insets?.left,
+            paddingRight: insets?.right,
+          }
+        : null,
+      KEYBOARD_HAS_ROUNDED_CORNERS ? styles.floating : null,
     ],
     [colorScheme, opacity, theme, insets],
   );
+  const containerStyle = useMemo(
+    () => [
+      KEYBOARD_HAS_ROUNDED_CORNERS
+        ? {
+            marginLeft: (insets?.left ?? 0) + 16,
+            marginRight: (insets?.right ?? 0) + 16,
+          }
+        : null,
+    ],
+    [insets],
+  );
   const offset = useMemo(
-    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
+    () => ({
+      closed: closed + KEYBOARD_TOOLBAR_HEIGHT,
+      opened: opened + OPENED_OFFSET,
+    }),
     [closed, opened],
   );
   const ButtonContainer = button || Button;
@@ -175,7 +194,11 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = (props) => {
   );
 
   return (
-    <KeyboardStickyView enabled={enabled} offset={offset}>
+    <KeyboardStickyView
+      enabled={enabled}
+      offset={offset}
+      style={containerStyle}
+    >
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
@@ -258,6 +281,11 @@ const styles = StyleSheet.create({
     marginRight: 16,
     marginLeft: 8,
   },
+  floating: {
+    alignSelf: "center",
+    borderRadius: 20,
+    overflow: "hidden",
+  },
 });
 
 export { colors as DefaultKeyboardToolbarTheme };

package/src/hooks/useKeyboardState/index.ts

@@ -12,17 +12,25 @@ const getLatestState = () => ({
   isVisible: KeyboardController.isVisible(),
 });
 
+type KeyboardStateSelector<T> = (state: KeyboardState) => T;
+
+const defaultSelector: KeyboardStateSelector<KeyboardState> = (state) => state;
+
 /**
  * React Hook that represents the current keyboard state on iOS and Android.
  * It tracks keyboard visibility, height, appearance, type and other properties.
  * This hook subscribes to keyboard events and updates the state reactively.
  *
+ * @template T - A type of the returned object from the `selector`.
+ * @param selector - A function that receives the current keyboard state and picks only necessary properties to avoid frequent re-renders.
  * @returns Object {@link KeyboardState|containing} keyboard state information.
  * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-state|Documentation} page for more details.
  * @example
  * ```tsx
  * function MyComponent() {
- *   const { isVisible, height } = useKeyboardState();
+ *   const isVisible = useKeyboardState((state) => state.isVisible);
+ *   const height = useKeyboardState((state) => state.height);
+ *
  *   return (
  *     <View>
  *       <Text>Keyboard is {isVisible ? 'visible' : 'hidden'}</Text>
@@ -32,27 +40,38 @@ const getLatestState = () => ({
  * }
  * ```
  */
-export const useKeyboardState = (): KeyboardState => {
-  const [state, setState] = useState(getLatestState);
+function useKeyboardState<T = KeyboardState>(
+  selector: KeyboardStateSelector<T> = defaultSelector as KeyboardStateSelector<T>,
+): T {
+  const [state, setState] = useState<T>(() => selector(getLatestState()));
 
   useEffect(() => {
     const subscriptions = EVENTS.map((event) =>
       KeyboardEvents.addListener(event, () =>
         // state will be updated by global listener first,
         // so we simply read it and don't derive data from the event
-        setState(getLatestState),
+        setState(selector(getLatestState())),
       ),
     );
+    // update `appearance` prematurely
+    const willShowSubscription = KeyboardEvents.addListener(
+      "keyboardWillShow",
+      (e) =>
+        setState(selector({ ...getLatestState(), appearance: e.appearance })),
+    );
 
     // we might have missed an update between reading a value in render and
     // `addListener` in this handler, so we set it here. If there was
     // no change, React will filter out this update as a no-op.
-    setState(getLatestState);
+    setState(selector(getLatestState()));
 
     return () => {
       subscriptions.forEach((subscription) => subscription.remove());
+      willShowSubscription.remove();
     };
   }, []);
 
   return state;
-};
+}
+
+export { useKeyboardState };

package/src/index.ts

@@ -20,4 +20,4 @@ export type {
   KeyboardAwareScrollViewProps,
   KeyboardToolbarProps,
 } from "./components";
-export { OverKeyboardView } from "./views";
+export { OverKeyboardView, KeyboardExtender } from "./views";

package/src/module.ts

@@ -13,7 +13,7 @@ let lastState: KeyboardEventData = {
   timestamp: new Date().getTime(),
   target: -1,
   type: "default",
-  appearance: "default",
+  appearance: "light",
 };
 
 KeyboardEvents.addListener("keyboardDidHide", (e) => {
@@ -54,6 +54,7 @@ export const KeyboardController: KeyboardControllerModule = {
   setDefaultMode: KeyboardControllerNative.setDefaultMode,
   setInputMode: KeyboardControllerNative.setInputMode,
   setFocusTo: KeyboardControllerNative.setFocusTo,
+  preload: KeyboardControllerNative.preload,
   dismiss,
   isVisible,
   state,