uilib-native 4.5.2 → 5.0.0-snapshot.7175

package/android/build.gradle

@@ -1,11 +1,11 @@
 apply plugin: 'com.android.library'
 
 project.ext {
-    buildToolsVersion = rootProject.ext.has("buildToolsVersion") ? rootProject.ext.buildToolsVersion : '27.0.3'
-    minSdkVersion = rootProject.ext.has("minSdkVersion") ? rootProject.ext.minSdkVersion : 19
-    compileSdkVersion = rootProject.ext.has("compileSdkVersion") ? rootProject.ext.compileSdkVersion : 27
-    targetSdkVersion = rootProject.ext.has("targetSdkVersion") ? rootProject.ext.targetSdkVersion : 25
-    supportLibVersion = rootProject.ext.has("supportLibVersion") ? rootProject.ext.supportLibVersion  : '27.1.1'
+    buildToolsVersion = rootProject.ext.has("buildToolsVersion") ? rootProject.ext.buildToolsVersion : '35.0.0'
+    minSdkVersion = rootProject.ext.has("minSdkVersion") ? rootProject.ext.minSdkVersion : 24
+    compileSdkVersion = rootProject.ext.has("compileSdkVersion") ? rootProject.ext.compileSdkVersion : 35
+    targetSdkVersion = rootProject.ext.has("targetSdkVersion") ? rootProject.ext.targetSdkVersion : 34
+    supportLibVersion = rootProject.ext.has("supportLibVersion") ? rootProject.ext.supportLibVersion  : '28.0.0'
 }
 
 android {

package/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java

@@ -6,7 +6,6 @@ import com.facebook.react.ReactPackage;
 import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
 import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
-import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;
 
 import java.util.Arrays;
 import java.util.List;
@@ -23,7 +22,6 @@ public class UiLibPackageList {
         return Arrays.asList(
                 new DynamicFontPackage(),
                 new HighlighterViewPackage(),
-                new TextInputDelKeyHandlerPackage(),
                 new KeyboardInputPackage(application)
         );
     }

package/android/src/main/java/com/wix/reactnativeuilib/highlighterview/HighlighterViewManager.java

@@ -8,12 +8,15 @@ import android.util.SizeF;
 import android.view.View;
 
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.UIManager;
 import com.facebook.react.uimanager.IllegalViewOperationException;
 import com.facebook.react.uimanager.NativeViewHierarchyManager;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.uimanager.common.UIManagerType;
 
 import javax.annotation.Nullable;
 
@@ -75,33 +78,38 @@ class HighlighterViewManager extends SimpleViewManager<HighlighterView> {
 
     @ReactProp(name = "highlightViewTag")
     public void setHighlightViewTag(final HighlighterView view, Integer highlightViewTag) {
-        try {
-            NativeViewHierarchyManager nativeViewHierarchyManager = ReactHacks.getNativeViewHierarchyManager(context.getNativeModule(UIManagerModule.class));
-            if (nativeViewHierarchyManager == null) {
-                return;
-            }
-
-            final View resolvedView = nativeViewHierarchyManager.resolveView(highlightViewTag);
-            if (resolvedView != null) {
-                if (resolvedView.getWidth() == 0 || resolvedView.getHeight() == 0) {
-                    resolvedView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
-                        @Override
-                        public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
-                            float width = right - left;
-                            float height = bottom - top;
-                            if (width > 0 && height > 0) {
-                                setViewBasedHighlightFrame(view, resolvedView);
-                                resolvedView.removeOnLayoutChangeListener(this);
-                            }
+        if (highlightViewTag != null) {
+            try {
+                UIManager uiManager = UIManagerHelper.getUIManagerForReactTag(context, highlightViewTag);
+                if (uiManager != null) {
+                    final View resolvedView = uiManager.resolveView(highlightViewTag);
+                    if (resolvedView != null) {
+                        if (resolvedView.getWidth() == 0 || resolvedView.getHeight() == 0) {
+                            resolvedView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
+                                @Override
+                                public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
+                                    float width = right - left;
+                                    float height = bottom - top;
+                                    if (width > 0 && height > 0) {
+                                        setViewBasedHighlightFrame(view, resolvedView);
+                                        resolvedView.removeOnLayoutChangeListener(this);
+                                    }
+                                }
+                            });
+                        } else {
+                            setViewBasedHighlightFrame(view, resolvedView);
                         }
-                    });
+                    } else {
+                        Log.e("HighlighterView", "was not able to resolve highlightViewTag: " + highlightViewTag.toString());
+                    }
                 } else {
-                    setViewBasedHighlightFrame(view, resolvedView);
+                    Log.e("HighlighterView", "was not able to resolve get uiManager for highlightViewTag: " + highlightViewTag.toString());
                 }
+            } catch (IllegalViewOperationException e) {
+                Log.e("HighlighterView", "invalid highlightViewTag: " + highlightViewTag.toString() + " " + e.toString());
             }
-        }
-        catch (IllegalViewOperationException e) {
-            Log.e("HighlighterView", "invalid highlightViewTag: " + highlightViewTag.toString() + " " + e.toString());
+        } else {
+            Log.e("HighlighterView", "highlightViewTag is null");
         }
     }
 

