react-native-keyboard-controller 1.21.13 → 1.22.0

package/src/components/KeyboardEffects/index.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef, useEffect, useMemo, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+
+import {
+  KEYBOARD_BORDER_RADIUS,
+  KEYBOARD_HAS_ROUNDED_CORNERS,
+} from "../../constants";
+import { KeyboardController } from "../../module";
+import KeyboardStickyView from "../KeyboardStickyView";
+
+import type { KeyboardStickyViewProps } from "../KeyboardStickyView";
+
+type TranslucentStackEntry = { translucent: boolean };
+
+const translucentStack: TranslucentStackEntry[] = [];
+let currentTranslucent = false;
+
+const applyTranslucent = () => {
+  const next =
+    translucentStack.length > 0
+      ? translucentStack[translucentStack.length - 1].translucent
+      : false;
+
+  if (next !== currentTranslucent) {
+    currentTranslucent = next;
+    KeyboardController.setTranslucent(next);
+  }
+};
+
+const pushTranslucentEntry = (entry: TranslucentStackEntry) => {
+  translucentStack.push(entry);
+  applyTranslucent();
+};
+
+const removeTranslucentEntry = (entry: TranslucentStackEntry) => {
+  const index = translucentStack.indexOf(entry);
+
+  if (index !== -1) {
+    translucentStack.splice(index, 1);
+  }
+
+  applyTranslucent();
+};
+
+export type KeyboardEffectsProps = {
+  /**
+   * Whether the keyboard backdrop should be translucent.
+   *
+   * @default false
+   */
+  translucent?: boolean;
+} & KeyboardStickyViewProps;
+
+/**
+ * A component that renders content behind the keyboard. Since the keyboard
+ * is translucent, the content (colors, gradients, animations) will blend
+ * through and create visual effects on the keyboard.
+ *
+ * On iOS 26+ the keyboard has rounded corners, and the effect view
+ * automatically matches that shape.
+ *
+ * @returns A view component positioned behind the keyboard.
+ * @example
+ * ```tsx
+ * <KeyboardEffects>
+ *   <View style={{ flex: 1, backgroundColor: "purple" }} />
+ * </KeyboardEffects>
+ * ```
+ */
+const KeyboardEffects = forwardRef<
+  View,
+  React.PropsWithChildren<KeyboardEffectsProps>
+>(({ translucent, children, ...props }, ref) => {
+  const stackEntry = useRef<TranslucentStackEntry>({
+    translucent: Boolean(translucent),
+  }).current;
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      KEYBOARD_HAS_ROUNDED_CORNERS && !translucent && styles.rounded,
+    ],
+    [translucent],
+  );
+
+  useEffect(() => {
+    pushTranslucentEntry(stackEntry);
+
+    return () => {
+      removeTranslucentEntry(stackEntry);
+    };
+  }, [stackEntry]);
+
+  useEffect(() => {
+    stackEntry.translucent = Boolean(translucent);
+    applyTranslucent();
+  }, [stackEntry, translucent]);
+
+  return (
+    <KeyboardStickyView ref={ref} {...props}>
+      <View style={containerStyle}>{children}</View>
+    </KeyboardStickyView>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 999,
+  },
+  rounded: {
+    borderTopLeftRadius: KEYBOARD_BORDER_RADIUS,
+    borderTopRightRadius: KEYBOARD_BORDER_RADIUS,
+    overflow: "hidden",
+  },
+});
+
+export default KeyboardEffects;

package/src/components/KeyboardToolbar/constants.ts

@@ -1,4 +1,4 @@
-import { KEYBOARD_BORDER_RADIUS } from "../../constants";
+import { KEYBOARD_HAS_ROUNDED_CORNERS } from "../../constants";
 
 import type { HEX } from "./types";
 
@@ -10,5 +10,4 @@ export const TEST_ID_KEYBOARD_TOOLBAR_DONE = `${TEST_ID_KEYBOARD_TOOLBAR}.done`;
 
 export const KEYBOARD_TOOLBAR_HEIGHT = 42;
 export const DEFAULT_OPACITY: HEX = "FF";
