react-native-keyboard-controller 1.16.7 → 1.17.0

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

@@ -15,3 +15,4 @@ export declare function useReanimatedFocusedInput(): {
 };
 export declare function useFocusedInputHandler(handler: FocusedInputHandler, deps?: DependencyList): void;
 export * from "./useWindowDimensions";
+export * from "./useKeyboardState";

package/lib/typescript/hooks/useKeyboardState/index.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardState } from "../../types";
+export declare const useKeyboardState: () => KeyboardState;

package/lib/typescript/types.d.ts

@@ -92,7 +92,7 @@ export type KeyboardControllerModule = {
     dismiss: (options?: DismissOptions) => Promise<void>;
     setFocusTo: (direction: Direction) => void;
     isVisible: () => boolean;
-    state: () => KeyboardEventData | null;
+    state: () => KeyboardEventData;
 };
 export type KeyboardControllerNativeModule = {
     setDefaultMode: () => void;
@@ -111,6 +111,9 @@ export type KeyboardEventData = {
     type: NonNullable<TextInputProps["keyboardType"]>;
     appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
 };
+export type KeyboardState = {
+    isVisible: boolean;
+} & KeyboardEventData;
 export type KeyboardEventsModule = {
     addListener: (name: KeyboardControllerEvents, cb: (e: KeyboardEventData) => void) => EmitterSubscription;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.16.7",
+  "version": "1.17.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -12,10 +12,13 @@
     "lib",
     "android",
     "ios",
+    "common",
     "cpp",
     "react-native-keyboard-controller.podspec",
+    "react-native.config.js",
     "jest",
     "!lib/typescript/example",
+    "!android/detekt.yml",
     "!android/build",
     "!android/src/test",
     "!android/.gradle",

package/react-native-keyboard-controller.podspec

@@ -58,4 +58,12 @@ Pod::Spec.new do |s|
       s.dependency "ReactCommon/turbomodule/core"
     end
   end
+  if new_arch_enabled
+    s.subspec "common" do |ss|
+      ss.source_files         = ["common/cpp/**/*.{cpp,h}"]
+      ss.header_dir           = "react/renderer/components/reactnativekeyboardcontroller"
+      ss.private_header_files = "common/cpp/**/*.{h}"
+      ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\"" }
+    end
+  end
 end

package/react-native.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        componentDescriptors: [
+          "KeyboardControllerViewComponentDescriptor",
+          "KeyboardGestureAreaComponentDescriptor",
+          "OverKeyboardViewComponentDescriptor",
+        ],
+        cmakeListsPath: "../android/src/main/jni/CMakeLists.txt",
+      },
+    },
+  },
+};

package/src/components/KeyboardAvoidingView/index.tsx

@@ -106,14 +106,21 @@ const KeyboardAvoidingView = forwardRef<
       [relativeKeyboardHeight],
     );
 
-    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
-      "worklet";
+    const onLayoutWorklet = useCallback(
+      (layout: LayoutRectangle) => {
+        "worklet";
 
-      if (keyboard.isClosed.value || initialFrame.value === null) {
-        // eslint-disable-next-line react-compiler/react-compiler
-        initialFrame.value = layout;
-      }
-    }, []);
+        if (
+          keyboard.isClosed.value ||
+          initialFrame.value === null ||
+          behavior !== "height"
+        ) {
+          // eslint-disable-next-line react-compiler/react-compiler
+          initialFrame.value = layout;
+        }
+      },
+      [behavior],
+    );
     const onLayout = useCallback<NonNullable<ViewProps["onLayout"]>>(
       (e) => {
         runOnUI(onLayoutWorklet)(e.nativeEvent.layout);

package/src/components/KeyboardStickyView/index.tsx

@@ -1,10 +1,7 @@
 import React, { forwardRef, useMemo } from "react";
-import Reanimated, {
-  interpolate,
-  useAnimatedStyle,
-} from "react-native-reanimated";
+import { Animated } from "react-native";
 
-import { useReanimatedKeyboardAnimation } from "../../hooks";
+import { useKeyboardAnimation } from "../../hooks";
 
 import type { View, ViewProps } from "react-native";
 
@@ -41,25 +38,29 @@ const KeyboardStickyView = forwardRef<
     },
     ref,
   ) => {
-    const { height, progress } = useReanimatedKeyboardAnimation();
+    const { height, progress } = useKeyboardAnimation();
 
-    const stickyViewStyle = useAnimatedStyle(() => {
-      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
-
-      return {
-        transform: [{ translateY: enabled ? height.value + offset : closed }],
-      };
-    }, [closed, opened, enabled]);
+    const offset = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [closed, opened],
+    });
 
     const styles = useMemo(
-      () => [style, stickyViewStyle],
-      [style, stickyViewStyle],
+      () => [
+        {
+          transform: [
+            { translateY: enabled ? Animated.add(height, offset) : closed },
+          ],
+        },
+        style,
+      ],
+      [closed, enabled, height, offset, style],
     );
 
     return (
-      <Reanimated.View ref={ref} style={styles} {...props}>
+      <Animated.View ref={ref} style={styles} {...props}>
         {children}
-      </Reanimated.View>
+      </Animated.View>
     );
   },
 );

