react-native-keyboard-controller 1.13.3 → 1.14.0

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["KeyboardAvoidingView","KeyboardStickyView","KeyboardAwareScrollView","KeyboardToolbar","DefaultKeyboardToolbarTheme"],"sources":["index.ts"],"sourcesContent":["export * from \"./bindings\";\nexport * from \"./animated\";\nexport * from \"./context\";\nexport * from \"./hooks\";\nexport * from \"./constants\";\nexport * from \"./types\";\n\nexport {\n  KeyboardAvoidingView,\n  KeyboardStickyView,\n  KeyboardAwareScrollView,\n  // keyboard toolbar\n  KeyboardToolbar,\n  DefaultKeyboardToolbarTheme,\n} from \"./components\";\nexport type {\n  KeyboardAvoidingViewProps,\n  KeyboardStickyViewProps,\n  KeyboardAwareScrollViewProps,\n  KeyboardToolbarProps,\n} from \"./components\";\n"],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,SAAS;AAEvB,SACEA,oBAAoB,EACpBC,kBAAkB,EAClBC,uBAAuB;AACvB;AACAC,eAAe,EACfC,2BAA2B,QACtB,cAAc","ignoreList":[]}
+{"version":3,"names":["KeyboardAvoidingView","KeyboardStickyView","KeyboardAwareScrollView","KeyboardToolbar","DefaultKeyboardToolbarTheme","OverKeyboardView"],"sources":["index.ts"],"sourcesContent":["export * from \"./bindings\";\nexport * from \"./animated\";\nexport * from \"./context\";\nexport * from \"./hooks\";\nexport * from \"./constants\";\nexport * from \"./types\";\n\nexport {\n  KeyboardAvoidingView,\n  KeyboardStickyView,\n  KeyboardAwareScrollView,\n  // keyboard toolbar\n  KeyboardToolbar,\n  DefaultKeyboardToolbarTheme,\n} from \"./components\";\nexport type {\n  KeyboardAvoidingViewProps,\n  KeyboardStickyViewProps,\n  KeyboardAwareScrollViewProps,\n  KeyboardToolbarProps,\n} from \"./components\";\nexport { OverKeyboardView } from \"./views\";\n"],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,SAAS;AAEvB,SACEA,oBAAoB,EACpBC,kBAAkB,EAClBC,uBAAuB;AACvB;AACAC,eAAe,EACfC,2BAA2B,QACtB,cAAc;AAOrB,SAASC,gBAAgB,QAAQ,SAAS","ignoreList":[]}

package/lib/module/internal.js

@@ -3,19 +3,31 @@ import { Animated, findNodeHandle } from "react-native";
 import { registerEventHandler, unregisterEventHandler } from "./event-handler";
 export function useEventHandlerRegistration(map, viewTagRef) {
   const onRegisterHandler = handler => {
-    const viewTag = findNodeHandle(viewTagRef.current);
-    const ids = Object.keys(handler).map(handlerName => {
-      const eventName = map.get(handlerName);
-      const functionToCall = handler[handlerName];
-      if (eventName && viewTag) {
-        return registerEventHandler(event => {
-          "worklet";
-
-          functionToCall === null || functionToCall === void 0 || functionToCall(event);
-        }, eventName, viewTag);
+    const ids = [];
+    const attachWorkletHandlers = () => {
+      const viewTag = findNodeHandle(viewTagRef.current);
+      if (__DEV__ && !viewTag) {
+        console.warn("Can not attach worklet handlers for `react-native-keyboard-controller` because view tag can not be resolved. Be sure that `KeyboardProvider` is fully mounted before registering handlers. If you think it is a bug in library, please open an issue.");
       }
-      return null;
-    });
+      ids.push(...Object.keys(handler).map(handlerName => {
+        const eventName = map.get(handlerName);
+        const functionToCall = handler[handlerName];
+        if (eventName && viewTag) {
+          return registerEventHandler(event => {
+            "worklet";
+
+            functionToCall === null || functionToCall === void 0 || functionToCall(event);
+          }, eventName, viewTag);
+        }
+        return null;
+      }));
+    };
+    if (viewTagRef.current) {
+      attachWorkletHandlers();
+    } else {
+      // view may not be mounted yet - defer registration to next event loop
+      setImmediate(attachWorkletHandlers);
+    }
     return () => {
       ids.forEach(id => id ? unregisterEventHandler(id) : null);
     };

package/lib/module/internal.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","Animated","findNodeHandle","registerEventHandler","unregisterEventHandler","useEventHandlerRegistration","map","viewTagRef","onRegisterHandler","handler","viewTag","current","ids","Object","keys","handlerName","eventName","get","functionToCall","event","forEach","id","useAnimatedValue","initialValue","config","ref","Value"],"sources":["internal.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport { Animated, findNodeHandle } from \"react-native\";\n\nimport { registerEventHandler, unregisterEventHandler } from \"./event-handler\";\n\ntype EventHandler = (event: never) => void;\ntype ComponentOrHandle = Parameters<typeof findNodeHandle>[0];\n\nexport function useEventHandlerRegistration<\n  H extends Partial<Record<string, EventHandler>>,\n>(\n  map: Map<keyof H, string>,\n  viewTagRef: React.MutableRefObject<ComponentOrHandle>,\n) {\n  const onRegisterHandler = (handler: H) => {\n    const viewTag = findNodeHandle(viewTagRef.current);\n    const ids = Object.keys(handler).map((handlerName) => {\n      const eventName = map.get(handlerName as keyof H);\n      const functionToCall = handler[handlerName as keyof H];\n\n      if (eventName && viewTag) {\n        return registerEventHandler(\n          (event: Parameters<NonNullable<H[keyof H]>>[0]) => {\n            \"worklet\";\n\n            functionToCall?.(event);\n          },\n          eventName,\n          viewTag,\n        );\n      }\n\n      return null;\n    });\n\n    return () => {\n      ids.forEach((id) => (id ? unregisterEventHandler(id) : null));\n    };\n  };\n\n  return onRegisterHandler;\n}\n\n/**\n * TS variant of `useAnimatedValue` hook which is added in RN 0.71\n * A better alternative of storing animated values in refs, since\n * it doesn't recreate a new `Animated.Value` object on every re-render\n * and therefore consumes less memory. We can not use a variant from\n * RN, since this library supports earlier versions of RN.\n *\n * @see https://github.com/facebook/react-native/commit/e22217fe8b9455e32695f88ca835e11442b0a937\n */\nexport function useAnimatedValue(\n  initialValue: number,\n  config?: Animated.AnimatedConfig,\n): Animated.Value {\n  const ref = useRef<Animated.Value | null>(null);\n\n  if (ref.current === null) {\n    ref.current = new Animated.Value(initialValue, config);\n  }\n\n  return ref.current;\n}\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,OAAO;AAC9B,SAASC,QAAQ,EAAEC,cAAc,QAAQ,cAAc;AAEvD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAQ,iBAAiB;AAK9E,OAAO,SAASC,2BAA2BA,CAGzCC,GAAyB,EACzBC,UAAqD,EACrD;EACA,MAAMC,iBAAiB,GAAIC,OAAU,IAAK;IACxC,MAAMC,OAAO,GAAGR,cAAc,CAACK,UAAU,CAACI,OAAO,CAAC;IAClD,MAAMC,GAAG,GAAGC,MAAM,CAACC,IAAI,CAACL,OAAO,CAAC,CAACH,GAAG,CAAES,WAAW,IAAK;MACpD,MAAMC,SAAS,GAAGV,GAAG,CAACW,GAAG,CAACF,WAAsB,CAAC;MACjD,MAAMG,cAAc,GAAGT,OAAO,CAACM,WAAW,CAAY;MAEtD,IAAIC,SAAS,IAAIN,OAAO,EAAE;QACxB,OAAOP,oBAAoB,CACxBgB,KAA6C,IAAK;UACjD,SAAS;;UAETD,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAGC,KAAK,CAAC;QACzB,CAAC,EACDH,SAAS,EACTN,OACF,CAAC;MACH;MAEA,OAAO,IAAI;IACb,CAAC,CAAC;IAEF,OAAO,MAAM;MACXE,GAAG,CAACQ,OAAO,CAAEC,EAAE,IAAMA,EAAE,GAAGjB,sBAAsB,CAACiB,EAAE,CAAC,GAAG,IAAK,CAAC;IAC/D,CAAC;EACH,CAAC;EAED,OAAOb,iBAAiB;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASc,gBAAgBA,CAC9BC,YAAoB,EACpBC,MAAgC,EAChB;EAChB,MAAMC,GAAG,GAAGzB,MAAM,CAAwB,IAAI,CAAC;EAE/C,IAAIyB,GAAG,CAACd,OAAO,KAAK,IAAI,EAAE;IACxBc,GAAG,CAACd,OAAO,GAAG,IAAIV,QAAQ,CAACyB,KAAK,CAACH,YAAY,EAAEC,MAAM,CAAC;EACxD;EAEA,OAAOC,GAAG,CAACd,OAAO;AACpB","ignoreList":[]}
+{"version":3,"names":["useRef","Animated","findNodeHandle","registerEventHandler","unregisterEventHandler","useEventHandlerRegistration","map","viewTagRef","onRegisterHandler","handler","ids","attachWorkletHandlers","viewTag","current","__DEV__","console","warn","push","Object","keys","handlerName","eventName","get","functionToCall","event","setImmediate","forEach","id","useAnimatedValue","initialValue","config","ref","Value"],"sources":["internal.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport { Animated, findNodeHandle } from \"react-native\";\n\nimport { registerEventHandler, unregisterEventHandler } from \"./event-handler\";\n\ntype EventHandler = (event: never) => void;\ntype ComponentOrHandle = Parameters<typeof findNodeHandle>[0];\n\nexport function useEventHandlerRegistration<\n  H extends Partial<Record<string, EventHandler>>,\n>(\n  map: Map<keyof H, string>,\n  viewTagRef: React.MutableRefObject<ComponentOrHandle>,\n) {\n  const onRegisterHandler = (handler: H) => {\n    const ids: (number | null)[] = [];\n    const attachWorkletHandlers = () => {\n      const viewTag = findNodeHandle(viewTagRef.current);\n\n      if (__DEV__ && !viewTag) {\n        console.warn(\n          \"Can not attach worklet handlers for `react-native-keyboard-controller` because view tag can not be resolved. Be sure that `KeyboardProvider` is fully mounted before registering handlers. If you think it is a bug in library, please open an issue.\",\n        );\n      }\n\n      ids.push(\n        ...Object.keys(handler).map((handlerName) => {\n          const eventName = map.get(handlerName as keyof H);\n          const functionToCall = handler[handlerName as keyof H];\n\n          if (eventName && viewTag) {\n            return registerEventHandler(\n              (event: Parameters<NonNullable<H[keyof H]>>[0]) => {\n                \"worklet\";\n\n                functionToCall?.(event);\n              },\n              eventName,\n              viewTag,\n            );\n          }\n\n          return null;\n        }),\n      );\n    };\n\n    if (viewTagRef.current) {\n      attachWorkletHandlers();\n    } else {\n      // view may not be mounted yet - defer registration to next event loop\n      setImmediate(attachWorkletHandlers);\n    }\n\n    return () => {\n      ids.forEach((id) => (id ? unregisterEventHandler(id) : null));\n    };\n  };\n\n  return onRegisterHandler;\n}\n\n/**\n * TS variant of `useAnimatedValue` hook which is added in RN 0.71\n * A better alternative of storing animated values in refs, since\n * it doesn't recreate a new `Animated.Value` object on every re-render\n * and therefore consumes less memory. We can not use a variant from\n * RN, since this library supports earlier versions of RN.\n *\n * @see https://github.com/facebook/react-native/commit/e22217fe8b9455e32695f88ca835e11442b0a937\n */\nexport function useAnimatedValue(\n  initialValue: number,\n  config?: Animated.AnimatedConfig,\n): Animated.Value {\n  const ref = useRef<Animated.Value | null>(null);\n\n  if (ref.current === null) {\n    ref.current = new Animated.Value(initialValue, config);\n  }\n\n  return ref.current;\n}\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,OAAO;AAC9B,SAASC,QAAQ,EAAEC,cAAc,QAAQ,cAAc;AAEvD,SAASC,oBAAoB,EAAEC,sBAAsB,QAAQ,iBAAiB;AAK9E,OAAO,SAASC,2BAA2BA,CAGzCC,GAAyB,EACzBC,UAAqD,EACrD;EACA,MAAMC,iBAAiB,GAAIC,OAAU,IAAK;IACxC,MAAMC,GAAsB,GAAG,EAAE;IACjC,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;MAClC,MAAMC,OAAO,GAAGV,cAAc,CAACK,UAAU,CAACM,OAAO,CAAC;MAElD,IAAIC,OAAO,IAAI,CAACF,OAAO,EAAE;QACvBG,OAAO,CAACC,IAAI,CACV,uPACF,CAAC;MACH;MAEAN,GAAG,CAACO,IAAI,CACN,GAAGC,MAAM,CAACC,IAAI,CAACV,OAAO,CAAC,CAACH,GAAG,CAAEc,WAAW,IAAK;QAC3C,MAAMC,SAAS,GAAGf,GAAG,CAACgB,GAAG,CAACF,WAAsB,CAAC;QACjD,MAAMG,cAAc,GAAGd,OAAO,CAACW,WAAW,CAAY;QAEtD,IAAIC,SAAS,IAAIT,OAAO,EAAE;UACxB,OAAOT,oBAAoB,CACxBqB,KAA6C,IAAK;YACjD,SAAS;;YAETD,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAGC,KAAK,CAAC;UACzB,CAAC,EACDH,SAAS,EACTT,OACF,CAAC;QACH;QAEA,OAAO,IAAI;MACb,CAAC,CACH,CAAC;IACH,CAAC;IAED,IAAIL,UAAU,CAACM,OAAO,EAAE;MACtBF,qBAAqB,CAAC,CAAC;IACzB,CAAC,MAAM;MACL;MACAc,YAAY,CAACd,qBAAqB,CAAC;IACrC;IAEA,OAAO,MAAM;MACXD,GAAG,CAACgB,OAAO,CAAEC,EAAE,IAAMA,EAAE,GAAGvB,sBAAsB,CAACuB,EAAE,CAAC,GAAG,IAAK,CAAC;IAC/D,CAAC;EACH,CAAC;EAED,OAAOnB,iBAAiB;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASoB,gBAAgBA,CAC9BC,YAAoB,EACpBC,MAAgC,EAChB;EAChB,MAAMC,GAAG,GAAG/B,MAAM,CAAwB,IAAI,CAAC;EAE/C,IAAI+B,GAAG,CAAClB,OAAO,KAAK,IAAI,EAAE;IACxBkB,GAAG,CAAClB,OAAO,GAAG,IAAIZ,QAAQ,CAAC+B,KAAK,CAACH,YAAY,EAAEC,MAAM,CAAC;EACxD;EAEA,OAAOC,GAAG,CAAClB,OAAO;AACpB","ignoreList":[]}

package/lib/module/specs/OverKeyboardViewNativeComponent.js

@@ -0,0 +1,3 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+export default codegenNativeComponent("OverKeyboardView");
+//# sourceMappingURL=OverKeyboardViewNativeComponent.js.map

package/lib/module/specs/OverKeyboardViewNativeComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["codegenNativeComponent"],"sources":["OverKeyboardViewNativeComponent.ts"],"sourcesContent":["import codegenNativeComponent from \"react-native/Libraries/Utilities/codegenNativeComponent\";\n\nimport type { HostComponent } from \"react-native\";\nimport type { ViewProps } from \"react-native/Libraries/Components/View/ViewPropTypes\";\n\nexport interface NativeProps extends ViewProps {\n  visible?: boolean;\n}\n\nexport default codegenNativeComponent<NativeProps>(\n  \"OverKeyboardView\",\n) as HostComponent<NativeProps>;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,yDAAyD;AAS5F,eAAeA,sBAAsB,CACnC,kBACF,CAAC","ignoreList":[]}

package/lib/module/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type {\n  EmitterSubscription,\n  NativeSyntheticEvent,\n  ViewProps,\n} from \"react-native\";\n\n// DirectEventHandler events declaration\nexport type NativeEvent = {\n  progress: number;\n  height: number;\n  duration: number;\n  target: number;\n};\nexport type FocusedInputLayoutChangedEvent = {\n  target: number;\n  parentScrollViewTarget: number;\n  layout: {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n    absoluteX: number;\n    absoluteY: number;\n  };\n};\nexport type FocusedInputTextChangedEvent = {\n  text: string;\n};\nexport type FocusedInputSelectionChangedEvent = {\n  target: number;\n  selection: {\n    start: {\n      x: number;\n      y: number;\n      position: number;\n    };\n    end: {\n      x: number;\n      y: number;\n      position: number;\n    };\n  };\n};\nexport type EventWithName<T> = {\n  eventName: string;\n} & T;\n\n// native View/Module declarations\nexport type KeyboardControllerProps = {\n  //ref prop\n  ref?: React.Ref<React.Component<KeyboardControllerProps>>;\n  // callback props\n  onKeyboardMoveStart?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onKeyboardMove?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onKeyboardMoveEnd?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onKeyboardMoveInteractive?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onFocusedInputLayoutChanged?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>,\n  ) => void;\n  onFocusedInputTextChanged?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,\n  ) => void;\n  onFocusedInputSelectionChanged?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,\n  ) => void;\n  // fake props used to activate reanimated bindings\n  onKeyboardMoveReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onFocusedInputLayoutChangedReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>,\n  ) => void;\n  onFocusedInputTextChangedReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,\n  ) => void;\n  onFocusedInputSelectionChangedReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,\n  ) => void;\n  // props\n  statusBarTranslucent?: boolean;\n  navigationBarTranslucent?: boolean;\n  enabled?: boolean;\n} & ViewProps;\n\nexport type KeyboardGestureAreaProps = {\n  interpolator: \"ios\" | \"linear\";\n  /**\n   * Whether to allow to show a keyboard from dismissed state by swipe up.\n   * Default to `false`.\n   */\n  showOnSwipeUp?: boolean;\n  /**\n   * Whether to allow to control a keyboard by gestures. The strategy how\n   * it should be controlled is determined by `interpolator` property.\n   * Defaults to `true`.\n   */\n  enableSwipeToDismiss?: boolean;\n  /**\n   * Extra distance to the keyboard.\n   */\n  offset?: number;\n} & ViewProps;\n\nexport type Direction = \"next\" | \"prev\" | \"current\";\nexport type KeyboardControllerModule = {\n  // android only\n  setDefaultMode: () => void;\n  setInputMode: (mode: number) => void;\n  // all platforms\n  dismiss: () => void;\n  setFocusTo: (direction: Direction) => void;\n  // native event module stuff\n  addListener: (eventName: string) => void;\n  removeListeners: (count: number) => void;\n};\n\n// Event module declarations\nexport type KeyboardControllerEvents =\n  | \"keyboardWillShow\"\n  | \"keyboardDidShow\"\n  | \"keyboardWillHide\"\n  | \"keyboardDidHide\";\nexport type KeyboardEventData = {\n  height: number;\n  duration: number;\n  timestamp: number;\n  target: number;\n};\nexport type KeyboardEventsModule = {\n  addListener: (\n    name: KeyboardControllerEvents,\n    cb: (e: KeyboardEventData) => void,\n  ) => EmitterSubscription;\n};\nexport type FocusedInputAvailableEvents = \"focusDidSet\";\nexport type FocusedInputEventData = {\n  current: number;\n  count: number;\n};\nexport type FocusedInputEventsModule = {\n  addListener: (\n    name: FocusedInputAvailableEvents,\n    cb: (e: FocusedInputEventData) => void,\n  ) => EmitterSubscription;\n};\nexport type WindowDimensionsAvailableEvents = \"windowDidResize\";\nexport type WindowDimensionsEventData = {\n  width: number;\n  height: number;\n};\nexport type WindowDimensionsEventsModule = {\n  addListener: (\n    name: WindowDimensionsAvailableEvents,\n    cb: (e: WindowDimensionsEventData) => void,\n  ) => EmitterSubscription;\n};\n\n// reanimated hook declaration\nexport type KeyboardHandlerHook<TContext, Event> = (\n  handlers: {\n    onKeyboardMoveStart?: (e: NativeEvent, context: TContext) => void;\n    onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n    onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;\n    onKeyboardMoveInteractive?: (e: NativeEvent, context: TContext) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputLayoutHandlerHook<TContext, Event> = (\n  handlers: {\n    onFocusedInputLayoutChanged?: (\n      e: FocusedInputLayoutChangedEvent,\n      context: TContext,\n    ) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputTextHandlerHook<TContext, Event> = (\n  handlers: {\n    onFocusedInputTextChanged?: (\n      e: FocusedInputTextChangedEvent,\n      context: TContext,\n    ) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputSelectionHandlerHook<TContext, Event> = (\n  handlers: {\n    onFocusedInputSelectionChanged?: (\n      e: FocusedInputSelectionChangedEvent,\n      context: TContext,\n    ) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\n\n// package types\nexport type Handlers<T> = Record<string, T | undefined>;\nexport type KeyboardHandler = Partial<{\n  onStart: (e: NativeEvent) => void;\n  onMove: (e: NativeEvent) => void;\n  onEnd: (e: NativeEvent) => void;\n  onInteractive: (e: NativeEvent) => void;\n}>;\nexport type KeyboardHandlers = Handlers<KeyboardHandler>;\nexport type FocusedInputHandler = Partial<{\n  onChangeText: (e: FocusedInputTextChangedEvent) => void;\n  onSelectionChange: (e: FocusedInputSelectionChangedEvent) => void;\n}>;\nexport type FocusedInputHandlers = Handlers<FocusedInputHandler>;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type {\n  EmitterSubscription,\n  NativeSyntheticEvent,\n  ViewProps,\n} from \"react-native\";\n\n// DirectEventHandler events declaration\nexport type NativeEvent = {\n  progress: number;\n  height: number;\n  duration: number;\n  target: number;\n};\nexport type FocusedInputLayoutChangedEvent = {\n  target: number;\n  parentScrollViewTarget: number;\n  layout: {\n    x: number;\n    y: number;\n    width: number;\n    height: number;\n    absoluteX: number;\n    absoluteY: number;\n  };\n};\nexport type FocusedInputTextChangedEvent = {\n  text: string;\n};\nexport type FocusedInputSelectionChangedEvent = {\n  target: number;\n  selection: {\n    start: {\n      x: number;\n      y: number;\n      position: number;\n    };\n    end: {\n      x: number;\n      y: number;\n      position: number;\n    };\n  };\n};\nexport type EventWithName<T> = {\n  eventName: string;\n} & T;\n\n// native View/Module declarations\nexport type KeyboardControllerProps = {\n  //ref prop\n  ref?: React.Ref<React.Component<KeyboardControllerProps>>;\n  // callback props\n  onKeyboardMoveStart?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onKeyboardMove?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onKeyboardMoveEnd?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onKeyboardMoveInteractive?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onFocusedInputLayoutChanged?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>,\n  ) => void;\n  onFocusedInputTextChanged?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,\n  ) => void;\n  onFocusedInputSelectionChanged?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,\n  ) => void;\n  // fake props used to activate reanimated bindings\n  onKeyboardMoveReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<NativeEvent>>,\n  ) => void;\n  onFocusedInputLayoutChangedReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputLayoutChangedEvent>>,\n  ) => void;\n  onFocusedInputTextChangedReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputTextChangedEvent>>,\n  ) => void;\n  onFocusedInputSelectionChangedReanimated?: (\n    e: NativeSyntheticEvent<EventWithName<FocusedInputSelectionChangedEvent>>,\n  ) => void;\n  // props\n  statusBarTranslucent?: boolean;\n  navigationBarTranslucent?: boolean;\n  enabled?: boolean;\n} & ViewProps;\n\nexport type KeyboardGestureAreaProps = {\n  interpolator: \"ios\" | \"linear\";\n  /**\n   * Whether to allow to show a keyboard from dismissed state by swipe up.\n   * Default to `false`.\n   */\n  showOnSwipeUp?: boolean;\n  /**\n   * Whether to allow to control a keyboard by gestures. The strategy how\n   * it should be controlled is determined by `interpolator` property.\n   * Defaults to `true`.\n   */\n  enableSwipeToDismiss?: boolean;\n  /**\n   * Extra distance to the keyboard.\n   */\n  offset?: number;\n} & ViewProps;\nexport type OverKeyboardViewProps = PropsWithChildren<{\n  visible: boolean;\n}>;\n\nexport type Direction = \"next\" | \"prev\" | \"current\";\nexport type KeyboardControllerModule = {\n  // android only\n  setDefaultMode: () => void;\n  setInputMode: (mode: number) => void;\n  // all platforms\n  dismiss: () => void;\n  setFocusTo: (direction: Direction) => void;\n  // native event module stuff\n  addListener: (eventName: string) => void;\n  removeListeners: (count: number) => void;\n};\n\n// Event module declarations\nexport type KeyboardControllerEvents =\n  | \"keyboardWillShow\"\n  | \"keyboardDidShow\"\n  | \"keyboardWillHide\"\n  | \"keyboardDidHide\";\nexport type KeyboardEventData = {\n  height: number;\n  duration: number;\n  timestamp: number;\n  target: number;\n};\nexport type KeyboardEventsModule = {\n  addListener: (\n    name: KeyboardControllerEvents,\n    cb: (e: KeyboardEventData) => void,\n  ) => EmitterSubscription;\n};\nexport type FocusedInputAvailableEvents = \"focusDidSet\";\nexport type FocusedInputEventData = {\n  current: number;\n  count: number;\n};\nexport type FocusedInputEventsModule = {\n  addListener: (\n    name: FocusedInputAvailableEvents,\n    cb: (e: FocusedInputEventData) => void,\n  ) => EmitterSubscription;\n};\nexport type WindowDimensionsAvailableEvents = \"windowDidResize\";\nexport type WindowDimensionsEventData = {\n  width: number;\n  height: number;\n};\nexport type WindowDimensionsEventsModule = {\n  addListener: (\n    name: WindowDimensionsAvailableEvents,\n    cb: (e: WindowDimensionsEventData) => void,\n  ) => EmitterSubscription;\n};\n\n// reanimated hook declaration\nexport type KeyboardHandlerHook<TContext, Event> = (\n  handlers: {\n    onKeyboardMoveStart?: (e: NativeEvent, context: TContext) => void;\n    onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n    onKeyboardMoveEnd?: (e: NativeEvent, context: TContext) => void;\n    onKeyboardMoveInteractive?: (e: NativeEvent, context: TContext) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputLayoutHandlerHook<TContext, Event> = (\n  handlers: {\n    onFocusedInputLayoutChanged?: (\n      e: FocusedInputLayoutChangedEvent,\n      context: TContext,\n    ) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputTextHandlerHook<TContext, Event> = (\n  handlers: {\n    onFocusedInputTextChanged?: (\n      e: FocusedInputTextChangedEvent,\n      context: TContext,\n    ) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\nexport type FocusedInputSelectionHandlerHook<TContext, Event> = (\n  handlers: {\n    onFocusedInputSelectionChanged?: (\n      e: FocusedInputSelectionChangedEvent,\n      context: TContext,\n    ) => void;\n  },\n  dependencies?: unknown[],\n) => (e: NativeSyntheticEvent<Event>) => void;\n\n// package types\nexport type Handlers<T> = Record<string, T | undefined>;\nexport type KeyboardHandler = Partial<{\n  onStart: (e: NativeEvent) => void;\n  onMove: (e: NativeEvent) => void;\n  onEnd: (e: NativeEvent) => void;\n  onInteractive: (e: NativeEvent) => void;\n}>;\nexport type KeyboardHandlers = Handlers<KeyboardHandler>;\nexport type FocusedInputHandler = Partial<{\n  onChangeText: (e: FocusedInputTextChangedEvent) => void;\n  onSelectionChange: (e: FocusedInputSelectionChangedEvent) => void;\n}>;\nexport type FocusedInputHandlers = Handlers<FocusedInputHandler>;\n"],"mappings":"","ignoreList":[]}

package/lib/module/views/OverKeyboardView/index.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { RCTOverKeyboardView } from "../../bindings";
+import { useWindowDimensions } from "../../hooks";
+const OverKeyboardView = ({
+  children,
+  visible
+}) => {
+  const {
+    height,
+    width
+  } = useWindowDimensions();
+  const inner = useMemo(() => ({
+    height,
+    width
+  }), [height, width]);
+  const style = useMemo(() => [styles.absolute,
+  // On iOS - stretch view to full window dimensions to make yoga work
+  // On Android Fabric we temporarily use the same approach
+  // @ts-expect-error `_IS_FABRIC` is injected by REA
+  Platform.OS === "ios" || global._IS_FABRIC ? inner : undefined], [inner]);
+  return /*#__PURE__*/React.createElement(RCTOverKeyboardView, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement(View, {
+    collapsable: false,
+    style: style
+  }, children));
+};
+const styles = StyleSheet.create({
+  absolute: {
+    position: "absolute"
+  }
+});
+export default OverKeyboardView;
+//# sourceMappingURL=index.js.map

package/lib/module/views/OverKeyboardView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Platform","StyleSheet","View","RCTOverKeyboardView","useWindowDimensions","OverKeyboardView","children","visible","height","width","inner","style","styles","absolute","OS","global","_IS_FABRIC","undefined","createElement","collapsable","create","position"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Platform, StyleSheet, View } from \"react-native\";\n\nimport { RCTOverKeyboardView } from \"../../bindings\";\nimport { useWindowDimensions } from \"../../hooks\";\n\nimport type { OverKeyboardViewProps } from \"../../types\";\nimport type { PropsWithChildren } from \"react\";\n\nconst OverKeyboardView = ({\n  children,\n  visible,\n}: PropsWithChildren<OverKeyboardViewProps>) => {\n  const { height, width } = useWindowDimensions();\n  const inner = useMemo(() => ({ height, width }), [height, width]);\n  const style = useMemo(\n    () => [\n      styles.absolute,\n      // On iOS - stretch view to full window dimensions to make yoga work\n      // On Android Fabric we temporarily use the same approach\n      // @ts-expect-error `_IS_FABRIC` is injected by REA\n      Platform.OS === \"ios\" || global._IS_FABRIC ? inner : undefined,\n    ],\n    [inner],\n  );\n\n  return (\n    <RCTOverKeyboardView visible={visible}>\n      {/* `OverKeyboardView` should always have a single child */}\n      <View collapsable={false} style={style}>\n        {children}\n      </View>\n    </RCTOverKeyboardView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  absolute: {\n    position: \"absolute\",\n  },\n});\n\nexport default OverKeyboardView;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,aAAa;AAKjD,MAAMC,gBAAgB,GAAGA,CAAC;EACxBC,QAAQ;EACRC;AACwC,CAAC,KAAK;EAC9C,MAAM;IAAEC,MAAM;IAAEC;EAAM,CAAC,GAAGL,mBAAmB,CAAC,CAAC;EAC/C,MAAMM,KAAK,GAAGX,OAAO,CAAC,OAAO;IAAES,MAAM;IAAEC;EAAM,CAAC,CAAC,EAAE,CAACD,MAAM,EAAEC,KAAK,CAAC,CAAC;EACjE,MAAME,KAAK,GAAGZ,OAAO,CACnB,MAAM,CACJa,MAAM,CAACC,QAAQ;EACf;EACA;EACA;EACAb,QAAQ,CAACc,EAAE,KAAK,KAAK,IAAIC,MAAM,CAACC,UAAU,GAAGN,KAAK,GAAGO,SAAS,CAC/D,EACD,CAACP,KAAK,CACR,CAAC;EAED,oBACEZ,KAAA,CAAAoB,aAAA,CAACf,mBAAmB;IAACI,OAAO,EAAEA;EAAQ,gBAEpCT,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IAACiB,WAAW,EAAE,KAAM;IAACR,KAAK,EAAEA;EAAM,GACpCL,QACG,CACa,CAAC;AAE1B,CAAC;AAED,MAAMM,MAAM,GAAGX,UAAU,CAACmB,MAAM,CAAC;EAC/BP,QAAQ,EAAE;IACRQ,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAehB,gBAAgB","ignoreList":[]}

package/lib/module/views/index.js

@@ -0,0 +1,2 @@
+export { default as OverKeyboardView } from "./OverKeyboardView";
+//# sourceMappingURL=index.js.map

package/lib/module/views/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","OverKeyboardView"],"sources":["index.ts"],"sourcesContent":["export { default as OverKeyboardView } from \"./OverKeyboardView\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,gBAAgB,QAAQ,oBAAoB","ignoreList":[]}

