react-native-keyboard-controller 1.10.6 → 1.11.0

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 "./colors";
+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 "./colors";
+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.ts

@@ -0,0 +1,51 @@
+import { Platform, PlatformColor } from "react-native";
+
+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;
+};
+
+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/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 "./colors";
+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/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> = (

package/lib/commonjs/replicas.js

@@ -1,125 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useReanimatedKeyboardAnimationReplica = exports.useKeyboardAnimationReplica = exports.useGradualKeyboardAnimation = exports.defaultAndroidEasing = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _reactNativeReanimated = require("react-native-reanimated");
-var _bindings = require("./bindings");
-var _constants = require("./constants");
-var _hooks = require("./hooks");
-const availableOSEventType = _reactNative.Platform.OS === "ios" ? "Will" : "Did";
-
-// cubic-bezier(.17,.67,.34,.94)
-const defaultAndroidEasing = _reactNative.Easing.bezier(0.4, 0.0, 0.2, 1);
-exports.defaultAndroidEasing = defaultAndroidEasing;
-/**
- * An experimental implementation of tracing keyboard appearance.
- * Switch an input mode to adjust resize mode. In this case all did* events
- * are triggering before keyboard appears, and using some approximations
- * it tries to mimicries a native transition.
- *
- * @returns {Animated.Value}
- */
-const useKeyboardAnimationReplica = () => {
-  const height = (0, _react.useRef)(new _reactNative.Animated.Value(0));
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0));
-  const animation = (0, _react.useMemo)(() => ({
-    height: height.current,
-    progress: progress.current
-  }), []);
-  (0, _react.useEffect)(() => {
-    _bindings.KeyboardController.setInputMode(_constants.AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
-    return () => _bindings.KeyboardController.setDefaultMode();
-  }, []);
-  (0, _react.useEffect)(() => {
-    const listener = _reactNative.Keyboard.addListener(`keyboard${availableOSEventType}Show`, e => {
-      _reactNative.Animated.timing(height.current, {
-        toValue: -e.endCoordinates.height,
-        duration: e.duration !== 0 ? e.duration : 300,
-        easing: _reactNative.Easing.bezier(0.4, 0.0, 0.2, 1),
-        useNativeDriver: true
-      }).start();
-      return () => listener.remove();
-    });
-  }, []);
-  (0, _react.useEffect)(() => {
-    const listener = _reactNative.Keyboard.addListener(`keyboard${availableOSEventType}Hide`, e => {
-      _reactNative.Animated.timing(height.current, {
-        toValue: 0,
-        duration: e.duration !== 0 ? e.duration : 300,
-        easing: _reactNative.Easing.bezier(0.4, 0.0, 0.2, 1),
-        useNativeDriver: true
-      }).start();
-      return () => listener.remove();
-    });
-  }, []);
-  return animation;
-};
-exports.useKeyboardAnimationReplica = useKeyboardAnimationReplica;
-const IOS_SPRING_CONFIG = {
-  damping: 500,
-  stiffness: 1000,
-  mass: 3,
-  overshootClamping: true,
-  restDisplacementThreshold: 10,
-  restSpeedThreshold: 10
-};
-
-/**
- * A close replica to native iOS keyboard animation. The problem is that
- * iOS (unlike Android) can not fire events for each keyboard frame movement.
- * As a result we can not get gradual values (for example, for progress it always
- * will be 1 or 0). So if you want to rely on gradual values you will need to use
- * this replica.
- *
- * The transition is hardcoded and may vary from one to another OS versions. But it
- * seems like last time it has been changed in iOS 7. Since RN supports at least iOS
- * 11 it doesn't make sense to replicate iOS 7 behavior. If it changes in next OS
- * versions, then this implementation should be revisited and reflect necessary changes.
- *
- * @returns {height, progress} - animated values
- */
-const useReanimatedKeyboardAnimationReplica = () => {
-  const height = (0, _reactNativeReanimated.useSharedValue)(0);
-  const heightEvent = (0, _reactNativeReanimated.useSharedValue)(0);
-  const progress = (0, _reactNativeReanimated.useDerivedValue)(() => height.value / heightEvent.value);
-  const handler = (0, _react.useCallback)(_height => {
-    "worklet";
-
-    heightEvent.value = _height;
-  }, []);
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => ({
-    _keyboardHeight: heightEvent.value
-  }), (result, _previousResult) => {
-    const {
-      _keyboardHeight
-    } = result;
-    const _previousKeyboardHeight = _previousResult === null || _previousResult === void 0 ? void 0 : _previousResult._keyboardHeight;
-    if (_keyboardHeight !== _previousKeyboardHeight) {
-      height.value = (0, _reactNativeReanimated.withSpring)(_keyboardHeight, IOS_SPRING_CONFIG);
-    }
-  }, []);
-  (0, _react.useEffect)(() => {
-    const show = _reactNative.Keyboard.addListener("keyboardWillShow", e => {
-      (0, _reactNativeReanimated.runOnUI)(handler)(-e.endCoordinates.height);
-    });
-    const hide = _reactNative.Keyboard.addListener("keyboardWillHide", () => {
-      (0, _reactNativeReanimated.runOnUI)(handler)(0);
-    });
-    return () => {
-      show.remove();
-      hide.remove();
-    };
-  }, []);
-  return {
-    height,
-    progress
-  };
-};
-exports.useReanimatedKeyboardAnimationReplica = useReanimatedKeyboardAnimationReplica;
-const useGradualKeyboardAnimation = _reactNative.Platform.OS === "ios" ? useReanimatedKeyboardAnimationReplica : _hooks.useReanimatedKeyboardAnimation;
-exports.useGradualKeyboardAnimation = useGradualKeyboardAnimation;
-//# sourceMappingURL=replicas.js.map