package/src/components/KeyboardToolbar/index.tsx

@@ -15,6 +15,11 @@ import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
 import type { ReactNode } from "react";
 import type { GestureResponderEvent, ViewProps } from "react-native";
 
+type SafeAreaInsets = {
+  left: number;
+  right: number;
+};
+
 export type KeyboardToolbarProps = Omit<
   ViewProps,
   "style" | "testID" | "children"
@@ -54,6 +59,7 @@ export type KeyboardToolbarProps = Omit<
    * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
    */
   opacity?: HEX;
+  insets?: SafeAreaInsets;
 } & Pick<KeyboardStickyViewProps, "offset" | "enabled">;
 
 const TEST_ID_KEYBOARD_TOOLBAR = "keyboard.toolbar";
@@ -72,7 +78,7 @@ const DEFAULT_OPACITY: HEX = "FF";
 const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   content,
   theme = colors,
-  doneText,
+  doneText = "Done",
   button,
   icon,
   showArrows = true,
@@ -83,6 +89,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   opacity = DEFAULT_OPACITY,
   offset: { closed = 0, opened = 0 } = {},
   enabled = true,
+  insets,
   ...rest
 }) => {
   const colorScheme = useColorScheme();
@@ -110,8 +117,12 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       {
         backgroundColor: `${theme[colorScheme].background}${opacity}`,
       },
+      {
+        paddingLeft: insets?.left,
+        paddingRight: insets?.right,
+      },
     ],
-    [colorScheme, opacity, theme],
+    [colorScheme, opacity, theme, insets],
   );
   const offset = useMemo(
     () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
@@ -156,7 +167,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
       <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
-          <>
+          <View style={styles.arrows}>
             <ButtonContainer
               accessibilityHint="Moves focus to the previous field"
               accessibilityLabel="Previous"
@@ -185,25 +196,27 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
                 type="next"
               />
             </ButtonContainer>
-          </>
+          </View>
         )}
 
         <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
           {content}
         </View>
-        <ButtonContainer
-          accessibilityHint="Closes the keyboard"
-          accessibilityLabel="Done"
-          rippleRadius={28}
-          style={styles.doneButtonContainer}
-          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
-          theme={theme}
-          onPress={onPressDone}
-        >
-          <Text maxFontSizeMultiplier={1.3} style={doneStyle}>
-            {doneText || "Done"}
-          </Text>
-        </ButtonContainer>
+        {doneText && (
+          <ButtonContainer
+            accessibilityHint="Closes the keyboard"
+            accessibilityLabel="Done"
+            rippleRadius={28}
+            style={styles.doneButtonContainer}
+            testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
+            theme={theme}
+            onPress={onPressDone}
+          >
+            <Text maxFontSizeMultiplier={1.3} style={doneStyle}>
+              {doneText}
+            </Text>
+          </ButtonContainer>
+        )}
       </View>
     </KeyboardStickyView>
   );
@@ -220,14 +233,18 @@ const styles = StyleSheet.create({
     width: "100%",
     flexDirection: "row",
     height: KEYBOARD_TOOLBAR_HEIGHT,
-    paddingHorizontal: 8,
+  },
+  arrows: {
+    flexDirection: "row",
+    paddingLeft: 8,
   },
   doneButton: {
     fontWeight: "600",
     fontSize: 15,
   },
   doneButtonContainer: {
-    marginRight: 8,
+    marginRight: 16,
+    marginLeft: 8,
   },
 });
 

package/src/hooks/index.ts

@@ -79,3 +79,4 @@ export function useFocusedInputHandler(
 }
 
 export * from "./useWindowDimensions";
+export * from "./useKeyboardState";

package/src/hooks/useKeyboardState/index.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+import { KeyboardEvents } from "../../bindings";
+import { KeyboardController } from "../../module";
+
+import type { KeyboardState } from "../../types";
+
+const EVENTS = ["keyboardDidShow", "keyboardDidHide"] as const;
+
+const getLatestState = () => ({
+  ...KeyboardController.state(),
+  isVisible: KeyboardController.isVisible(),
+});
+
+export const useKeyboardState = (): KeyboardState => {
+  const [state, setState] = useState(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),
+      ),
+    );
+
+    // 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);
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, []);
+
+  return state;
+};

package/src/module.ts

@@ -6,17 +6,24 @@ import type {
   KeyboardEventData,
 } from "./types";
 
-let isClosed = false;
-let lastEvent: KeyboardEventData | null = null;
+let isClosed = true;
+let lastState: KeyboardEventData = {
+  height: 0,
+  duration: 0,
+  timestamp: new Date().getTime(),
+  target: -1,
+  type: "default",
+  appearance: "default",
+};
 
 KeyboardEvents.addListener("keyboardDidHide", (e) => {
   isClosed = true;
-  lastEvent = e;
+  lastState = e;
 });
 
 KeyboardEvents.addListener("keyboardDidShow", (e) => {
   isClosed = false;
-  lastEvent = e;
+  lastState = e;
 });
 
 const dismiss = async (options?: DismissOptions): Promise<void> => {
@@ -38,7 +45,7 @@ const dismiss = async (options?: DismissOptions): Promise<void> => {
   });
 };
 const isVisible = () => !isClosed;
