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

package/src/components/KeyboardStickyView/index.tsx

@@ -0,0 +1,57 @@
+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;
+  };
+} & ViewProps;
+
+const KeyboardStickyView = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardStickyViewProps>
+>(
+  (
+    { children, offset: { closed = 0, opened = 0 } = {}, style, ...props },
+    ref,
+  ) => {
+    const { height, progress } = useReanimatedKeyboardAnimation();
+    const stickyViewStyle = useAnimatedStyle(() => {
+      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
+
+      return {
+        transform: [{ translateY: height.value + offset }],
+      };
+    }, [closed, opened]);
+
+    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,211 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import {
+  FocusedInputEvents,
+} from "../../bindings";
+import KeyboardStickyView from "../KeyboardStickyView"
+import { KeyboardController } 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 { ReactNode } from "react";
+
+export type KeyboardToolbarProps = {
+  /** 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;
+};
+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 offset = { closed: KEYBOARD_TOOLBAR_HEIGHT };
+
+const dismissKeyboard = () => KeyboardController.dismiss();
+const goToNextField = () => KeyboardController.setFocusTo("next");
+const goToPrevField = () => KeyboardController.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,
+}) => {
+  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 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 offset={offset}>
+      <View 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;

package/src/components/KeyboardToolbar/types.ts

@@ -0,0 +1,40 @@
+import type { ColorValue } from "react-native";
+
+type Theme = {
+  /** Color for arrow when it's enabled */
+  primary: ColorValue;
+  /** Color for arrow when it's disabled */
+  disabled: ColorValue;
+  /** Keyboard toolbar background color */
+  background: string;
+  /** Color for ripple effect (on button touch) on Android */
+  ripple: ColorValue;
+};
+export type KeyboardToolbarTheme = {
+  light: Theme;
+  dark: Theme;
+};
+type HexSymbol =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F"
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f";
+export type HEX = `${HexSymbol}${HexSymbol}`;

package/src/components/hooks/useColorScheme.ts

@@ -0,0 +1,5 @@
+import { useColorScheme as useColorSchemeRN } from "react-native";
+
+const useColorScheme = () => useColorSchemeRN() || "light";
+
+export default useColorScheme;

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { default as KeyboardStickyView } from "./KeyboardStickyView";
+export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
+export {
+  default as KeyboardToolbar,
+  DefaultKeyboardToolbarTheme,
+} from "./KeyboardToolbar";
+export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
+export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardAwareScrollViewProps } from "./KeyboardAwareScrollView";
+export type { KeyboardToolbarProps } from "./KeyboardToolbar";

package/src/constants.ts

@@ -0,0 +1,19 @@
+// copied from `android.view.WindowManager.LayoutParams`
+export enum AndroidSoftInputModes {
+  SOFT_INPUT_ADJUST_NOTHING = 48,
+  SOFT_INPUT_ADJUST_PAN = 32,
+  SOFT_INPUT_ADJUST_RESIZE = 16,
+  SOFT_INPUT_ADJUST_UNSPECIFIED = 0,
+  SOFT_INPUT_IS_FORWARD_NAVIGATION = 256,
+  SOFT_INPUT_MASK_ADJUST = 240,
+  SOFT_INPUT_MASK_STATE = 15,
+  SOFT_INPUT_MODE_CHANGED = 512,
+  SOFT_INPUT_STATE_ALWAYS_HIDDEN = 3,
+  SOFT_INPUT_STATE_ALWAYS_VISIBLE = 5,
+  SOFT_INPUT_STATE_HIDDEN = 2,
+  SOFT_INPUT_STATE_UNCHANGED = 1,
+  // temporarily disable this rule to avoid breaking changes.
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  SOFT_INPUT_STATE_UNSPECIFIED = 0,
+  SOFT_INPUT_STATE_VISIBLE = 4,
+}

package/src/context.ts

@@ -0,0 +1,65 @@
+import { createContext, useContext } from "react";
+import { Animated } from "react-native";
+
+import type {
+  FocusedInputHandlers,
+  FocusedInputLayoutChangedEvent,
+  KeyboardHandlers,
+} from "./types";
+import type React from "react";
+import type { SharedValue } from "react-native-reanimated";
+
+export type AnimatedContext = {
+  progress: Animated.Value;
+  height: Animated.AnimatedMultiplication<number>;
+};
+export type ReanimatedContext = {
+  progress: SharedValue<number>;
+  height: SharedValue<number>;
+};
+export type KeyboardAnimationContext = {
+  enabled: boolean;
+  animated: AnimatedContext;
+  reanimated: ReanimatedContext;
+  layout: SharedValue<FocusedInputLayoutChangedEvent | null>;
+  setKeyboardHandlers: (handlers: KeyboardHandlers) => void;
+  setInputHandlers: (handlers: FocusedInputHandlers) => void;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+};
+const NOOP = () => {};
+const withSharedValue = <T>(value: T): SharedValue<T> => ({
+  value,
+  addListener: NOOP,
+  removeListener: NOOP,
+  modify: NOOP,
+});
+const DEFAULT_SHARED_VALUE = withSharedValue(0);
+const DEFAULT_LAYOUT = withSharedValue<FocusedInputLayoutChangedEvent | null>(
+  null,
+);
+const defaultContext: KeyboardAnimationContext = {
+  enabled: true,
+  animated: {
+    progress: new Animated.Value(0),
+    height: new Animated.Value(0),
+  },
+  reanimated: {
+    progress: DEFAULT_SHARED_VALUE,
+    height: DEFAULT_SHARED_VALUE,
+  },
+  layout: DEFAULT_LAYOUT,
+  setKeyboardHandlers: NOOP,
+  setInputHandlers: NOOP,
+  setEnabled: NOOP,
+};
+export const KeyboardContext = createContext(defaultContext);
+export const useKeyboardContext = () => {
+  const context = useContext(KeyboardContext);
+  if (__DEV__ && context === defaultContext) {
+    console.warn(
+      "Couldn't find real values for `KeyboardContext`. Please make sure you're inside of `KeyboardProvider` - otherwise functionality of `react-native-keyboard-controller` will not work.",
+    );
+  }
+
+  return context;
+};