package/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/utils/RuntimeUtils.java

@@ -9,7 +9,7 @@ public class RuntimeUtils {
     private static final Runnable sUIUpdateClosure = new Runnable() {
         @Override
         public void run() {
-            ReactContextHolder.getContext().getNativeModule(UIManagerModule.class).onBatchComplete();
+            // ReactContextHolder.getContext().getNativeModule(UIManagerModule.class).onBatchComplete();
         }
     };
 

package/components/HighlighterOverlayView/HighlighterViewNativeComponent.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react-native/types/modules/codegen" />
+import type { ViewProps } from 'react-native';
+import type { Float, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export interface HighlightFrame {
+    x: Float;
+    y: Float;
+    width: Float;
+    height: Float;
+}
+export interface MinimumRectSize {
+    width: Float;
+    height: Float;
+}
+export interface HighlightViewTagParams {
+    paddingLeft?: WithDefault<Float, 0>;
+    paddingTop?: WithDefault<Float, 0>;
+    paddingRight?: WithDefault<Float, 0>;
+    paddingBottom?: WithDefault<Float, 0>;
+    offsetX?: WithDefault<Float, 0>;
+    offsetY?: WithDefault<Float, 0>;
+}
+export interface NativeProps extends ViewProps {
+    /**
+     * The frame to highlight with x, y, width, height coordinates
+     */
+    highlightFrame?: HighlightFrame;
+    /**
+     * The overlay color (processed color int for Android)
+     */
+    overlayColor?: WithDefault<Int32, 0>;
+    /**
+     * The border radius for the highlighted area
+     */
+    borderRadius?: WithDefault<Float, 0>;
+    /**
+     * The stroke color (processed color int for Android)
+     */
+    strokeColor?: WithDefault<Int32, 0>;
+    /**
+     * The stroke width
+     */
+    strokeWidth?: WithDefault<Float, 0>;
+    /**
+     * The React tag of the view to highlight
+     */
+    highlightViewTag?: Int32;
+    /**
+     * Parameters for view-based highlighting including padding and offset
+     */
+    highlightViewTagParams?: HighlightViewTagParams;
+    /**
+     * Minimum rectangle size for the highlight area
+     */
+    minimumRectSize?: MinimumRectSize;
+    /**
+     * Inner padding for the highlight area
+     */
+    innerPadding?: WithDefault<Float, 0>;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;

package/components/HighlighterOverlayView/HighlighterViewNativeComponent.js

@@ -0,0 +1,2 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+export default codegenNativeComponent('HighlighterView');

package/components/HighlighterOverlayView/index.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { processColor, StyleSheet, Modal } from 'react-native';
+// Import the Codegen specification for New Architecture
+import HighlighterViewNativeComponent from "./HighlighterViewNativeComponent";
+const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
+const HighlighterOverlayView = props => {
+  const {
+    overlayColor,
+    borderRadius,
+    strokeColor,
+    strokeWidth,
+    visible,
+    onRequestClose,
+    highlightFrame,
+    style,
+    children,
+    highlightViewTag,
+    highlightViewTagParams,
+    minimumRectSize,
+    innerPadding
+  } = props;
+
+  // Process colors for New Architecture Codegen component
+  const overlayColorToUse = processColor(overlayColor || DefaultOverlayColor);
+  const strokeColorToUse = strokeColor ? processColor(strokeColor) : undefined;
+
+  // Convert highlightViewTagParams to match native Codegen spec
+  let nativeHighlightViewTagParams;
+  if (highlightViewTagParams) {
+    const padding = typeof highlightViewTagParams.padding === 'number' ? highlightViewTagParams.padding : 0;
+    nativeHighlightViewTagParams = {
+      paddingLeft: padding,
+      paddingTop: padding,
+      paddingRight: padding,
+      paddingBottom: padding,
+      offsetX: highlightViewTagParams.offset?.x || 0,
+      offsetY: highlightViewTagParams.offset?.y || 0
+    };
+  }
+  return <Modal visible={!!visible} animationType={'fade'} transparent onRequestClose={() => onRequestClose?.()}>
+      <HighlighterViewNativeComponent highlightFrame={highlightFrame} style={[style, {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'transparent'
+    }]} overlayColor={overlayColorToUse} borderRadius={borderRadius} strokeColor={strokeColorToUse} strokeWidth={strokeWidth} highlightViewTag={highlightViewTag || undefined} highlightViewTagParams={nativeHighlightViewTagParams} minimumRectSize={minimumRectSize} innerPadding={innerPadding} testID={props.testID} accessible={props.accessible} />
+      {children}
+    </Modal>;
+};
+HighlighterOverlayView.displayName = 'IGNORE';
+export default HighlighterOverlayView;

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView}/CustomKeyboardView/CustomKeyboardView.android.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
-import CustomKeyboardViewBase, { CustomKeyboardViewBaseProps } from '../CustomKeyboardViewBase';
+import CustomKeyboardViewBase, { CustomKeyboardViewBaseProps } from './CustomKeyboardViewBase';
 export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewBaseProps> {
     static displayName: string;
     componentDidUpdate(prevProps: CustomKeyboardViewBaseProps): Promise<void>;
-    render(): React.JSX.Element;
+    getStyle: () => {
+        height: number | undefined;
+    };
+    render(): React.JSX.Element | null;
 }

package/components/Keyboard/KeyboardAccessoryView/CustomKeyboardView/CustomKeyboardView.android.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Keyboard, View } from 'react-native';
+import KeyboardRegistry from "../KeyboardRegistry";
+import CustomKeyboardViewBase from "./CustomKeyboardViewBase";
+export default class CustomKeyboardView extends CustomKeyboardViewBase {
+  static displayName = 'IGNORE';
+  async componentDidUpdate(prevProps) {
+    const {
+      component,
+      inputRef,
+      shouldFocus,
+      onKeyboardDismiss
+    } = this.props;
+    if (prevProps.component !== component) {
+      if (!component) {
+        if (shouldFocus) {
+          if (inputRef?.current) {
+            inputRef.current.focus?.();
+          } else {
+            inputRef?.focus?.();
+          }
+        }
+      } else {
+        Keyboard.dismiss();
+      }
+      onKeyboardDismiss?.();
+    }
+    super.componentDidUpdate(prevProps);
+  }
+  getStyle = () => {
+    const {
+      keyboardHeight
+    } = this.props;
+    return {
+      height: keyboardHeight
+    };
+  };
+  render() {
+    const {
+      component,
+      initialProps
+    } = this.props;
+    const KeyboardComponent = component && KeyboardRegistry.getKeyboard(component);
+    if (!KeyboardComponent) {
+      return null;
+    }
+    return <View style={this.getStyle()}>
+        <KeyboardComponent {...initialProps} />
+      </View>;
+  }
+}

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView}/CustomKeyboardView/CustomKeyboardView.ios.d.ts