-export const KEYBOARD_HAS_ROUNDED_CORNERS = KEYBOARD_BORDER_RADIUS > 0;
 export const OPENED_OFFSET = KEYBOARD_HAS_ROUNDED_CORNERS ? -11 : 0;

package/src/components/KeyboardToolbar/index.tsx

@@ -5,6 +5,7 @@ import {
   FocusedInputEvents,
   RCTKeyboardToolbarGroupView,
 } from "../../bindings";
+import { KEYBOARD_HAS_ROUNDED_CORNERS } from "../../constants";
 import { useKeyboardState } from "../../hooks";
 import KeyboardStickyView from "../KeyboardStickyView";
 
@@ -15,7 +16,6 @@ import { Background, Content, Done, Next, Prev } from "./compound/components";
 import { ToolbarContext } from "./compound/context";
 import {
   DEFAULT_OPACITY,
-  KEYBOARD_HAS_ROUNDED_CORNERS,
   KEYBOARD_TOOLBAR_HEIGHT,
   OPENED_OFFSET,
   TEST_ID_KEYBOARD_TOOLBAR,

package/src/components/index.ts

@@ -6,8 +6,10 @@ export {
   DefaultKeyboardToolbarTheme,
 } from "./KeyboardToolbar";
 export { default as KeyboardChatScrollView } from "./KeyboardChatScrollView";
+export { default as KeyboardEffects } from "./KeyboardEffects";
 export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
 export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
+export type { KeyboardEffectsProps } from "./KeyboardEffects";
 export type {
   KeyboardAwareScrollViewMode,
   KeyboardAwareScrollViewProps,

package/src/constants.ts

@@ -21,3 +21,4 @@ export enum AndroidSoftInputModes {
 }
 export const KEYBOARD_BORDER_RADIUS =
   KeyboardControllerNative.getConstants().keyboardBorderRadius;
+export const KEYBOARD_HAS_ROUNDED_CORNERS = KEYBOARD_BORDER_RADIUS > 0;

package/src/index.ts

@@ -15,6 +15,7 @@ export {
   // keyboard toolbar
   KeyboardToolbar,
   DefaultKeyboardToolbarTheme,
+  KeyboardEffects,
 } from "./components";
 export type {
   KeyboardChatScrollViewProps,
@@ -24,5 +25,6 @@ export type {
   KeyboardAwareScrollViewProps,
   KeyboardAwareScrollViewRef,
   KeyboardToolbarProps,
+  KeyboardEffectsProps,
 } from "./components";
 export { OverKeyboardView, KeyboardExtender } from "./views";

package/src/module.ts

@@ -56,6 +56,7 @@ export const KeyboardController: KeyboardControllerModule = {
   setInputMode: KeyboardControllerNative.setInputMode,
   setFocusTo: KeyboardControllerNative.setFocusTo,
   preload: KeyboardControllerNative.preload,
+  setTranslucent: KeyboardControllerNative.setTranslucent,
   dismiss,
   isVisible,
   state,

package/src/specs/NativeKeyboardController.ts

@@ -11,6 +11,7 @@ export interface Spec extends TurboModule {
   setInputMode(mode: number): void;
   setDefaultMode(): void;
   preload(): void;
+  setTranslucent(translucent: boolean): void;
   dismiss(keepFocus: boolean, animated: boolean): void;
   setFocusTo(direction: string): void;
   viewPositionInWindow(viewTag: number): Promise<object>;

package/src/types/module.ts

@@ -82,6 +82,12 @@ export type KeyboardControllerModule = {
    * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller#preload-|docs} page for more details.
    */
   preload: () => void;
+  /**
+   * Sets the keyboard backdrop translucency.
+   *
+   * @platform ios
+   */
+  setTranslucent: (translucent: boolean) => void;
   // all platforms
   /**
    * Dismisses the active keyboard. Removes a focus by default, but allows to pass `{keepFocus: true}` to keep focus.
@@ -121,6 +127,7 @@ export type KeyboardControllerNativeModule = {
   setInputMode: (mode: number) => void;
   // ios only
   preload: () => void;
+  setTranslucent: (translucent: boolean) => void;
   // all platforms
   dismiss: (keepFocus: boolean, animated: boolean) => void;
   setFocusTo: (direction: Direction) => void;