@react-native-ohos/react-native-keyboard-controller 1.12.8-beta.9

package/src/animated.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Animated, Platform, StyleSheet } from "react-native";
+import Reanimated, { useSharedValue, Easing, withTiming } from "react-native-reanimated";
+
+import { KeyboardControllerView } from "./bindings";
+import { KeyboardContext } from "./context";
+import { useAnimatedValue, useSharedHandlers } from "./internal";
+import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
+import {
+  useAnimatedKeyboardHandler,
+  useFocusedInputLayoutHandler,
+  useFocusedInputSelectionHandler,
+  useFocusedInputTextHandler,
+} from "./reanimated";
+
+import type { KeyboardAnimationContext } from "./context";
+import type {
+  FocusedInputHandler,
+  FocusedInputLayoutChangedEvent,
+  KeyboardControllerProps,
+  KeyboardHandler,
+  NativeEvent,
+} from "./types";
+import type { ViewStyle } from "react-native";
+
+const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
+  Animated.createAnimatedComponent(
+    KeyboardControllerView,
+  ) as React.FC<KeyboardControllerProps>,
+);
+
+type Styles = {
+  container: ViewStyle;
+  hidden: ViewStyle;
+};
+
+const styles = StyleSheet.create<Styles>({
+  container: {
+    flex: 1,
+  },
+  hidden: {
+    display: "none",
+    position: "absolute",
+  },
+});
+
+type KeyboardProviderProps = {
+  children: React.ReactNode;
+  /**
+   * Set the value to `true`, if you use translucent status bar on Android.
+   * If you already control status bar translucency via `react-native-screens`
+   * or `StatusBar` component from `react-native`, you can ignore it.
+   * Defaults to `false`.
+   *
+   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
+   * @platform android
+   */
+  statusBarTranslucent?: boolean;
+  /**
+   * Set the value to `true`, if you use translucent navigation bar on Android.
+   * Defaults to `false`.
+   *
+   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119
+   * @platform android
+   */
+  navigationBarTranslucent?: boolean;
+  /**
+   * A boolean prop indicating whether the module is enabled. It indicate only initial state,
+   * i. e. if you try to change this prop after component mount it will not have any effect.
+   * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
+   * Defaults to `true`.
+   */
+  enabled?: boolean;
+};
+
+// capture `Platform.OS` in separate variable to avoid deep workletization of entire RN package
+// see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/393 and https://github.com/kirillzyusko/react-native-keyboard-controller/issues/294 for more details
+const OS = Platform.OS;
+
+export const KeyboardProvider = ({
+  children,
+  statusBarTranslucent,
+  navigationBarTranslucent,
+  enabled: initiallyEnabled = true,
+}: KeyboardProviderProps) => {
+  // state
+  const [enabled, setEnabled] = useState(initiallyEnabled);
+  // animated values
+  const progress = useAnimatedValue(0);
+  const height = useAnimatedValue(0);
+  // shared values
+  const progressSV = useSharedValue(0);
+  const heightSV = useSharedValue(0);
+  const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
+  const [setKeyboardHandlers, broadcastKeyboardEvents] =
+    useSharedHandlers<KeyboardHandler>();
+  const [setInputHandlers, broadcastInputEvents] =
+    useSharedHandlers<FocusedInputHandler>();
+  // memo
+  const context = useMemo<KeyboardAnimationContext>(
+    () => ({
+      enabled,
+      animated: { progress: progress, height: Animated.multiply(height, -1) },
+      reanimated: { progress: progressSV, height: heightSV },
+      layout,
+      setKeyboardHandlers,
+      setInputHandlers,
+      setEnabled,
+    }),
+    [enabled],
+  );
+  const style = useMemo(
+    () => [
+      styles.hidden,
+      { transform: [{ translateX: height }, { translateY: progress }] },
+    ],
+    [],
+  );
+  const onKeyboardMove = useMemo(
+    () =>
+      Animated.event(
+        [
+          {
+            nativeEvent: {
+              progress,
+              height,
+            },
+          },
+        ],
+        { useNativeDriver: Platform.OS as string == 'harmony' ? false : true },
+      ),
+    [],
+  );
+  // handlers
+  const updateSharedValues = (event: NativeEvent, platforms: string[]) => {
+    "worklet";
+
+    if (platforms.includes(OS)) {
+      // eslint-disable-next-line react-compiler/react-compiler
+      if (Platform.OS as string == 'harmony') {
+        const dur = 460
+        progressSV.value = withTiming(event.progress, { duration: dur, easing: Easing.out(Easing.exp) });
+        heightSV.value = withTiming(-event.height, { duration: dur, easing: Easing.out(Easing.exp) });
+      } else {
+        progressSV.value = event.progress;
+        heightSV.value = -event.height;
+
+      }
+    }
+  };
+  const keyboardHandler = useAnimatedKeyboardHandler(
+    {
+      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);
+        updateSharedValues(event, ['harmony']);
+      },
+      onKeyboardMoveInteractive: (event: NativeEvent) => {
+        "worklet";
+
+        updateSharedValues(event, ["android", "ios"]);
+        broadcastKeyboardEvents("onInteractive", event);
+      },
+    },
+    [],
+  );
+  const inputLayoutHandler = useFocusedInputLayoutHandler(
+    {
+      onFocusedInputLayoutChanged: (e) => {
+        "worklet";
+
+        if (e.target !== -1) {
+          layout.value = e;
+        } else {
+          layout.value = null;
+        }
+      },
+    },
+    [],
+  );
+  const inputTextHandler = useFocusedInputTextHandler(
+    {
+      onFocusedInputTextChanged: (e) => {
+        "worklet";
+
+        broadcastInputEvents("onChangeText", e);
+      },
+    },
+    [],
+  );
+  const inputSelectionHandler = useFocusedInputSelectionHandler(
+    {
+      onFocusedInputSelectionChanged: (e) => {
+        "worklet";
+        broadcastInputEvents("onSelectionChange", e);
+      },
+    },
+    [],
+  );
+  // effects
+  useEffect(() => {
+    if (enabled) {
+      applyMonkeyPatch();
+    } else {
+      revertMonkeyPatch();
+    }
+  }, [enabled]);
+
+  return (
+    <KeyboardContext.Provider value={context}>
+      <KeyboardControllerViewAnimated
+        enabled={enabled}
+        onKeyboardMoveReanimated={keyboardHandler}
+        onKeyboardMoveStart={OS === "ios" ? onKeyboardMove : undefined}
+        onKeyboardMove={OS === "android" ? onKeyboardMove : undefined}
+        onKeyboardMoveInteractive={onKeyboardMove}
+        onKeyboardMoveEnd={OS as string === "harmony" ? onKeyboardMove : undefined}
+        onFocusedInputLayoutChangedReanimated={inputLayoutHandler}
+        onFocusedInputTextChangedReanimated={inputTextHandler}
+        onFocusedInputSelectionChangedReanimated={inputSelectionHandler}
+        navigationBarTranslucent={navigationBarTranslucent}
+        statusBarTranslucent={statusBarTranslucent}
+        style={styles.container}
+      >
+        <Reanimated.View style={styles.container}>{children}</Reanimated.View>
+        {/* {children} */}
+      </KeyboardControllerViewAnimated>
+      <Animated.View
+        // we are using this small hack, because if the component (where
+        // animated value has been used) is unmounted, then animation will
+        // stop receiving events (seems like it's react-native optimization).
+        // So we need to keep a reference to the animated value, to keep it's
+        // always mounted (keep a reference to an animated value).
+        //
+        // To test why it's needed, try to open screen which consumes Animated.Value
+        // then close it and open it again (for example 'Animated transition').
+        style={style}
+      />
+    </KeyboardContext.Provider>
+  );
+};

