@react-native-ohos/react-native-keyboard-controller 1.16.6-rc.1

package/src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

@@ -0,0 +1,133 @@
+import { Platform } from "react-native";
+import {
+  Easing,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+import { useKeyboardHandler } from "../../hooks";
+
+const IS_ANDROID_ELEVEN_OR_HIGHER =
+  Platform.OS === "android" && Platform.Version >= 30;
+// on these platforms keyboard transitions will be smooth
+const IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS =
+  IS_ANDROID_ELEVEN_OR_HIGHER || Platform.OS === "ios" || Platform.OS as string === 'harmony';
+// on Android Telegram is not using androidx.core values and uses custom interpolation
+// duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
+// and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+const TELEGRAM_ANDROID_TIMING_CONFIG = {
+  duration: 250,
+  easing: Easing.bezier(
+    0.19919472913616398,
+    0.010644531250000006,
+    0.27920937042459737,
+    0.91025390625,
+  ),
+};
+
+/**
+ * Hook that uses default transitions for iOS and Android > 11, and uses
+ * custom interpolation on Android < 11 to achieve more smooth animation
+ */
+export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
+  handler,
+  deps,
+) => {
+  const target = useSharedValue(-1);
+  const height = useSharedValue(0);
+  const persistedHeight = useSharedValue(0);
+  const animatedKeyboardHeight = useSharedValue(0);
+
+  useAnimatedReaction(
+    () => {
+      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+        return;
+      }
+      if (persistedHeight.value === 0) {
+        return;
+      }
+      const event = {
+        // it'll be always `TELEGRAM_ANDROID_TIMING_CONFIG.duration`, since we're running animation via `withTiming`
+        duration: TELEGRAM_ANDROID_TIMING_CONFIG.duration,
+        target: target.value,
+        height: animatedKeyboardHeight.value,
+        progress: animatedKeyboardHeight.value / persistedHeight.value,
+      };
+      return event;
+    },
+    (evt) => {
+      if (!evt) {
+        return;
+      }
+      handler.onMove?.(evt);
+
+      // dispatch `onEnd`
+      if (evt.height === height.value) {
+        handler.onEnd?.(evt);
+        // eslint-disable-next-line react-compiler/react-compiler
+        persistedHeight.value = height.value;
+      }
+    },
+    // REA uses own version of `DependencyList` and it's not compatible with the same type from React
+    deps as unknown[],
+  );
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        "worklet";
+
+        // immediately dispatch onStart/onEnd events if onStart dispatched with the same height
+        // and don't wait for animation 250ms
+        if (
+          !IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS &&
+          e.height === persistedHeight.value
+        ) {
+          handler.onStart?.(e);
+          handler.onEnd?.(e);
+
+          return;
+        }
+
+        target.value = e.target;
+        height.value = e.height;
+
+        if (e.height > 0) {
+          persistedHeight.value = e.height;
+        }
+        // if we are running on Android < 9, then we are using custom interpolation
+        // to achieve smoother animation and use `animatedKeyboardHeight` as animation
+        // driver
+        if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          animatedKeyboardHeight.value = withTiming(
+            e.height,
+            TELEGRAM_ANDROID_TIMING_CONFIG,
+          );
+        }
+
+        handler.onStart?.({
+          ...e,
+          duration: IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS
+            ? e.duration
+            : TELEGRAM_ANDROID_TIMING_CONFIG.duration,
+        });
+      },
+      onMove: (e) => {
+        "worklet";
+
+        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          handler.onMove?.(e);
+        }
+      },
+      onEnd: (e) => {
+        "worklet";
+
+        if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+          handler.onEnd?.(e);
+        }
+      },
+    },
+    deps,
+  );
+};

package/src/components/KeyboardAwareScrollView/utils.ts

@@ -0,0 +1,41 @@
+export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
+  worklet: F,
+  wait = 0,
+) => {
+  "worklet";
+
+  const value = {
+    time: 0,
+  };
+
+  return (...args: Parameters<F>): ReturnType<F> | void => {
+    "worklet";
+
+    const t = Date.now();
+    const now = t - value.time;
+
+    if (now < wait) {
+      value.time = t;
+      return;
+    }
+
+    value.time = t;
+
+    return worklet(...args);
+  };
+};
+
+export const scrollDistanceWithRespectToSnapPoints = (
+  defaultScrollValue: number,
+  snapPoints?: number[],
+) => {
+  "worklet";
+
+  let snapPoint: number | undefined;
+
+  if (snapPoints) {
+    snapPoint = snapPoints.find((offset) => offset >= defaultScrollValue);
+  }
+
+  return snapPoint ?? defaultScrollValue;
+};