package/lib/typescript/bindings.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FocusedInputEventsModule, KeyboardControllerModule, KeyboardControllerProps, KeyboardEventsModule, KeyboardGestureAreaProps, WindowDimensionsEventsModule } from "./types";
+import type { FocusedInputEventsModule, KeyboardControllerModule, KeyboardControllerProps, KeyboardEventsModule, KeyboardGestureAreaProps, OverKeyboardViewProps, WindowDimensionsEventsModule } from "./types";
 export declare const KeyboardController: KeyboardControllerModule;
 export declare const KeyboardEvents: KeyboardEventsModule;
 /**
@@ -10,3 +10,4 @@ export declare const FocusedInputEvents: FocusedInputEventsModule;
 export declare const WindowDimensionsEvents: WindowDimensionsEventsModule;
 export declare const KeyboardControllerView: import("react").FC<KeyboardControllerProps>;
 export declare const KeyboardGestureArea: import("react").FC<KeyboardGestureAreaProps>;
+export declare const RCTOverKeyboardView: import("react").FC<OverKeyboardViewProps>;

package/lib/typescript/bindings.native.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FocusedInputEventsModule, KeyboardControllerModule, KeyboardControllerProps, KeyboardEventsModule, KeyboardGestureAreaProps, WindowDimensionsEventsModule } from "./types";
+import type { FocusedInputEventsModule, KeyboardControllerModule, KeyboardControllerProps, KeyboardEventsModule, KeyboardGestureAreaProps, OverKeyboardViewProps, WindowDimensionsEventsModule } from "./types";
 export declare const KeyboardController: KeyboardControllerModule;
 export declare const KeyboardEvents: KeyboardEventsModule;
 /**
@@ -10,3 +10,4 @@ export declare const FocusedInputEvents: FocusedInputEventsModule;
 export declare const WindowDimensionsEvents: WindowDimensionsEventsModule;
 export declare const KeyboardControllerView: React.FC<KeyboardControllerProps>;
 export declare const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps>;
+export declare const RCTOverKeyboardView: React.FC<OverKeyboardViewProps>;

package/lib/typescript/components/KeyboardAwareScrollView/index.d.ts

@@ -9,6 +9,8 @@ export type KeyboardAwareScrollViewProps = {
     enabled?: boolean;
     /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
     extraKeyboardSpace?: number;
+    /** Custom component for `ScrollView`. Default is `ScrollView` */
+    ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
 } & ScrollViewProps;
 declare const KeyboardAwareScrollView: React.ForwardRefExoticComponent<{
     /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
@@ -19,6 +21,8 @@ declare const KeyboardAwareScrollView: React.ForwardRefExoticComponent<{
     enabled?: boolean | undefined;
     /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
     extraKeyboardSpace?: number | undefined;
+    /** Custom component for `ScrollView`. Default is `ScrollView` */
+    ScrollViewComponent?: React.ComponentType<ScrollViewProps> | undefined;
 } & ScrollViewProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<ScrollView>>;

package/lib/typescript/components/KeyboardToolbar/index.d.ts

@@ -4,8 +4,8 @@ import Button from "./Button";
 import { colors } from "./colors";
 import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
-import type { GestureResponderEvent } from "react-native";
-export type KeyboardToolbarProps = {
+import type { GestureResponderEvent, 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. */

package/lib/typescript/index.d.ts

@@ -6,3 +6,4 @@ export * from "./constants";
 export * from "./types";
 export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
 export type { KeyboardAvoidingViewProps, KeyboardStickyViewProps, KeyboardAwareScrollViewProps, KeyboardToolbarProps, } from "./components";
+export { OverKeyboardView } from "./views";

package/lib/typescript/specs/OverKeyboardViewNativeComponent.d.ts

@@ -0,0 +1,7 @@
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+export interface NativeProps extends ViewProps {
+    visible?: boolean;
+}
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/lib/typescript/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { PropsWithChildren } from "react";
 import type { EmitterSubscription, NativeSyntheticEvent, ViewProps } from "react-native";
 export type NativeEvent = {
     progress: number;
@@ -74,6 +74,9 @@ export type KeyboardGestureAreaProps = {
      */
     offset?: number;
 } & ViewProps;
+export type OverKeyboardViewProps = PropsWithChildren<{
+    visible: boolean;
+}>;
 export type Direction = "next" | "prev" | "current";
 export type KeyboardControllerModule = {
     setDefaultMode: () => void;

package/lib/typescript/views/OverKeyboardView/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { OverKeyboardViewProps } from "../../types";
+import type { PropsWithChildren } from "react";
+declare const OverKeyboardView: ({ children, visible, }: PropsWithChildren<OverKeyboardViewProps>) => React.JSX.Element;
+export default OverKeyboardView;

package/lib/typescript/views/index.d.ts

@@ -0,0 +1 @@
+export { default as OverKeyboardView } from "./OverKeyboardView";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.13.3",
+  "version": "1.14.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -21,8 +21,12 @@
     "!android/gradle",
     "!android/gradlew",
     "!android/gradlew.bat",
+    "!android/.editorconfig",
     "!ios/build",
     "!ios/KeyboardControllerNative",
+    "!ios/.swiftlint.yml",
+    "!ios/.swiftformat",
+    "!ios/.clang-format",
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__"
@@ -51,6 +55,7 @@
     "avoiding view",
     "avoid keyboard",
     "sticky view",
+    "over keyboard view",
     "keyboard aware scroll view",
     "keyboard toolbar",
     "keyboard done button",
@@ -71,7 +76,7 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@react-native/eslint-config": "^0.75.2",
+    "@react-native/eslint-config": "^0.75.3",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.2.1",
@@ -94,7 +99,7 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.8.8",
     "react": "18.3.1",
-    "react-native": "0.75.2",
+    "react-native": "0.75.3",
     "react-native-builder-bob": "^0.18.0",
     "react-native-reanimated": "3.15.0",
     "react-test-renderer": "18.2.0",

package/src/bindings.native.ts

@@ -6,6 +6,7 @@ import type {
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
+  OverKeyboardViewProps,
   WindowDimensionsEventsModule,
 } from "./types";
 
@@ -56,3 +57,5 @@ export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
   Platform.OS === "android" && Platform.Version >= 30
     ? require("./specs/KeyboardGestureAreaNativeComponent").default
     : ({ children }: KeyboardGestureAreaProps) => children;
+export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
+  require("./specs/OverKeyboardViewNativeComponent").default;

package/src/bindings.ts

@@ -6,6 +6,7 @@ import type {
   KeyboardControllerProps,
   KeyboardEventsModule,
   KeyboardGestureAreaProps,
+  OverKeyboardViewProps,
   WindowDimensionsEventsModule,
 } from "./types";
 import type { EmitterSubscription } from "react-native";
@@ -37,3 +38,5 @@ export const KeyboardControllerView =
   View as unknown as React.FC<KeyboardControllerProps>;
 export const KeyboardGestureArea =
   View as unknown as React.FC<KeyboardGestureAreaProps>;
+export const RCTOverKeyboardView =
+  View as unknown as React.FC<OverKeyboardViewProps>;

package/src/components/KeyboardAwareScrollView/index.tsx

@@ -38,6 +38,8 @@ export type KeyboardAwareScrollViewProps = {
   enabled?: boolean;
   /** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
   extraKeyboardSpace?: number;
+  /** Custom component for `ScrollView`. Default is `ScrollView` */
+  ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
 } & ScrollViewProps;
 
 /*
@@ -90,6 +92,7 @@ const KeyboardAwareScrollView = forwardRef<
       disableScrollOnKeyboardHide = false,
       enabled = true,
       extraKeyboardSpace = 0,
+      ScrollViewComponent = Reanimated.ScrollView,
       snapToOffsets,
       ...rest
     },
@@ -362,7 +365,7 @@ const KeyboardAwareScrollView = forwardRef<
     );
 
     return (
-      <Reanimated.ScrollView
+      <ScrollViewComponent
         ref={onRef}
         {...rest}
         scrollEventThrottle={16}
@@ -370,7 +373,7 @@ const KeyboardAwareScrollView = forwardRef<
       >
         {children}
         <Reanimated.View style={view} />
-      </Reanimated.ScrollView>
+      </ScrollViewComponent>
     );
   },
 );

package/src/components/KeyboardToolbar/index.tsx

@@ -11,9 +11,12 @@ import { colors } from "./colors";
 
 import type { HEX, KeyboardToolbarTheme } from "./types";
 import type { ReactNode } from "react";
-import type { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent, ViewProps } from "react-native";
 
-export type KeyboardToolbarProps = {
+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. */
@@ -81,6 +84,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
   onDoneCallback,
   blur = null,
   opacity = DEFAULT_OPACITY,
+  ...rest
 }) => {
   const colorScheme = useColorScheme();
   const [inputs, setInputs] = useState({
@@ -146,7 +150,7 @@ const KeyboardToolbar: React.FC<KeyboardToolbarProps> = ({
 
   return (
     <KeyboardStickyView offset={offset}>
-      <View style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
+      <View {...rest} style={toolbarStyle} testID={TEST_ID_KEYBOARD_TOOLBAR}>
         {blur}
         {showArrows && (
           <>

package/src/hooks/index.ts

@@ -1,11 +1,9 @@
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 
 import { KeyboardController } from "../bindings";
 import { AndroidSoftInputModes } from "../constants";
 import { useKeyboardContext } from "../context";
 
-import useSyncEffect from "./useSyncEffect";
-
 import type { AnimatedContext, ReanimatedContext } from "../context";
 import type { FocusedInputHandler, KeyboardHandler } from "../types";
 import type { DependencyList } from "react";
@@ -40,7 +38,7 @@ export function useGenericKeyboardHandler(
 ) {
   const context = useKeyboardContext();
 
-  useSyncEffect(() => {
+  useLayoutEffect(() => {
     const cleanup = context.setKeyboardHandlers(handler);
 
     return () => cleanup();
@@ -73,7 +71,7 @@ export function useFocusedInputHandler(
 ) {
   const context = useKeyboardContext();
 
-  useSyncEffect(() => {
+  useLayoutEffect(() => {
     const cleanup = context.setInputHandlers(handler);
 
     return () => cleanup();

package/src/index.ts

@@ -19,3 +19,4 @@ export type {
   KeyboardAwareScrollViewProps,
   KeyboardToolbarProps,
 } from "./components";
+export { OverKeyboardView } from "./views";

package/src/internal.ts

@@ -13,25 +13,44 @@ export function useEventHandlerRegistration<
   viewTagRef: React.MutableRefObject<ComponentOrHandle>,
 ) {
   const onRegisterHandler = (handler: H) => {
-    const viewTag = findNodeHandle(viewTagRef.current);
-    const ids = Object.keys(handler).map((handlerName) => {
-      const eventName = map.get(handlerName as keyof H);
-      const functionToCall = handler[handlerName as keyof H];
+    const ids: (number | null)[] = [];
+    const attachWorkletHandlers = () => {
+      const viewTag = findNodeHandle(viewTagRef.current);
 
-      if (eventName && viewTag) {
-        return registerEventHandler(
-          (event: Parameters<NonNullable<H[keyof H]>>[0]) => {
-            "worklet";
-
-            functionToCall?.(event);
-          },
-          eventName,
-          viewTag,
+      if (__DEV__ && !viewTag) {
+        console.warn(
+          "Can not attach worklet handlers for `react-native-keyboard-controller` because view tag can not be resolved. Be sure that `KeyboardProvider` is fully mounted before registering handlers. If you think it is a bug in library, please open an issue.",
         );
       }
 
-      return null;
-    });
+      ids.push(
+        ...Object.keys(handler).map((handlerName) => {
+          const eventName = map.get(handlerName as keyof H);
+          const functionToCall = handler[handlerName as keyof H];
+
+          if (eventName && viewTag) {
+            return registerEventHandler(
+              (event: Parameters<NonNullable<H[keyof H]>>[0]) => {
+                "worklet";
+
+                functionToCall?.(event);
+              },
+              eventName,
+              viewTag,
+            );
+          }
+
+          return null;
+        }),
+      );
+    };
+
+    if (viewTagRef.current) {
+      attachWorkletHandlers();
+    } else {
+      // view may not be mounted yet - defer registration to next event loop
+      setImmediate(attachWorkletHandlers);
+    }
 
     return () => {
       ids.forEach((id) => (id ? unregisterEventHandler(id) : null));

package/src/specs/OverKeyboardViewNativeComponent.ts

@@ -0,0 +1,12 @@
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+
+import type { HostComponent } from "react-native";
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+
+export interface NativeProps extends ViewProps {
+  visible?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  "OverKeyboardView",
+) as HostComponent<NativeProps>;

package/src/types.ts

@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from "react";
 import type {
   EmitterSubscription,
   NativeSyntheticEvent,
@@ -108,6 +109,9 @@ export type KeyboardGestureAreaProps = {
    */
   offset?: number;
 } & ViewProps;
+export type OverKeyboardViewProps = PropsWithChildren<{
+  visible: boolean;
+}>;
 
 export type Direction = "next" | "prev" | "current";
 export type KeyboardControllerModule = {

package/src/views/OverKeyboardView/index.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { Platform, StyleSheet, View } from "react-native";
+
+import { RCTOverKeyboardView } from "../../bindings";
+import { useWindowDimensions } from "../../hooks";
+
+import type { OverKeyboardViewProps } from "../../types";
+import type { PropsWithChildren } from "react";
+
+const OverKeyboardView = ({
+  children,
+  visible,
+}: PropsWithChildren<OverKeyboardViewProps>) => {
+  const { height, width } = useWindowDimensions();
+  const inner = useMemo(() => ({ height, width }), [height, width]);
+  const style = useMemo(
+    () => [
+      styles.absolute,
+      // On iOS - stretch view to full window dimensions to make yoga work
+      // On Android Fabric we temporarily use the same approach
+      // @ts-expect-error `_IS_FABRIC` is injected by REA
+      Platform.OS === "ios" || global._IS_FABRIC ? inner : undefined,
+    ],
+    [inner],
+  );
+
+  return (
+    <RCTOverKeyboardView visible={visible}>
+      {/* `OverKeyboardView` should always have a single child */}
+      <View collapsable={false} style={style}>
+        {children}
+      </View>
+    </RCTOverKeyboardView>
+  );
+};
+
+const styles = StyleSheet.create({
+  absolute: {
+    position: "absolute",
+  },
+});
+
+export default OverKeyboardView;

package/src/views/index.ts

@@ -0,0 +1 @@
+export { default as OverKeyboardView } from "./OverKeyboardView";