react-native-keyboard-controller 1.12.6 → 1.13.0

package/src/animated.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useMemo, useState } from "react";
+/* eslint react/jsx-sort-props: off */
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Animated, Platform, StyleSheet } from "react-native";
 import Reanimated, { useSharedValue } from "react-native-reanimated";
 
 import { KeyboardControllerView } from "./bindings";
 import { KeyboardContext } from "./context";
-import { useAnimatedValue, useSharedHandlers } from "./internal";
+import { focusedInputEventsMap, keyboardEventsMap } from "./event-mappings";
+import { useAnimatedValue, useEventHandlerRegistration } from "./internal";
 import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
-  useFocusedInputSelectionHandler,
-  useFocusedInputTextHandler,
 } from "./reanimated";
 
 import type { KeyboardAnimationContext } from "./context";
@@ -24,9 +24,7 @@ import type {
 import type { ViewStyle } from "react-native";
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
-  Animated.createAnimatedComponent(
-    KeyboardControllerView,
-  ) as React.FC<KeyboardControllerProps>,
+  Animated.createAnimatedComponent(KeyboardControllerView),
 );
 
 type Styles = {
@@ -83,6 +81,8 @@ export const KeyboardProvider = ({
   navigationBarTranslucent,
   enabled: initiallyEnabled = true,
 }: KeyboardProviderProps) => {
+  // ref
+  const viewTagRef = useRef<React.Component<KeyboardControllerProps>>(null);
   // state
   const [enabled, setEnabled] = useState(initiallyEnabled);
   // animated values
@@ -92,10 +92,14 @@ export const KeyboardProvider = ({
   const progressSV = useSharedValue(0);
   const heightSV = useSharedValue(0);
   const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
-  const [setKeyboardHandlers, broadcastKeyboardEvents] =
-    useSharedHandlers<KeyboardHandler>();
-  const [setInputHandlers, broadcastInputEvents] =
-    useSharedHandlers<FocusedInputHandler>();
+  const setKeyboardHandlers = useEventHandlerRegistration<KeyboardHandler>(
+    keyboardEventsMap,
+    viewTagRef,
+  );
+  const setInputHandlers = useEventHandlerRegistration<FocusedInputHandler>(
+    focusedInputEventsMap,
+    viewTagRef,
+  );
   // memo
   const context = useMemo<KeyboardAnimationContext>(
     () => ({
@@ -136,6 +140,7 @@ export const KeyboardProvider = ({
     "worklet";
 
     if (platforms.includes(OS)) {
+      // eslint-disable-next-line react-compiler/react-compiler
       progressSV.value = event.progress;
       heightSV.value = -event.height;
     }
@@ -145,25 +150,17 @@ export const KeyboardProvider = ({
       onKeyboardMoveStart: (event: NativeEvent) => {
         "worklet";
 
-        broadcastKeyboardEvents("onStart", event);
         updateSharedValues(event, ["ios"]);
       },
       onKeyboardMove: (event: NativeEvent) => {
         "worklet";
 
-        broadcastKeyboardEvents("onMove", event);
         updateSharedValues(event, ["android"]);
       },
-      onKeyboardMoveEnd: (event: NativeEvent) => {
-        "worklet";
-
-        broadcastKeyboardEvents("onEnd", event);
-      },
       onKeyboardMoveInteractive: (event: NativeEvent) => {
         "worklet";
 
         updateSharedValues(event, ["android", "ios"]);
-        broadcastKeyboardEvents("onInteractive", event);
       },
     },
     [],
@@ -182,26 +179,7 @@ export const KeyboardProvider = ({
     },
     [],
   );
-  const inputTextHandler = useFocusedInputTextHandler(
-    {
-      onFocusedInputTextChanged: (e) => {
-        "worklet";
-
-        broadcastInputEvents("onChangeText", e);
-      },
-    },
-    [],
-  );
-  const inputSelectionHandler = useFocusedInputSelectionHandler(
-    {
-      onFocusedInputSelectionChanged: (e) => {
-        "worklet";
 
-        broadcastInputEvents("onSelectionChange", e);
-      },
-    },
-    [],
-  );
   // effects
   useEffect(() => {
     if (enabled) {
@@ -214,17 +192,17 @@ export const KeyboardProvider = ({
   return (
     <KeyboardContext.Provider value={context}>
       <KeyboardControllerViewAnimated
+        ref={viewTagRef}
         enabled={enabled}
+        navigationBarTranslucent={navigationBarTranslucent}
+        statusBarTranslucent={statusBarTranslucent}
+        style={styles.container}
+        // on*Reanimated prop must precede animated handlers to work correctly
         onKeyboardMoveReanimated={keyboardHandler}
         onKeyboardMoveStart={OS === "ios" ? onKeyboardMove : undefined}
         onKeyboardMove={OS === "android" ? onKeyboardMove : undefined}
         onKeyboardMoveInteractive={onKeyboardMove}
         onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
-        onFocusedInputTextChangedReanimated={inputTextHandler}
-        onFocusedInputSelectionChangedReanimated={inputSelectionHandler}
-        navigationBarTranslucent={navigationBarTranslucent}
-        statusBarTranslucent={statusBarTranslucent}
-        style={styles.container}
       >
         {children}
       </KeyboardControllerViewAnimated>

package/src/bindings.native.ts

@@ -17,6 +17,7 @@ const LINKING_ERROR =
 
 const RCTKeyboardController =
   require("./specs/NativeKeyboardController").default;
+
 export const KeyboardController = (
   RCTKeyboardController
     ? RCTKeyboardController

package/src/bindings.ts

@@ -11,6 +11,7 @@ import type {
 import type { EmitterSubscription } from "react-native";
 
 const NOOP = () => {};
+
 export const KeyboardController: KeyboardControllerModule = {
   setDefaultMode: NOOP,
   setInputMode: NOOP,

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -18,6 +18,7 @@ export const useKeyboardAnimation = () => {
         "worklet";
 
         if (e.height > 0) {
+          // eslint-disable-next-line react-compiler/react-compiler
           isClosed.value = false;
           heightWhenOpened.value = e.height;
         }
@@ -33,19 +34,8 @@ export const useKeyboardAnimation = () => {
 
         isClosed.value = e.height === 0;
 
-        // `height` update happens in `onMove` handler
-        // in `onEnd` we need to update only if `onMove`
-        // wasn't called (i. e. duration === 0)
-        //
-        // we can not call this code without condition below
-        // because in some corner cases (iOS with `secureTextEntry`)
-        // `onEnd` can be emitted before `onMove` and in this case
-        // it may lead to choppy/glitchy/jumpy UI
-        // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/327
-        if (e.duration === 0) {
-          progress.value = e.progress;
-          height.value = e.height;
-        }
+        height.value = e.height;
+        progress.value = e.progress;
       },
     },
     [],

package/src/components/KeyboardAvoidingView/index.tsx

@@ -85,6 +85,7 @@ const KeyboardAvoidingView = forwardRef<
       "worklet";
 
       if (keyboard.isClosed.value || initialFrame.value === null) {
+        // eslint-disable-next-line react-compiler/react-compiler
         initialFrame.value = layout;
       }
     }, []);
@@ -143,8 +144,8 @@ const KeyboardAvoidingView = forwardRef<
     return (
       <Reanimated.View
         ref={ref}
-        onLayout={onLayout}
         style={combinedStyles}
+        onLayout={onLayout}
         {...props}
       >
         {children}

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -24,7 +24,10 @@ import type {
   ScrollView,
   ScrollViewProps,
 } from "react-native";
-import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
+import type {
+  FocusedInputLayoutChangedEvent,
+  FocusedInputSelectionChangedEvent,
+} from "react-native-keyboard-controller";
 
 export type KeyboardAwareScrollViewProps = {
   /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
@@ -87,6 +90,7 @@ const KeyboardAwareScrollView = forwardRef<
       disableScrollOnKeyboardHide = false,
       enabled = true,
       extraKeyboardSpace = 0,
+      snapToOffsets,
       ...rest
     },
     ref,
@@ -155,12 +159,13 @@ const KeyboardAwareScrollView = forwardRef<
               0,
               scrollDistanceWithRespectToSnapPoints(
                 relativeScrollTo + scrollPosition.value,
-                rest.snapToOffsets,
+                snapToOffsets,
               ) - scrollPosition.value,
             ],
           );
           const targetScrollY =
             Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
+
           scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);
 
           return interpolatedScrollTo;
@@ -180,9 +185,35 @@ const KeyboardAwareScrollView = forwardRef<
 
         return 0;
       },
-      [bottomOffset, enabled, height, rest.snapToOffsets],
+      [bottomOffset, enabled, height, snapToOffsets],
     );
 
+    const scrollFromCurrentPosition = useCallback(
+      (customHeight?: number) => {
+        "worklet";
+
+        const prevScrollPosition = scrollPosition.value;
+        const prevLayout = layout.value;
+
+        if (!input.value?.layout) {
+          return;
+        }
+
+        // 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(() => {
       "worklet";
 
@@ -192,15 +223,18 @@ const KeyboardAwareScrollView = forwardRef<
         return;
       }
 
-      const prevScrollPosition = scrollPosition.value;
-      const prevLayout = layout.value;
+      scrollFromCurrentPosition();
+    }, [scrollFromCurrentPosition]);
+    const onSelectionChange = useCallback(
+      (e: FocusedInputSelectionChangedEvent) => {
+        "worklet";
 
-      scrollPosition.value = position.value;
-      layout.value = input.value;
-      maybeScroll(keyboardHeight.value, true);
-      scrollPosition.value = prevScrollPosition;
-      layout.value = prevLayout;
-    }, [maybeScroll]);
+        if (e.selection.start.position !== e.selection.end.position) {
+          scrollFromCurrentPosition(e.selection.end.y);
+        }
+      },
+      [scrollFromCurrentPosition],
+    );
 
     const onChangeTextHandler = useMemo(
       () => debounce(onChangeText, 200),
@@ -210,8 +244,9 @@ const KeyboardAwareScrollView = forwardRef<
     useFocusedInputHandler(
       {
         onChangeText: onChangeTextHandler,
+        onSelectionChange: onSelectionChange,
       },
-      [onChangeTextHandler],
+      [onChangeTextHandler, onSelectionChange],
     );
 
     useSmoothKeyboardHandler(
@@ -221,7 +256,9 @@ const KeyboardAwareScrollView = forwardRef<
 
           const keyboardWillChangeSize =
             keyboardHeight.value !== e.height && e.height > 0;
+
           keyboardWillAppear.value = e.height > 0 && keyboardHeight.value === 0;
+
           const keyboardWillHide = e.height === 0;
           const focusWasChanged =
             (tag.value !== e.target && e.target !== -1) ||
@@ -273,6 +310,7 @@ const KeyboardAwareScrollView = forwardRef<
             [0, keyboardHeight.value],
             [0, keyboardHeight.value + extraKeyboardSpace],
           );
+
           currentKeyboardFrameHeight.value = keyboardFrame;
 
           // if the user has set disableScrollOnKeyboardHide, only auto-scroll when the keyboard opens
@@ -327,8 +365,8 @@ const KeyboardAwareScrollView = forwardRef<
       <Reanimated.ScrollView
         ref={onRef}
         {...rest}
-        onLayout={onScrollViewLayout}
         scrollEventThrottle={16}
+        onLayout={onScrollViewLayout}
       >
         {children}
         <Reanimated.View style={view} />

package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -54,6 +54,7 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
         height: animatedKeyboardHeight.value,
         progress: animatedKeyboardHeight.value / persistedHeight.value,
       };
+
       return event;
     },
     (evt) => {
@@ -65,6 +66,7 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
       // dispatch `onEnd`
       if (evt.height === height.value) {
         handler.onEnd?.(evt);
+        // eslint-disable-next-line react-compiler/react-compiler
         persistedHeight.value = height.value;
       }
     },

package/src/components/KeyboardAwareScrollView/utils.ts

@@ -16,6 +16,7 @@ export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
 
     if (now < wait) {
       value.time = t;
+
       return;
     }
 

package/src/components/KeyboardToolbar/Button.tsx

@@ -10,11 +10,11 @@ import useColorScheme from "../hooks/useColorScheme";
 
 import type { KeyboardToolbarTheme } from "./types";
 import type { PropsWithChildren } from "react";
-import type { ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 
 type ButtonProps = {
   disabled?: boolean;
-  onPress: () => void;
+  onPress: (event: GestureResponderEvent) => void;
   accessibilityLabel: string;
   accessibilityHint: string;
   testID: string;
@@ -41,13 +41,13 @@ const ButtonIOS = ({
 
   return (
     <Container
-      accessibilityState={accessibilityState}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={accessibilityState}
       style={style}
       testID={testID}
+      onPress={onPress}
     >
       {children}
     </Container>
@@ -78,14 +78,14 @@ const ButtonAndroid = ({
 
   return (
     <TouchableNativeFeedback
-      accessibilityState={accessibilityState}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
-      onPress={onPress}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={accessibilityState}
       background={ripple}
-      testID={testID}
       style={style}
+      testID={testID}
+      onPress={onPress}
     >
       <View style={style}>{children}</View>
     </TouchableNativeFeedback>

package/src/components/KeyboardToolbar/index.tsx

@@ -15,6 +15,7 @@ import { colors } from "./colors";
 
 import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
+import type { GestureResponderEvent } from "react-native";
 
 export type KeyboardToolbarProps = {
   /** An element that is shown in the middle of the toolbar. */
@@ -35,15 +36,15 @@ export type KeyboardToolbarProps = {
   /**
    * A callback that is called when the user presses the next button along with the default action.
    */
-  onNextCallback?: () => void;
+  onNextCallback?: (event: GestureResponderEvent) => void;
   /**
    * A callback that is called when the user presses the previous button along with the default action.
    */
-  onPrevCallback?: () => void;
+  onPrevCallback?: (event: GestureResponderEvent) => void;
   /**
    * A callback that is called when the user presses the done button along with the default action.
    */
-  onDoneCallback?: () => void;
+  onDoneCallback?: (event: GestureResponderEvent) => void;
   /**
    * A component that applies blur effect to the toolbar.
    */
@@ -53,6 +54,7 @@ export type KeyboardToolbarProps = {
    */
   opacity?: HEX;
 };
+
 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`;
@@ -115,18 +117,36 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   const ButtonContainer = button || Button;
   const IconContainer = icon || Arrow;
 
-  const onPressNext = useCallback(() => {
-    goToNextField();
-    onNextCallback?.();
-  }, [onNextCallback]);
-  const onPressPrev = useCallback(() => {
-    goToPrevField();
-    onPrevCallback?.();
-  }, [onPrevCallback]);
-  const onPressDone = useCallback(() => {
-    dismissKeyboard();
-    onDoneCallback?.();
-  }, [onDoneCallback]);
+  const onPressNext = useCallback(
+    (event: GestureResponderEvent) => {
+      onNextCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        goToNextField();
+      }
+    },
+    [onNextCallback],
+  );
+  const onPressPrev = useCallback(
+    (event: GestureResponderEvent) => {
+      onPrevCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        goToPrevField();
+      }
+    },
+    [onPrevCallback],
+  );
+  const onPressDone = useCallback(
+    (event: GestureResponderEvent) => {
+      onDoneCallback?.(event);
+
+      if (!event.isDefaultPrevented()) {
+        dismissKeyboard();
+      }
+    },
+    [onDoneCallback],
+  );
 
   return (
     <KeyboardStickyView offset={offset}>
@@ -135,31 +155,31 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
         {showArrows && (
           <>
             <ButtonContainer
+              accessibilityHint="Moves focus to the previous field"
               accessibilityLabel="Previous"
-              accessibilityHint="Will move focus to previous field"
               disabled={isPrevDisabled}
-              onPress={onPressPrev}
               testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
               theme={theme}
+              onPress={onPressPrev}
             >
               <IconContainer
                 disabled={isPrevDisabled}
-                type="prev"
                 theme={theme}
+                type="prev"
               />
             </ButtonContainer>
             <ButtonContainer
+              accessibilityHint="Moves focus to the next field"
               accessibilityLabel="Next"
-              accessibilityHint="Will move focus to next field"
               disabled={isNextDisabled}
-              onPress={onPressNext}
               testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
               theme={theme}
+              onPress={onPressNext}
             >
               <IconContainer
                 disabled={isNextDisabled}
-                type="next"
                 theme={theme}
+                type="next"
               />
             </ButtonContainer>
           </>
@@ -169,15 +189,15 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
           {content}
         </View>
         <ButtonContainer
+          accessibilityHint="Closes the keyboard"
           accessibilityLabel="Done"
-          accessibilityHint="Will close the keyboard"
-          onPress={onPressDone}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
           rippleRadius={28}
           style={styles.doneButtonContainer}
+          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
           theme={theme}
+          onPress={onPressDone}
         >
-          <Text style={doneStyle} maxFontSizeMultiplier={1.3}>
+          <Text maxFontSizeMultiplier={1.3} style={doneStyle}>
             {doneText || "Done"}
           </Text>
         </ButtonContainer>

package/src/context.ts

@@ -2,9 +2,9 @@ import { createContext, useContext } from "react";
 import { Animated } from "react-native";
 
 import type {
-  FocusedInputHandlers,
+  FocusedInputHandler,
   FocusedInputLayoutChangedEvent,
-  KeyboardHandlers,
+  KeyboardHandler,
 } from "./types";
 import type React from "react";
 import type { SharedValue } from "react-native-reanimated";
@@ -22,11 +22,12 @@ export type KeyboardAnimationContext = {
   animated: AnimatedContext;
   reanimated: ReanimatedContext;
   layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
-  setKeyboardHandlers: (handlers: KeyboardHandlers) => void;
-  setInputHandlers: (handlers: FocusedInputHandlers) => void;
+  setKeyboardHandlers: (handlers: KeyboardHandler) => () => void;
+  setInputHandlers: (handlers: FocusedInputHandler) => () => void;
   setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const NOOP = () => {};
+const NESTED_NOOP = () => NOOP;
 const withSharedValue = <T>(value: T): SharedValue<T> => ({
   value,
   addListener: NOOP,
@@ -48,10 +49,11 @@ const defaultContext: KeyboardAnimationContext = {
     height: DEFAULT_SHARED_VALUE,
   },
   layout: DEFAULT_LAYOUT,
-  setKeyboardHandlers: NOOP,
-  setInputHandlers: NOOP,
+  setKeyboardHandlers: NESTED_NOOP,
+  setInputHandlers: NESTED_NOOP,
   setEnabled: NOOP,
 };
+
 export const KeyboardContext = createContext(defaultContext);
 export const useKeyboardContext = () => {
   const context = useContext(KeyboardContext);

package/src/event-handler.js

@@ -0,0 +1,15 @@
+let REACore = null;
+
+try {
+  REACore = require("react-native-reanimated/src/core");
+} catch (e1) {
+  try {
+    REACore = require("react-native-reanimated/src/reanimated2/core");
+  } catch (e2) {
+    console.warn("Failed to load REACore from both paths");
+  }
+}
+const registerEventHandler = REACore.registerEventHandler;
+const unregisterEventHandler = REACore.unregisterEventHandler;
+
+export { registerEventHandler, unregisterEventHandler };

package/src/event-handler.ts

@@ -0,0 +1,8 @@
+declare function registerEventHandler(
+  handler: (event: never) => void,
+  eventName: string,
+  viewTag: number,
+): number;
+declare function unregisterEventHandler(id: number): void;
+
+export { registerEventHandler, unregisterEventHandler };

package/src/event-handler.web.js

@@ -0,0 +1,5 @@
+const NOOP = () => {};
+const registerEventHandler = NOOP;
+const unregisterEventHandler = NOOP;
+
+export { registerEventHandler, unregisterEventHandler };

package/src/event-mappings.ts

@@ -0,0 +1,14 @@
+import type { FocusedInputHandler, KeyboardHandler } from "./types";
+
+export const keyboardEventsMap = new Map<keyof KeyboardHandler, string>([
+  ["onStart", "onKeyboardMoveStart"],
+  ["onMove", "onKeyboardMove"],
+  ["onEnd", "onKeyboardMoveEnd"],
+  ["onInteractive", "onKeyboardMoveInteractive"],
+]);
+export const focusedInputEventsMap = new Map<keyof FocusedInputHandler, string>(
+  [
+    ["onChangeText", "onFocusedInputTextChanged"],
+    ["onSelectionChange", "onFocusedInputSelectionChanged"],
+  ],
+);