package/src/bindings.native.ts

@@ -0,0 +1,57 @@
+import { NativeEventEmitter, Platform } from "react-native";
+
+import type {
+  FocusedInputEventsModule,
+  KeyboardControllerModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardGestureAreaProps,
+  WindowDimensionsEventsModule,
+} from "./types";
+
+const LINKING_ERROR =
+  `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: "" }) +
+  "- You rebuilt the app after installing the package\n" +
+  "- You are not using Expo Go\n";
+
+const RCTKeyboardController =
+  require("./specs/NativeKeyboardController").default;
+export const KeyboardController = (
+  RCTKeyboardController
+    ? RCTKeyboardController
+    : new Proxy(
+        {},
+        {
+          get() {
+            throw new Error(LINKING_ERROR);
+          },
+        },
+      )
+) as KeyboardControllerModule;
+
+const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
+const eventEmitter = new NativeEventEmitter(KeyboardController);
+
+export const KeyboardEvents: KeyboardEventsModule = {
+  addListener: (name, cb) =>
+    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
+};
+/**
+ * This API is not documented, it's for internal usage only (for now), and is a subject to potential breaking changes in future.
+ * Use it with cautious.
+ */
+export const FocusedInputEvents: FocusedInputEventsModule = {
+  addListener: (name, cb) =>
+    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
+};
+export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
+  addListener: (name, cb) =>
+    eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
+};
+export const KeyboardControllerView: React.FC<KeyboardControllerProps> =
+  require("./specs/KeyboardControllerViewNativeComponent").default;
+export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
+  Platform.OS === "android" && Platform.Version >= 30
+    ? require("./specs/KeyboardGestureAreaNativeComponent").default
+    : ({ children }: KeyboardGestureAreaProps) => children;

package/src/bindings.ts

@@ -0,0 +1,38 @@
+import { View } from "react-native";
+
+import type {
+  FocusedInputEventsModule,
+  KeyboardControllerModule,
+  KeyboardControllerProps,
+  KeyboardEventsModule,
+  KeyboardGestureAreaProps,
+  WindowDimensionsEventsModule,
+} from "./types";
+import type { EmitterSubscription } from "react-native";
+
+const NOOP = () => {};
+export const KeyboardController: KeyboardControllerModule = {
+  setDefaultMode: NOOP,
+  setInputMode: NOOP,
+  dismiss: NOOP,
+  setFocusTo: NOOP,
+  addListener: NOOP,
+  removeListeners: NOOP,
+};
+export const KeyboardEvents: KeyboardEventsModule = {
+  addListener: () => ({ remove: NOOP } as EmitterSubscription),
+};
+/**
+ * This API is not documented, it's for internal usage only (for now), and is a subject to potential breaking changes in future.
+ * Use it with cautious.
+ */
+export const FocusedInputEvents: FocusedInputEventsModule = {
+  addListener: () => ({ remove: NOOP } as EmitterSubscription),
+};
+export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
+  addListener: () => ({ remove: NOOP } as EmitterSubscription),
+};
+export const KeyboardControllerView =
+  View as unknown as React.FC<KeyboardControllerProps>;
+export const KeyboardGestureArea =
+  View as unknown as React.FC<KeyboardGestureAreaProps>;

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -0,0 +1,58 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import {useKeyboardHandler} from "../../hooks";
+import {useKeyboardContext} from "../../context";
+import { Platform } from "react-native";
+
+export const useKeyboardAnimation = () => {
+  const { reanimated } = useKeyboardContext();
+  const heightWhenOpened = useSharedValue(-reanimated.height.value);
+  const height = useSharedValue(-reanimated.height.value);
+  const progress = useSharedValue(reanimated.progress.value);
+  const isClosed = useSharedValue(reanimated.progress.value === 0);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        if (e.height > 0) {
+          // eslint-disable-next-line react-compiler/react-compiler
+          isClosed.value = false;
+          heightWhenOpened.value = e.height;
+        }
+      },
+      onMove: (e) => {
+        "worklet";
+  
+        progress.value = e.progress;
+        height.value = e.height;
+      },
+      onEnd: (e) => {
+        "worklet";
+       if(Platform.OS as string === 'harmony'){
+        heightWhenOpened.value = e.height;
+       }
+  
+        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;
+        }
+      },
+    },
+    [],
+  );
+
+  return { height, progress, heightWhenOpened, isClosed };
+};

package/src/components/KeyboardAvoidingView/index.tsx

@@ -0,0 +1,156 @@
+import React, { forwardRef, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import Reanimated, {
+  interpolate,
+  runOnUI,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+
+import { useWindowDimensions } from "../../hooks";
+
+import { useKeyboardAnimation } from "./hooks";
+
+import type { LayoutRectangle, ViewProps } from "react-native";
+
+export type KeyboardAvoidingViewProps = {
+  /**
+   * Specify how to react to the presence of the keyboard.
+   */
+  behavior?: "height" | "position" | "padding";
+
+  /**
+   * Style of the content container when `behavior` is 'position'.
+   */
+  contentContainerStyle?: ViewProps["style"];
+
+  /**
+   * Controls whether this `KeyboardAvoidingView` instance should take effect.
+   * This is useful when more than one is on the screen. Defaults to true.
+   */
+  enabled?: boolean;
+
+  /**
+   * Distance between the top of the user screen and the React Native view. This
+   * may be non-zero in some cases. Defaults to 0.
+   */
+  keyboardVerticalOffset?: number;
+} & ViewProps;
+
+const defaultLayout: LayoutRectangle = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+/**
+ * View that moves out of the way when the keyboard appears by automatically
+ * adjusting its height, position, or bottom padding.
+ */
+const KeyboardAvoidingView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardAvoidingViewProps>
+>(
+  (
+    {
+      behavior,
+      children,
+      contentContainerStyle,
+      enabled = true,
+      keyboardVerticalOffset = 0,
+      style,
+      onLayout: onLayoutProps,
+      ...props
+    },
+    ref,
+  ) => {
+    const initialFrame = useSharedValue<LayoutRectangle | null>(null);
+    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);
+
+    const keyboard = useKeyboardAnimation();
+    const { height: screenHeight } = useWindowDimensions();
+
+    const relativeKeyboardHeight = useCallback(() => {
+      "worklet";
+
+      const keyboardY =
+        screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
+
+      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
+    }, [screenHeight, keyboardVerticalOffset]);
+
+    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
+      "worklet";
+
+      if (keyboard.isClosed.value || initialFrame.value === null) {
+        // eslint-disable-next-line react-compiler/react-compiler
+        initialFrame.value = layout;
+      }
+    }, []);
+    const onLayout = useCallback<NonNullable<ViewProps["onLayout"]>>(
+      (e) => {
+        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
+        onLayoutProps?.(e);
+      },
+      [onLayoutProps],
+    );
+
+    const animatedStyle = useAnimatedStyle(() => {
+      const bottom = interpolate(
+        keyboard.progress.value,
+        [0, 1],
+        [0, relativeKeyboardHeight()],
+      );
+      const bottomHeight = enabled ? bottom : 0;
+
+      switch (behavior)  {
+        case "height":
+          if (!keyboard.isClosed.value) {
+            return {
+              height: frame.value.height - bottomHeight,
+              flex: 0,
+            };
+          }
+
+          return {};
+
+        case "position":
+          return { bottom: bottomHeight };
+
+        case "padding":
+          return { paddingBottom: bottomHeight };
+        default:
+          return {};
+      }
+    }, [behavior, enabled, relativeKeyboardHeight]);
+    const isPositionBehavior = behavior === "position";
+    const containerStyle = isPositionBehavior ? contentContainerStyle : style;
+    const combinedStyles = useMemo(
+      () => [containerStyle, animatedStyle],
+      [containerStyle, animatedStyle],
+    );
+
+    if (isPositionBehavior) {
+      return (
+        <View ref={ref} style={style} onLayout={onLayout} {...props}>
+          <Reanimated.View style={combinedStyles}>{children}</Reanimated.View>
+        </View>
+      );
+    }
+
+    return (
+      <Reanimated.View
+        ref={ref}
+        onLayout={onLayout}
+        style={combinedStyles}
+        {...props}
+      >
+        {children}
+      </Reanimated.View>
+    );
+  },
+);
+
+export default KeyboardAvoidingView;