package/src/components/KeyboardStickyView/index.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef, useMemo } from "react";
+import Reanimated, {
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+import { useReanimatedKeyboardAnimation } from "../../hooks";
+
+import type { View, ViewProps } from "react-native";
+
+export type KeyboardStickyViewProps = {
+  /**
+   * Specify additional offset to the view for given keyboard state.
+   */
+  offset?: {
+    /**
+     * Adds additional `translateY` when keyboard is close. By default `0`.
+     */
+    closed?: number;
+    /**
+     * Adds additional `translateY` when keyboard is open. By default `0`.
+     */
+    opened?: number;
+  };
+
+  /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true` */
+  enabled?: boolean;
+} & ViewProps;
+
+const KeyboardStickyView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardStickyViewProps>
+>(
+  (
+    {
+      children,
+      offset: { closed = 0, opened = 0 } = {},
+      style,
+      enabled = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const { height, progress } = useReanimatedKeyboardAnimation();
+    const stickyViewStyle = useAnimatedStyle(() => {
+      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
+
+      return {
+        transform: [{ translateY: enabled ? height.value + offset : closed }],
+      };
+    }, [closed, opened, enabled]);
+
+    const styles = useMemo(
+      () => [style, stickyViewStyle],
+      [style, stickyViewStyle],
+    );
+
+    return (
+      <Reanimated.View ref={ref} style={styles} {...props}>
+        {children}
+      </Reanimated.View>
+    );
+  },
+);
+
+export default KeyboardStickyView;

package/src/components/KeyboardToolbar/Arrow.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+
+import useColorScheme from "../hooks/useColorScheme";
+
+import type { KeyboardToolbarTheme } from "./types";
+import type { ViewStyle } from "react-native";
+
+type ArrowProps = {
+  type: "prev" | "next";
+  disabled?: boolean;
+  theme: KeyboardToolbarTheme;
+};
+
+const ArrowComponent: React.FC<ArrowProps> = ({ type, disabled, theme }) => {
+  const colorScheme = useColorScheme();
+
+  const color = useMemo(
+    () => ({
+      backgroundColor: disabled
+        ? theme[colorScheme].disabled
+        : theme[colorScheme].primary,
+    }),
+    [disabled, theme, colorScheme],
+  );
+  const left = useMemo(() => [styles.arrowLeftLine, color], [color]);
+  const right = useMemo(() => [styles.arrowRightLine, color], [color]);
+
+  return (
+    <View
+      style={
+        type === "next" ? styles.arrowDownContainer : styles.arrowUpContainer
+      }
+    >
+      <View style={styles.arrow}>
+        <Animated.View style={left} />
+        <Animated.View style={right} />
+      </View>
+    </View>
+  );
+};
+
+const arrowLine: ViewStyle = {
+  width: 13,
+  height: 2,
+  borderRadius: 1,
+};
+const arrowUpContainer: ViewStyle = {
+  marginHorizontal: 5,
+  width: 30,
+  height: 30,
+  justifyContent: "center",
+  alignItems: "center",
+};
+const styles = StyleSheet.create({
+  arrowUpContainer: arrowUpContainer,
+  arrowDownContainer: {
+    ...arrowUpContainer,
+    transform: [{ rotate: "180deg" }],
+  },
+  arrow: {
+    width: 20,
+    height: 20,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  arrowLeftLine: {
+    ...arrowLine,
+    transform: [{ rotate: "-45deg" }],
+    left: -0.5,
+  },
+  arrowRightLine: {
+    ...arrowLine,
+    transform: [{ rotate: "45deg" }],
+    left: -5.5,
+  },
+});
+
+export default ArrowComponent;

package/src/components/KeyboardToolbar/Button.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from "react";
+import {
+  Platform,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+import useColorScheme from "../hooks/useColorScheme";
+
+import type { KeyboardToolbarTheme } from "./types";
+import type { PropsWithChildren } from "react";
+import type { ViewStyle } from "react-native";
+
+type ButtonProps = {
+  disabled?: boolean;
+  onPress: () => void;
+  accessibilityLabel: string;
+  accessibilityHint: string;
+  testID: string;
+  rippleRadius?: number;
+  style?: ViewStyle;
+  theme: KeyboardToolbarTheme;
+};
+
+const ButtonIOS = ({
+  children,
+  onPress,
+  disabled,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  style,
+}: PropsWithChildren<ButtonProps>) => {
+  // immediately switch to plain view to avoid animation flickering
+  // when fade out animation happens and view becomes disabled
+  const Container = disabled
+    ? (View as unknown as typeof TouchableOpacity)
+    : TouchableOpacity;
+  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
+
+  return (
+    <Container
+      accessibilityState={accessibilityState}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      onPress={onPress}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </Container>
+  );
+};
+const ButtonAndroid = ({
+  children,
+  onPress,
+  disabled,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+  rippleRadius = 18,
+  style,
+  theme,
+}: PropsWithChildren<ButtonProps>) => {
+  const colorScheme = useColorScheme();
+  const accessibilityState = useMemo(() => ({ disabled }), [disabled]);
+  const ripple = useMemo(
+    () =>
+      TouchableNativeFeedback.Ripple(
+        theme[colorScheme].ripple,
+        true,
+        rippleRadius,
+      ),
+    [colorScheme, rippleRadius, theme],
+  );
+
+  return (
+    <TouchableNativeFeedback
+      accessibilityState={accessibilityState}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      onPress={onPress}
+      background={ripple}
+      testID={testID}
+      style={style}
+    >
+      <View style={style}>{children}</View>
+    </TouchableNativeFeedback>
+  );
+};
+
+export default Platform.select({
+  android: ButtonAndroid,
+  default: ButtonIOS,
+});

package/src/components/KeyboardToolbar/colors.native.ts

@@ -0,0 +1,37 @@
+import { Platform, PlatformColor } from "react-native";
+
+import type { KeyboardToolbarTheme } from "./types";
+import type { ColorValue } from "react-native";
+
+export const colors: KeyboardToolbarTheme = {
+  light: {
+    primary: Platform.select<ColorValue>({
+      ios: PlatformColor("link"),
+      default: "#2c2c2c",
+    }),
+    disabled: Platform.select<ColorValue>({
+      ios: PlatformColor("systemGray4"),
+      default: "#B0BEC5",
+    }),
+    background: Platform.select({
+      ios: "#F8F8F8",
+      default: "#f3f3f4",
+    }),
+    ripple: "#bcbcbcbc",
+  },
+  dark: {
+    primary: Platform.select<ColorValue>({
+      ios: PlatformColor("label"),
+      default: "#fafafa",
+    }),
+    disabled: Platform.select<ColorValue>({
+      ios: PlatformColor("systemGray"),
+      default: "#707070",
+    }),
+    background: Platform.select({
+      ios: "#555756",
+      default: "#2C2C2E",
+    }),
+    ripple: "#F8F8F888",
+  },
+};

package/src/components/KeyboardToolbar/colors.ts

@@ -0,0 +1,16 @@
+import type { KeyboardToolbarTheme } from "./types";
+
+export const colors: KeyboardToolbarTheme = {
+  light: {
+    primary: "#2c2c2c",
+    disabled: "#B0BEC5",
+    background: "#f3f3f4",
+    ripple: "#bcbcbcbc",
+  },
+  dark: {
+    primary: "#fafafa",
+    disabled: "#707070",
+    background: "#2C2C2E",
+    ripple: "#F8F8F888",
+  },
+};

package/src/components/KeyboardToolbar/index.tsx

@@ -0,0 +1,223 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import {
+  FocusedInputEvents,
+} from "../../bindings";
+import KeyboardStickyView from "../KeyboardStickyView"
+import { KeyboardControllerNative } from "../../bindings";
+import useColorScheme from "../hooks/useColorScheme";
+
+import Arrow from "./Arrow";
+import Button from "./Button";
+import { colors } from "./colors";
+
+import type { HEX, KeyboardToolbarTheme } from "./types";
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+
+export type KeyboardToolbarProps = Omit<
+  ViewProps,
+  "style" | "testID" | "children"
+> & {
+  /** An element that is shown in the middle of the toolbar. */
+  content?: JSX.Element | null;
+  /** A set of dark/light colors consumed by toolbar component. */
+  theme?: KeyboardToolbarTheme;
+  /** Custom text for done button. */
+  doneText?: ReactNode;
+  /** Custom touchable component for toolbar (used for prev/next/done buttons). */
+  button?: typeof Button;
+  /** Custom icon component used to display next/prev buttons. */
+  icon?: typeof Arrow;
+  /**
+   * Whether to show next and previous buttons. Can be useful to set it to `false` if you have only one input
+   * and want to show only `Done` button. Default to `true`.
+   */
+  showArrows?: boolean;
+  /**
+   * A callback that is called when the user presses the next button along with the default action.
+   */
+  onNextCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the previous button along with the default action.
+   */
+  onPrevCallback?: () => void;
+  /**
+   * A callback that is called when the user presses the done button along with the default action.
+   */
+  onDoneCallback?: () => void;
+  /**
+   * A component that applies blur effect to the toolbar.
+   */
+  blur?: JSX.Element | null;
+  /**
+   * A value for container opacity in hexadecimal format (e.g. `ff`). Default value is `ff`.
+   */
+  opacity?: HEX;
+} & 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";
+
+const dismissKeyboard = () => KeyboardControllerNative.dismiss(false);
+const goToNextField = () => KeyboardControllerNative.setFocusTo("next");
+const goToPrevField = () => KeyboardControllerNative.setFocusTo("prev");
+
+/**
+ * `KeyboardToolbar` is a component that is shown above the keyboard with `Prev`/`Next` and
+ * `Done` buttons.
+ */
+const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
+  content,
+  theme = colors,
+  doneText,
+  button,
+  icon,
+  showArrows = true,
+  onNextCallback,
+  onPrevCallback,
+  onDoneCallback,
+  blur = null,
+  opacity = DEFAULT_OPACITY,
+  offset: { closed = 0, opened = 0 } = {},
+  enabled = true,
+  ...rest
+}) => {
+  const colorScheme = useColorScheme();
+  const [inputs, setInputs] = useState({
+    current: 0,
+    count: 0,
+  });
+  const isPrevDisabled = inputs.current === 0;
+  const isNextDisabled = inputs.current === inputs.count - 1;
+
+  useEffect(() => {
+    const subscription = FocusedInputEvents.addListener("focusDidSet", (e) => {
+      setInputs(e);
+    });
+
+    return subscription.remove;
+  }, []);
+  const doneStyle = useMemo(
+    () => [styles.doneButton, { color: theme[colorScheme].primary }],
+    [colorScheme, theme],
+  );
+  const toolbarStyle = useMemo(
+    () => [
+      styles.toolbar,
+      {
+        backgroundColor: `${theme[colorScheme].background}${opacity}`,
+      },
+    ],
+    [colorScheme, opacity, theme],
+  );
+  const offset = useMemo(
+    () => ({ closed: closed + KEYBOARD_TOOLBAR_HEIGHT, opened }),
+    [closed, opened],
+  );
+  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]);
+
+  return (
+    <KeyboardStickyView enabled={enabled} offset={offset}>
+      <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+        {blur}
+        {showArrows && (
+          <>
+            <ButtonContainer
+              accessibilityLabel="Previous"
+              accessibilityHint="Will move focus to previous field"
+              disabled={isPrevDisabled}
+              onPress={onPressPrev}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_PREVIOUS}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isPrevDisabled}
+                type="prev"
+                theme={theme}
+              />
+            </ButtonContainer>
+            <ButtonContainer
+              accessibilityLabel="Next"
+              accessibilityHint="Will move focus to next field"
+              disabled={isNextDisabled}
+              onPress={onPressNext}
+              testID={TEST_ID_KEYBOARD_TOOLBAR_NEXT}
+              theme={theme}
+            >
+              <IconContainer
+                disabled={isNextDisabled}
+                type="next"
+                theme={theme}
+              />
+            </ButtonContainer>
+          </>
+        )}
+
+        <View style={styles.flex} testID={TEST_ID_KEYBOARD_TOOLBAR_CONTENT}>
+          {content}
+        </View>
+        <ButtonContainer
+          accessibilityLabel="Done"
+          accessibilityHint="Will close the keyboard"
+          onPress={onPressDone}
+          testID={TEST_ID_KEYBOARD_TOOLBAR_DONE}
+          rippleRadius={28}
+          style={styles.doneButtonContainer}
+          theme={theme}
+        >
+          <Text style={doneStyle} maxFontSizeMultiplier={1.3}>
+            {doneText || "Done"}
+          </Text>
+        </ButtonContainer>
+      </View>
+    </KeyboardStickyView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  toolbar: {
+    position: "absolute",
+    bottom: 0,
+    alignItems: "center",
+    width: "100%",
+    flexDirection: "row",
+    height: KEYBOARD_TOOLBAR_HEIGHT,
+    paddingHorizontal: 8,
+  },
+  doneButton: {
+    fontWeight: "600",
+    fontSize: 15,
+  },
+  doneButtonContainer: {
+    marginRight: 8,
+  },
+});
+
+export { colors as DefaultKeyboardToolbarTheme };
+export default KeyboardToolbar;