-const state = () => lastEvent;
+const state = () => lastState;
 
 export const KeyboardController: KeyboardControllerModule = {
   setDefaultMode: KeyboardControllerNative.setDefaultMode,

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -66,6 +66,6 @@ export interface NativeProps extends ViewProps {
   onFocusedInputSelectionChanged?: DirectEventHandler<FocusedInputSelectionChangedEvent>;
 }
 
-export default codegenNativeComponent<NativeProps>(
-  "KeyboardControllerView",
-) as HostComponent<NativeProps>;
+export default codegenNativeComponent<NativeProps>("KeyboardControllerView", {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/specs/KeyboardGestureAreaNativeComponent.ts

@@ -15,6 +15,6 @@ export interface NativeProps extends ViewProps {
   textInputNativeID?: string;
 }
 
-export default codegenNativeComponent<NativeProps>(
-  "KeyboardGestureArea",
-) as HostComponent<NativeProps>;
+export default codegenNativeComponent<NativeProps>("KeyboardGestureArea", {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/specs/OverKeyboardViewNativeComponent.ts

@@ -7,6 +7,6 @@ export interface NativeProps extends ViewProps {
   visible?: boolean;
 }
 
-export default codegenNativeComponent<NativeProps>(
-  "OverKeyboardView",
-) as HostComponent<NativeProps>;
+export default codegenNativeComponent<NativeProps>("OverKeyboardView", {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;

package/src/types.ts

@@ -131,7 +131,7 @@ export type KeyboardControllerModule = {
   dismiss: (options?: DismissOptions) => Promise<void>;
   setFocusTo: (direction: Direction) => void;
   isVisible: () => boolean;
-  state: () => KeyboardEventData | null;
+  state: () => KeyboardEventData;
 };
 export type KeyboardControllerNativeModule = {
   // android only
@@ -159,6 +159,9 @@ export type KeyboardEventData = {
   type: NonNullable<TextInputProps["keyboardType"]>;
   appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
 };
+export type KeyboardState = {
+  isVisible: boolean;
+} & KeyboardEventData;
 export type KeyboardEventsModule = {
   addListener: (
     name: KeyboardControllerEvents,

package/src/views/OverKeyboardView/index.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from "react";
 import { Platform, StyleSheet, View } from "react-native";
 
-import { IS_FABRIC } from "../../architecture";
 import { RCTOverKeyboardView } from "../../bindings";
 import { useWindowDimensions } from "../../hooks";
 
@@ -18,8 +17,9 @@ const OverKeyboardView = ({
     () => [
       styles.absolute,
       // On iOS - stretch view to full window dimensions to make yoga work
-      // On Android Fabric we temporarily use the same approach
-      Platform.OS === "ios" || IS_FABRIC ? inner : undefined,
+      Platform.OS === "ios" ? inner : undefined,
+      // On Android - we are laid out by ShadowNode, so just stretch to full container
+      Platform.OS === "android" ? styles.stretch : undefined,
     ],
     [inner],
   );
@@ -28,7 +28,8 @@ const OverKeyboardView = ({
     <RCTOverKeyboardView visible={visible}>
       {/* `OverKeyboardView` should always have a single child */}
       <View collapsable={false} style={style}>
-        {children}
+        {/* Match RN behavior and trigger mount/unmount when visibility changes */}
+        {visible && children}
       </View>
     </RCTOverKeyboardView>
   );
@@ -38,6 +39,12 @@ const styles = StyleSheet.create({
   absolute: {
     position: "absolute",
   },
+  stretch: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
 });
 
 export default OverKeyboardView;

package/lib/commonjs/architecture.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IS_FABRIC = void 0;
-const IS_FABRIC = exports.IS_FABRIC = "nativeFabricUIManager" in global;
-//# sourceMappingURL=architecture.js.map

package/lib/commonjs/architecture.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["IS_FABRIC","exports","global"],"sources":["architecture.ts"],"sourcesContent":["export const IS_FABRIC = \"nativeFabricUIManager\" in global;\n"],"mappings":";;;;;;AAAO,MAAMA,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,uBAAuB,IAAIE,MAAM","ignoreList":[]}

package/lib/module/architecture.js

@@ -1,2 +0,0 @@
-export const IS_FABRIC = "nativeFabricUIManager" in global;
-//# sourceMappingURL=architecture.js.map

package/lib/module/architecture.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["IS_FABRIC","global"],"sources":["architecture.ts"],"sourcesContent":["export const IS_FABRIC = \"nativeFabricUIManager\" in global;\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG,uBAAuB,IAAIC,MAAM","ignoreList":[]}

package/lib/typescript/architecture.d.ts

@@ -1 +0,0 @@
-export declare const IS_FABRIC: boolean;

package/src/architecture.ts

@@ -1 +0,0 @@
-export const IS_FABRIC = "nativeFabricUIManager" in global;