@@ -1,4 +1,4 @@
-import CustomKeyboardViewBase, { CustomKeyboardViewBaseProps } from './../CustomKeyboardViewBase';
+import CustomKeyboardViewBase, { CustomKeyboardViewBaseProps } from './CustomKeyboardViewBase';
 export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
     /**
      * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView}/CustomKeyboardView/CustomKeyboardView.ios.js

@@ -1,6 +1,6 @@
-import TextInputKeyboardManager from "./../TextInputKeyboardManager/TextInputKeyboardManager.ios";
-import KeyboardRegistry from "./../KeyboardRegistry";
-import CustomKeyboardViewBase from "./../CustomKeyboardViewBase";
+import TextInputKeyboardManager from "../TextInputKeyboardManager/TextInputKeyboardManager.ios";
+import KeyboardRegistry from "../KeyboardRegistry";
+import CustomKeyboardViewBase from "./CustomKeyboardViewBase";
 export default class CustomKeyboardView extends CustomKeyboardViewBase {
   static displayName = 'IGNORE';
   static defaultProps = {

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView/CustomKeyboardView}/CustomKeyboardViewBase.d.ts

@@ -3,6 +3,9 @@ import { EventSubscription } from 'react-native';
 export type CustomKeyboardViewBaseProps = {
     inputRef?: any;
     initialProps?: any;
+    keyboardHeight?: number;
+    onKeyboardDismiss?: () => void;
+    shouldFocus?: boolean;
     component?: string;
     onItemSelected?: (component?: string, args?: any) => void;
     onRequestShowKeyboard?: (keyboardId: string) => void;

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView/CustomKeyboardView}/CustomKeyboardViewBase.js

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import KeyboardRegistry from "./KeyboardRegistry";
+import KeyboardRegistry from "../KeyboardRegistry";
 export default class CustomKeyboardViewBase extends Component {
   static defaultProps = {
     initialProps: {}

package/components/Keyboard/{KeyboardInput/utils → KeyboardAccessoryView/KeyboardRegistry/EventEmitterManager}/__tests__/EventEmitterManager.spec.js

@@ -1,4 +1,4 @@
-const EventEmitterManager = require('../EventEmitterManager').default;
+const EventEmitterManager = require('../index').default;
 
 let EventEmitter;
 

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView/KeyboardRegistry}/__tests__/KeyboardRegistry.spec.js

@@ -1,6 +1,6 @@
 import {AppRegistry, View} from 'react-native';
 import React from 'react';
-import KeyboardRegistry from '../KeyboardRegistry';
+import KeyboardRegistry from '../index';
 
 describe('KeyboardRegistry - components', () => {
   const mockComponent = 'test_component';

package/components/Keyboard/{KeyboardInput/KeyboardRegistry.d.ts → KeyboardAccessoryView/KeyboardRegistry/index.d.ts}

@@ -1,4 +1,4 @@
-import EventEmitterManager from './utils/EventEmitterManager';
+import EventEmitterManager from './EventEmitterManager';
 /**
  * @description: used for registering keyboards and performing certain actions on the keyboards.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js

package/components/Keyboard/{KeyboardInput/KeyboardRegistry.js → KeyboardAccessoryView/KeyboardRegistry/index.js}

@@ -1,7 +1,7 @@
 import _intersection from "lodash/intersection";
 import _isFunction from "lodash/isFunction";
 import { AppRegistry } from 'react-native';
-import EventEmitterManager from "./utils/EventEmitterManager";
+import EventEmitterManager from "./EventEmitterManager";
 
 /*
  * Tech debt: how to deal with multiple registries in the app?

package/components/Keyboard/{KeyboardInput → KeyboardAccessoryView/KeyboardRegistry}/keyboardRegistry.api.json

@@ -1,49 +1,49 @@
 {
   "name": "KeyboardRegistry",
   "category": "infra",
-  "description": "used for registering keyboards and performing certain actions on the keyboards.",
+  "description": "used for registering keyboards and performing certain actions on the keyboards",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js",
   "props": [
     {
       "name": "registerKeyboard",
       "type": "static function",
-      "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)."
+      "description": "Register a new keyboard.\ncomponentID (string) - the ID of the keyboard.\ngenerator (function) - a function for the creation of the keyboard.\nparams (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards)"
     },
     {
       "name": "getKeyboard",
       "type": "static function",
-      "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard."
+      "description": "Get a specific keyboard\ncomponentID (string) - the ID of the keyboard"
     },
     {
       "name": "getKeyboards",
       "type": "static function",
-      "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard."
+      "description": "Get keyboards by IDs\ncomponentIDs (string[]) - the ID of the keyboard"
     },
     {"name": "getAllKeyboards", "type": "static function", "description": "Get all keyboards"},
     {
       "name": "addListener",
       "type": "static function",
-      "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n                     (i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens"
+      "description": "Add a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\ncallback (function) - the callback to be called when the said event happens"
     },
     {
       "name": "notifyListeners",
       "type": "static function",
-      "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n                    (i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener."
+      "description": "Notify that an event has occurred.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')\nargs (object) - data to be sent to the listener"
     },
     {
       "name": "removeListeners",
       "type": "static function",
-      "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n                    (i.e. if componentID='kb1' globalID='kb1.onItemSelected')"
+      "description": "Remove a listener for a callback.\nglobalID (string) - ID that includes the componentID and the event name\n(i.e. if componentID='kb1' globalID='kb1.onItemSelected')"
     },
     {
       "name": "onItemSelected",
       "type": "static function",
-      "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener."
+      "description": "Default event to be used for when an item on the keyboard has been pressed.\ncomponentID (string) - the ID of the keyboard.\nargs (object) - data to be sent to the listener"
     },
     {
       "name": "requestShowKeyboard",
       "type": "static function",
-      "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard."
+      "description": "Request to show the keyboard\ncomponentID (string) - the ID of the keyboard"
     }
   ],
   "snippet": ["KeyboardRegistry.registerKeyboard('keyboardName$1', () => KeyboardComponent$2)"]

package/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.d.ts

@@ -0,0 +1,26 @@
+export default class KeyboardUtils {
+    static displayName: string;
+    private static listeners;
+    private static addListener;
+    private static removeListener;
+    /**
+     * Used to dismiss (close) the keyboard.
+     */
+    static dismiss: () => void;
+}
+interface KeyboardHeightProps {
+    id: string;
+    onDismiss: () => void;
+}
+declare const useKeyboardHeight: ({ id, onDismiss }: KeyboardHeightProps) => {
+    keyboardHeight: number;
+    isKeyboardVisible: boolean;
+};
+export interface KeyboardHeightListenerProps {
+    id: string;
+    onDismiss: () => void;
+    onKeyboardHeightChange?: (height: number) => void;
+    onKeyboardVisibilityChange?: (isKeyboardVisible: boolean) => void;
+}
+declare const KeyboardHeightListener: ({ id, onDismiss, onKeyboardHeightChange, onKeyboardVisibilityChange }: KeyboardHeightListenerProps) => null;
+export { useKeyboardHeight, KeyboardHeightListener };

