react-native-keyboard-controller 1.10.6 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.10.6",
+  "version": "1.11.1",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -48,6 +48,10 @@
     "avoiding view",
     "sticky view",
     "keyboard aware scroll view",
+    "keyboard toolbar",
+    "keyboard done button",
+    "keyboard next button",
+    "keyboard previous button",
     "ios",
     "android"
   ],

package/src/bindings.native.ts

@@ -1,6 +1,7 @@
 import { NativeEventEmitter, Platform } from "react-native";
 
 import type {
+  FocusedInputEventsModule,
   KeyboardControllerModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
@@ -28,11 +29,20 @@ export const KeyboardController = (
       )
 ) as KeyboardControllerModule;
 
+const KEYBOARD_CONTROLLER_NAMESPACE = "KeyboardController::";
 const eventEmitter = new NativeEventEmitter(KeyboardController);
 
 export const KeyboardEvents: KeyboardEventsModule = {
   addListener: (name, cb) =>
-    eventEmitter.addListener("KeyboardController::" + 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 KeyboardControllerView: React.FC<KeyboardControllerProps> =
   require("./specs/KeyboardControllerViewNativeComponent").default;

package/src/bindings.ts

@@ -1,6 +1,7 @@
 import { View } from "react-native";
 
 import type {
+  FocusedInputEventsModule,
   KeyboardControllerModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
@@ -13,12 +14,20 @@ 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 KeyboardControllerView =
   View as unknown as React.FC<KeyboardControllerProps>;
 export const KeyboardGestureArea =

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -18,7 +18,11 @@ import {
 import { useSmoothKeyboardHandler } from "./useSmoothKeyboardHandler";
 import { debounce } from "./utils";
 
-import type { ScrollView, ScrollViewProps } from "react-native";
+import type {
+  LayoutChangeEvent,
+  ScrollView,
+  ScrollViewProps,
+} from "react-native";
 import type { FocusedInputLayoutChangedEvent } from "react-native-keyboard-controller";
 
 type KeyboardAwareScrollViewProps = {
@@ -75,6 +79,7 @@ const KeyboardAwareScrollView = forwardRef<
   (
     {
       children,
+      onLayout,
       bottomOffset = 0,
       disableScrollOnKeyboardHide = false,
       enabled = true,
@@ -83,6 +88,7 @@ const KeyboardAwareScrollView = forwardRef<
     ref,
   ) => {
     const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
+    const scrollViewTarget = useSharedValue<number | null>(null);
     const scrollPosition = useSharedValue(0);
     const position = useSharedValue(0);
     const currentKeyboardFrameHeight = useSharedValue(0);
@@ -114,6 +120,14 @@ const KeyboardAwareScrollView = forwardRef<
 
       scrollViewAnimatedRef(assignedRef);
     }, []);
+    const onScrollViewLayout = useCallback(
+      (e: LayoutChangeEvent & { nativeEvent: { target: number } }) => {
+        scrollViewTarget.value = e.nativeEvent.target;
+
+        onLayout?.(e);
+      },
+      [onLayout],
+    );
 
     /**
      * Function that will scroll a ScrollView as keyboard gets moving
@@ -126,6 +140,11 @@ const KeyboardAwareScrollView = forwardRef<
           return 0;
         }
 
+        // input belongs to ScrollView
+        if (layout.value?.parentScrollViewTarget !== scrollViewTarget.value) {
+          return 0;
+        }
+
         const visibleRect = height - keyboardHeight.value;
         const absoluteY = layout.value?.layout.absoluteY || 0;
         const inputHeight = layout.value?.layout.height || 0;
@@ -300,7 +319,8 @@ const KeyboardAwareScrollView = forwardRef<
       <Reanimated.ScrollView
         ref={onRef}
         {...rest}
-        // @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
+        // @ts-expect-error https://github.com/facebook/react-native/pull/42785
+        onLayout={onScrollViewLayout}
         onScrollReanimated={onScroll}
         scrollEventThrottle={16}
       >

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,154 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+import {
+  FocusedInputEvents,
+  KeyboardStickyView,
+} from "react-native-keyboard-controller";
+
+import { KeyboardController } from "../../bindings";
+import useColorScheme from "../hooks/useColorScheme";
+
+import Arrow from "./Arrow";
+import Button from "./Button";
+import { colors } from "./colors";
+
+import type { 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;
+};
+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 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,
+}) => {
+  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,
+      },
+    ],
+    [colorScheme, theme],
+  );
+  const ButtonContainer = button || Button;
+  const IconContainer = icon || Arrow;
+
+  return (
+    <KeyboardStickyView offset={offset}>
+      <View style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+        <ButtonContainer
+          accessibilityLabel="Previous"
+          accessibilityHint="Will move focus to previous field"
+          disabled={isPrevDisabled}
+          onPress={goToPrevField}
+          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={goToNextField}
+          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={dismissKeyboard}
+          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,16 @@
+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: ColorValue;
+  /** Color for ripple effect (on button touch) on Android */
+  ripple: ColorValue;
+};
+export type KeyboardToolbarTheme = {
+  light: Theme;
+  dark: Theme;
+};

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/hooks/useKeyboardInterpolation.ts

@@ -49,15 +49,16 @@ const useKeyboardInterpolation = () => {
       );
     }
 
-    lastInterpolation.value = interpolateREA(
+    const interpolation = interpolateREA(
       keyboardPosition,
       [prevKeyboardHeight.value, nextKeyboardHeight.value],
       shouldUseInternalInterpolation.value
         ? [lastInterpolation.value, output[1]]
         : output,
     );
+    lastInterpolation.value = interpolation;
 
-    return lastInterpolation.value;
+    return interpolation;
   };
 
   useKeyboardHandler(

package/src/components/index.ts

@@ -1,3 +1,8 @@
 export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
 export { default as KeyboardStickyView } from "./KeyboardStickyView";
 export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
+export {
+  default as KeyboardToolbar,
+  DefaultKeyboardToolbarTheme,
+  KeyboardToolbarProps,
+} from "./KeyboardToolbar";

package/src/index.ts

@@ -1,6 +1,5 @@
 export * from "./bindings";
 export * from "./animated";
-export * from "./replicas";
 export * from "./context";
 export * from "./hooks";
 export * from "./constants";
@@ -10,4 +9,8 @@ export {
   KeyboardAvoidingView,
   KeyboardStickyView,
   KeyboardAwareScrollView,
+  // keyboard toolbar
+  KeyboardToolbar,
+  DefaultKeyboardToolbarTheme,
+  KeyboardToolbarProps,
 } from "./components";

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -17,6 +17,7 @@ type KeyboardMoveEvent = Readonly<{
 
 type FocusedInputLayoutChangedEvent = Readonly<{
   target: Int32;
+  parentScrollViewTarget: Int32;
   layout: {
     x: Double;
     y: Double;

package/src/specs/NativeKeyboardController.ts

@@ -9,6 +9,7 @@ export interface Spec extends TurboModule {
   setInputMode(mode: number): void;
   setDefaultMode(): void;
   dismiss(): void;
+  setFocusTo(direction: string): void;
 
   // event emitter
   addListener: (eventName: string) => void;

package/src/types.ts

@@ -13,6 +13,7 @@ export type NativeEvent = {
 };
 export type FocusedInputLayoutChangedEvent = {
   target: number;
+  parentScrollViewTarget: number;
   layout: {
     x: number;
     y: number;
@@ -81,12 +82,14 @@ export type KeyboardGestureAreaProps = {
   enableSwipeToDismiss?: boolean;
 } & ViewProps;
 
+export type Direction = "next" | "prev" | "current";
 export type KeyboardControllerModule = {
   // android only
   setDefaultMode: () => void;
   setInputMode: (mode: number) => void;
   // all platforms
   dismiss: () => void;
+  setFocusTo: (direction: Direction) => void;
   // native event module stuff
   addListener: (eventName: string) => void;
   removeListeners: (count: number) => void;
@@ -110,6 +113,17 @@ export type KeyboardEventsModule = {
     cb: (e: KeyboardEventData) => void,
   ) => EmitterSubscription;
 };
+export type FocusedInputAvailableEvents = "focusDidSet";
+export type FocusedInputEventData = {
+  current: number;
+  count: number;
+};
+export type FocusedInputEventsModule = {
+  addListener: (
+    name: FocusedInputAvailableEvents,
+    cb: (e: FocusedInputEventData) => void,
+  ) => EmitterSubscription;
+};
 
 // reanimated hook declaration
 export type KeyboardHandlerHook<TContext, Event> = (