react-native-keyboard-controller 1.7.0 → 1.8.0

package/lib/typescript/context.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Animated } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import type { KeyboardHandlers } from './types';
@@ -11,9 +11,11 @@ export type ReanimatedContext = {
     height: SharedValue<number>;
 };
 export type KeyboardAnimationContext = {
+    enabled: boolean;
     animated: AnimatedContext;
     reanimated: ReanimatedContext;
     setHandlers: (handlers: KeyboardHandlers) => void;
+    setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export declare const KeyboardContext: import("react").Context<KeyboardAnimationContext>;
+export declare const KeyboardContext: React.Context<KeyboardAnimationContext>;
 export declare const useKeyboardContext: () => KeyboardAnimationContext;

package/lib/typescript/hooks.d.ts

@@ -6,3 +6,7 @@ export declare const useKeyboardAnimation: () => AnimatedContext;
 export declare const useReanimatedKeyboardAnimation: () => ReanimatedContext;
 export declare function useGenericKeyboardHandler(handler: KeyboardHandler, deps?: DependencyList): void;
 export declare function useKeyboardHandler(handler: KeyboardHandler, deps?: DependencyList): void;
+export declare function useKeyboardController(): {
+    setEnabled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    enabled: boolean;
+};

package/lib/typescript/index.d.ts

@@ -1,4 +1,3 @@
-import './monkey-patch';
 export * from './bindings';
 export * from './animated';
 export * from './replicas';

package/lib/typescript/monkey-patch.android.d.ts

@@ -1 +1,2 @@
-export {};
+export declare const applyMonkeyPatch: () => void;
+export declare const revertMonkeyPatch: () => void;

package/lib/typescript/monkey-patch.d.ts

@@ -0,0 +1,2 @@
+export declare const applyMonkeyPatch: () => void;
+export declare const revertMonkeyPatch: () => void;

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

@@ -8,6 +8,7 @@ type KeyboardMoveEvent = Readonly<{
     target: Int32;
 }>;
 export interface NativeProps extends ViewProps {
+    enabled?: boolean;
     statusBarTranslucent?: boolean;
     navigationBarTranslucent?: boolean;
     onKeyboardMoveStart?: DirectEventHandler<KeyboardMoveEvent>;

package/lib/typescript/types.d.ts

@@ -9,6 +9,7 @@ export type EventWithName<T> = {
     eventName: string;
 } & T;
 export type KeyboardControllerProps = {
+    enabled?: boolean;
     onKeyboardMoveStart?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onKeyboardMove?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;
     onKeyboardMoveEnd?: (e: NativeSyntheticEvent<EventWithName<NativeEvent>>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-keyboard-controller",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Keyboard manager which works in identical way on both iOS and Android",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/animated.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
 import Reanimated, { useSharedValue } from 'react-native-reanimated';
 
-import { KeyboardContext } from './context';
+import { KeyboardAnimationContext, KeyboardContext } from './context';
 import { useSharedHandlers, useAnimatedValue } from './internal';
 import { KeyboardControllerView } from './bindings';
 import { useAnimatedKeyboardHandler } from './reanimated';
@@ -12,6 +12,7 @@ import type {
   KeyboardHandler,
   NativeEvent,
 } from './types';
+import { applyMonkeyPatch, revertMonkeyPatch } from './monkey-patch';
 
 const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(
@@ -54,13 +55,22 @@ type KeyboardProviderProps = {
    * @platform android
    */
   navigationBarTranslucent?: boolean;
+  /**
+   * A boolean prop indicating whether the module is enabled. It indicate only initial state,
+   * i. e. if you try to change this prop after component mount it will not have any effect.
+   * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
+   * Defaults to `true`.
+   */
+  enabled?: boolean;
 };
 
 export const KeyboardProvider = ({
   children,
   statusBarTranslucent,
   navigationBarTranslucent,
+  enabled: initiallyEnabled = true,
 }: KeyboardProviderProps) => {
+  const [enabled, setEnabled] = useState(initiallyEnabled);
   // animated values
   const progress = useAnimatedValue(0);
   const height = useAnimatedValue(0);
@@ -69,13 +79,15 @@ export const KeyboardProvider = ({
   const heightSV = useSharedValue(0);
   const { setHandlers, broadcast } = useSharedHandlers<KeyboardHandler>();
   // memo
-  const context = useMemo(
+  const context = useMemo<KeyboardAnimationContext>(
     () => ({
+      enabled,
       animated: { progress: progress, height: Animated.multiply(height, -1) },
       reanimated: { progress: progressSV, height: heightSV },
       setHandlers,
+      setEnabled,
     }),
-    []
+    [enabled]
   );
   const style = useMemo(
     () => [
@@ -136,10 +148,19 @@ export const KeyboardProvider = ({
     },
     []
   );
+  // effects
+  useEffect(() => {
+    if (enabled) {
+      applyMonkeyPatch();
+    } else {
+      revertMonkeyPatch();
+    }
+  }, [enabled]);
 
   return (
     <KeyboardContext.Provider value={context}>
       <KeyboardControllerViewAnimated
+        enabled={enabled}
         onKeyboardMoveReanimated={handler}
         onKeyboardMoveStart={Platform.OS === 'ios' ? onKeyboardMove : undefined}
         onKeyboardMove={Platform.OS === 'android' ? onKeyboardMove : undefined}

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -5,6 +5,7 @@ export const useKeyboardAnimation = () => {
   const heightWhenOpened = useSharedValue(0);
   const height = useSharedValue(0);
   const progress = useSharedValue(0);
+  const isClosed = useSharedValue(true);
 
   useKeyboardHandler(
     {
@@ -12,6 +13,7 @@ export const useKeyboardAnimation = () => {
         'worklet';
 
         if (e.height > 0) {
+          isClosed.value = false;
           heightWhenOpened.value = e.height;
         }
       },
@@ -21,9 +23,14 @@ export const useKeyboardAnimation = () => {
         progress.value = e.progress;
         height.value = e.height;
       },
+      onEnd: (e) => {
+        'worklet';
+
+        isClosed.value = e.height === 0;
+      },
     },
     []
   );
 
-  return { height, progress, heightWhenOpened };
+  return { height, progress, heightWhenOpened, isClosed };
 };

package/src/components/KeyboardAvoidingView/index.tsx

@@ -11,6 +11,7 @@ import Reanimated, {
   useSharedValue,
   useDerivedValue,
   interpolate,
+  runOnUI,
 } from 'react-native-reanimated';
 import { useKeyboardAnimation } from './hooks';
 
@@ -76,11 +77,14 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
 
+    const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => {
+      if (keyboard.isClosed.value) {
+        initialFrame.value = layout;
+      }
+    });
     const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
       (e) => {
-        if (initialFrame.value === null) {
-          initialFrame.value = e.nativeEvent.layout;
-        }
+        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
         onLayoutProps?.(e);
       },
       [onLayoutProps]
@@ -96,7 +100,7 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
       switch (behavior) {
         case 'height':
-          if (bottomHeight > 0) {
+          if (!keyboard.isClosed.value) {
             return {
               height: frame.value.height - bottomHeight,
               flex: 0,

package/src/context.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import { Animated } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
@@ -13,9 +13,11 @@ export type ReanimatedContext = {
   height: SharedValue<number>;
 };
 export type KeyboardAnimationContext = {
+  enabled: boolean;
   animated: AnimatedContext;
   reanimated: ReanimatedContext;
   setHandlers: (handlers: KeyboardHandlers) => void;
+  setEnabled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 const NOOP = () => {};
 const DEFAULT_SHARED_VALUE: SharedValue<number> = {
@@ -25,6 +27,7 @@ const DEFAULT_SHARED_VALUE: SharedValue<number> = {
   modify: NOOP,
 };
 const defaultContext: KeyboardAnimationContext = {
+  enabled: true,
   animated: {
     progress: new Animated.Value(0),
     height: new Animated.Value(0),
@@ -33,7 +36,8 @@ const defaultContext: KeyboardAnimationContext = {
     progress: DEFAULT_SHARED_VALUE,
     height: DEFAULT_SHARED_VALUE,
   },
-  setHandlers: () => {},
+  setHandlers: NOOP,
+  setEnabled: NOOP,
 };
 export const KeyboardContext = createContext(defaultContext);
 export const useKeyboardContext = () => {

package/src/hooks.ts

@@ -59,3 +59,9 @@ export function useKeyboardHandler(
   useResizeMode();
   useGenericKeyboardHandler(handler, deps);
 }
+
+export function useKeyboardController() {
+  const context = useKeyboardContext();
+
+  return { setEnabled: context.setEnabled, enabled: context.enabled };
+}

package/src/index.ts

@@ -1,5 +1,3 @@
-import './monkey-patch';
-
 export * from './bindings';
 export * from './animated';
 export * from './replicas';

package/src/monkey-patch.android.ts

@@ -1,33 +1,39 @@
 // @ts-expect-error because there is no corresponding type definition
 import * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';
 
+const DefaultNativeAndroidManager = NativeAndroidManager.default;
 const getConstants = NativeAndroidManager.default.getConstants;
+const RCTStatusBarManagerCompat =
+  require('./specs/NativeStatusBarManagerCompat').default;
 
 // On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
 // in order to use library on all available platforms we have to monkey patch
 // default RN implementation and use modern `WindowInsetsControllerCompat`.
-const RCTStatusBarManagerCompat =
-  require('./specs/NativeStatusBarManagerCompat').default;
-NativeAndroidManager.default = {
-  getConstants,
-  setColor(color: number, animated: boolean): void {
-    RCTStatusBarManagerCompat.setColor(color, animated);
-  },
+export const applyMonkeyPatch = () => {
+  NativeAndroidManager.default = {
+    getConstants,
+    setColor(color: number, animated: boolean): void {
+      RCTStatusBarManagerCompat.setColor(color, animated);
+    },
 
-  setTranslucent(translucent: boolean): void {
-    RCTStatusBarManagerCompat.setTranslucent(translucent);
-  },
+    setTranslucent(translucent: boolean): void {
+      RCTStatusBarManagerCompat.setTranslucent(translucent);
+    },
 
-  /**
-   *  - statusBarStyles can be:
-   *    - 'default'
-   *    - 'dark-content'
-   */
-  setStyle(statusBarStyle?: string): void {
-    RCTStatusBarManagerCompat.setStyle(statusBarStyle);
-  },
+    /**
+     *  - statusBarStyles can be:
+     *    - 'default'
+     *    - 'dark-content'
+     */
+    setStyle(statusBarStyle?: string): void {
+      RCTStatusBarManagerCompat.setStyle(statusBarStyle);
+    },
 
-  setHidden(hidden: boolean): void {
-    RCTStatusBarManagerCompat.setHidden(hidden);
-  },
+    setHidden(hidden: boolean): void {
+      RCTStatusBarManagerCompat.setHidden(hidden);
+    },
+  };
+};
+export const revertMonkeyPatch = () => {
+  NativeAndroidManager.default = DefaultNativeAndroidManager;
 };

package/src/monkey-patch.ts

@@ -1 +1,4 @@
 // stub for all platforms
+const NOOP = () => {};
+export const applyMonkeyPatch = NOOP;
+export const revertMonkeyPatch = NOOP;

package/src/specs/KeyboardControllerViewNativeComponent.ts

@@ -16,6 +16,7 @@ type KeyboardMoveEvent = Readonly<{
 
 export interface NativeProps extends ViewProps {
   // props
+  enabled?: boolean;
   statusBarTranslucent?: boolean;
   navigationBarTranslucent?: boolean;
   // callbacks

package/src/types.ts

@@ -17,6 +17,7 @@ export type EventWithName<T> = {
 
 // native View/Module declarations
 export type KeyboardControllerProps = {
+  enabled?: boolean;
   onKeyboardMoveStart?: (
     e: NativeSyntheticEvent<EventWithName<NativeEvent>>
   ) => void;