package/components/Keyboard/KeyboardAccessoryView/KeyboardUtils/index.js

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Keyboard, Platform } from 'react-native';
+import TextInputKeyboardManager from "../TextInputKeyboardManager";
+const IS_IOS = Platform.OS === 'ios';
+const DEFAULT_KEYBOARD_HEIGHT = IS_IOS ? 216 : 312; // TODO: verify this value for iOS
+
+export default class KeyboardUtils {
+  static displayName = 'KeyboardUtils';
+  static listeners = {};
+  static addListener = (id, onDismiss) => {
+    if (id && onDismiss && !KeyboardUtils.listeners[id]) {
+      KeyboardUtils.listeners[id] = onDismiss;
+    }
+  };
+  static removeListener = id => {
+    if (id && KeyboardUtils.listeners[id]) {
+      delete KeyboardUtils.listeners[id];
+    }
+  };
+
+  /**
+   * Used to dismiss (close) the keyboard.
+   */
+  static dismiss = () => {
+    Keyboard.dismiss();
+    TextInputKeyboardManager.dismissKeyboard();
+    Object.keys(KeyboardUtils.listeners).forEach(key => {
+      KeyboardUtils.listeners[key]();
+    });
+  };
+}
+const useKeyboardHeight = ({
+  id,
+  onDismiss
+}) => {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(DEFAULT_KEYBOARD_HEIGHT);
+  const [isVisible, setIsVisible] = useState(false);
+  const keyboardDidShow = useCallback(e => {
+    if (!isInitialized) {
+      setIsInitialized(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    }
+    setIsVisible(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const keyboardDidHide = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
+    // @ts-ignore
+    KeyboardUtils.addListener(id, onDismiss);
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+      // @ts-ignore
+      KeyboardUtils.removeListener(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    keyboardHeight,
+    isKeyboardVisible: isVisible
+  };
+};
+const KeyboardHeightListener = ({
+  id,
+  onDismiss,
+  onKeyboardHeightChange,
+  onKeyboardVisibilityChange
+}) => {
+  const {
+    keyboardHeight,
+    isKeyboardVisible
+  } = useKeyboardHeight({
+    id,
+    onDismiss
+  });
+  useEffect(() => {
+    onKeyboardHeightChange?.(keyboardHeight);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keyboardHeight]);
+  useEffect(() => {
+    onKeyboardVisibilityChange?.(isKeyboardVisible);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isKeyboardVisible]);
+  return null;
+};
+export { useKeyboardHeight, KeyboardHeightListener };

package/components/Keyboard/{KeyboardInput/KeyboardAccessoryView.d.ts → KeyboardAccessoryView/index.d.ts}

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { LayoutChangeEvent } from 'react-native';
-import { KeyboardTrackingViewProps } from '../KeyboardTracking/KeyboardTrackingView';
+import { KeyboardTrackingViewProps } from '../KeyboardTrackingView';
 type kbTrackingViewProps = Pick<KeyboardTrackingViewProps, 'scrollBehavior' | 'revealKeyboardInteractive' | 'manageScrollView' | 'requiresSameParentToManageScrollView' | 'allowHitsOutsideBounds' | 'addBottomView' | 'bottomViewColor' | 'useSafeArea' | 'usesBottomTabs'>;
 export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
     /**
@@ -58,9 +58,16 @@ declare class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps
         allowHitsOutsideBounds: boolean;
         scrollBehavior: any;
     };
+    static currentId: number;
     customInputControllerEventsSubscriber: any;
     trackingViewRef: any;
+    subscription: any;
+    id: number;
     constructor(props: KeyboardAccessoryViewProps);
+    state: {
+        keyboardHeight: number;
+        shouldFocus: boolean;
+    };
     componentWillUnmount(): void;
     onContainerComponentHeightChanged(event: LayoutChangeEvent): void;
     onAndroidBackPressed(): boolean;
@@ -69,6 +76,9 @@ declare class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps
     registerAndroidBackHandler(): void;
     processInitialProps(): any;
     scrollToStart(): void;
+    onKeyboardHeightChange: (keyboardHeight: number) => void;
+    onDismiss: () => void;
+    onKeyboardDismiss: () => void;
     render(): React.JSX.Element;
 }
 export default KeyboardAccessoryView;