uilib-native 3.0.4 → 3.0.8

package/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/CustomKeyboardLayout.java

@@ -1,5 +1,6 @@
 package com.wix.reactnativeuilib.keyboardinput;
 
+import android.app.Activity;
 import android.content.Context;
 import android.view.View;
 import android.view.Window;
@@ -24,6 +25,8 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
     private final InputMethodManager mInputMethodManager;
     private final ReactSoftKeyboardMonitor mKeyboardMonitor;
     private WeakReference<CustomKeyboardRootViewShadow> mShadowNode = new WeakReference<>(null);
+    private int mSoftInputMode;
+    private boolean mIsShown = false;
 
     public CustomKeyboardLayout(ReactContext reactContext, ReactSoftKeyboardMonitor keyboardMonitor, ReactScreenMonitor screenMonitor) {
         mKeyboardMonitor = keyboardMonitor;
@@ -33,6 +36,18 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
         screenMonitor.addListener(this);
     }
 
+    public void setShown(boolean isShown) {
+        mIsShown = isShown;
+        Window window = getWindow();
+        if (window != null) {
+            if (mIsShown) {
+                mSoftInputMode = window.getAttributes().softInputMode;
+            } else {
+                window.setSoftInputMode(mSoftInputMode);
+            }
+        }
+    }
+
     @Override
     public void onSoftKeyboardVisible(boolean distinct) {
         if (distinct) {
@@ -75,14 +90,17 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
         runOnUIThread(new Runnable() {
             @Override
             public void run() {
-                final View focusedView = getCurrentActivity().getCurrentFocus();
-                if (focusedView instanceof EditText) {
-                    showSoftKeyboard();
-                } else {
-                    hideCustomKeyboardContent();
-                    clearKeyboardOverlayMode();
+                Activity currentActivity = getCurrentActivity();
+                if (currentActivity != null) {
+                    final View focusedView = currentActivity.getCurrentFocus();
+                    if (focusedView instanceof EditText) {
+                        showSoftKeyboard();
+                    } else {
+                        hideCustomKeyboardContent();
+                        clearKeyboardOverlayMode();
+                    }
+                    promise.resolve(null);
                 }
-                promise.resolve(null);
             }
         });
     }
@@ -91,9 +109,12 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
         runOnUIThread(new Runnable() {
             @Override
             public void run() {
-                final View focusedView = getCurrentActivity().getCurrentFocus();
-                if (focusedView != null) {
-                    focusedView.clearFocus();
+                Activity currentActivity = getCurrentActivity();
+                if (currentActivity != null) {
+                    final View focusedView = currentActivity.getCurrentFocus();
+                    if (focusedView != null) {
+                        focusedView.clearFocus();
+                    }
                 }
             }
         });
@@ -167,16 +188,19 @@ public class CustomKeyboardLayout implements ReactSoftKeyboardMonitor.Listener,
     }
 
     private void setKeyboardOverlayMode() {
-        Window window = getWindow();
-        if (window != null) {
-            window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
-        }
+        setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
     }
 
     private void clearKeyboardOverlayMode() {
-        Window window = getWindow();
-        if (window != null) {
-            window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
+        setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
+    }
+
+    private void setSoftInputMode(int softInputMode) {
+        if (mIsShown) {
+            Window window = getWindow();
+            if (window != null) {
+                window.setSoftInputMode(softInputMode);
+            }
         }
     }
 

package/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/CustomKeyboardRootView.java

@@ -24,4 +24,16 @@ public class CustomKeyboardRootView extends FrameLayout {
         }
         super.onViewAdded(child);
     }
+
+    @Override
+    protected void onAttachedToWindow() {
+        super.onAttachedToWindow();
+        mLayout.setShown(true);
+    }
+
+    @Override
+    protected void onDetachedFromWindow() {
+        mLayout.setShown(false);
+        super.onDetachedFromWindow();
+    }
 }

package/components/{HighlighterOverlayView.js → HighlighterOverlayView.tsx}

@@ -1,11 +1,41 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {requireNativeComponent, processColor, Platform, StyleSheet, Modal} from 'react-native';
+import {requireNativeComponent, processColor, Platform, StyleSheet, Modal, ViewStyle} from 'react-native';
 
-const NativeHighlighterView = requireNativeComponent('HighlighterView', null);
+const NativeHighlighterView = requireNativeComponent('HighlighterView');
 const DefaultOverlayColor = 'rgba(0, 0, 0, 0.5)';
 
-const HighlighterOverlayView = (props) => {
+type HighlightFrameType = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+type HighlightViewTagParams = {
+  padding: number | ViewStyle['padding'];
+  offset: Pick<HighlightFrameType, 'x' | 'y'>;
+}
+
+export type HighlighterOverlayViewProps = {
+  visible: boolean;
+  overlayColor?: string;
+  borderRadius?: number;
+  strokeColor?: string;
+  strokeWidth?: number;
+  onRequestClose?: () => void;
+  highlightFrame?: HighlightFrameType;
+  style?: ViewStyle;
+  highlightViewTag?: number | null;
+  children?: JSX.Element[] | JSX.Element;
+  highlightViewTagParams?: HighlightViewTagParams;
+  minimumRectSize?: Pick<HighlightFrameType, 'width' | 'height'>;
+  innerPadding?: number;
+  accessible?: boolean;
+  testID?: string;
+};
+
+
+const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
   const {
     overlayColor,
     borderRadius,
@@ -19,13 +49,15 @@ const HighlighterOverlayView = (props) => {
     highlightViewTag,
     highlightViewTagParams,
     minimumRectSize,
-    innerPadding,
+    innerPadding
   } = props;
 
   let overlayColorToUse = overlayColor || DefaultOverlayColor;
   let strokeColorToUse = strokeColor;
   if (Platform.OS === 'android') {
+    // @ts-ignore
     overlayColorToUse = processColor(overlayColorToUse);
+    // @ts-ignore
     strokeColorToUse = processColor(strokeColorToUse);
   }
 
@@ -34,9 +66,10 @@ const HighlighterOverlayView = (props) => {
       visible={!!(visible)}
       animationType={'fade'}
       transparent
-      onRequestClose={() => onRequestClose && onRequestClose()}
+      onRequestClose={() => onRequestClose?.()}
     >
       <NativeHighlighterView
+        // @ts-ignore, this became private, not sure if I should remove it 
         highlightFrame={highlightFrame}
         style={[style, {...StyleSheet.absoluteFillObject, backgroundColor: 'transparent'}]}
         overlayColor={overlayColorToUse}
@@ -53,44 +86,5 @@ const HighlighterOverlayView = (props) => {
   );
 };
 
-HighlighterOverlayView.propTypes = {
-  overlayColor: PropTypes.string,
-  borderRadius: PropTypes.number,
-  strokeColor: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  visible: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func,
-  highlightFrame: PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-  highlightViewTag: PropTypes.number,
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-  highlightViewTagParams: PropTypes.shape({
-    padding: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        top: PropTypes.number,
-        left: PropTypes.number,
-        bottom: PropTypes.number,
-        right: PropTypes.number}),
-    ]),
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
-    }),
-  }),
-  minimumRectSize: PropTypes.shape({
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
-  innerPadding: PropTypes.number,
-};
-
+HighlighterOverlayView.displayName = 'IGNORE';
 export default HighlighterOverlayView;

package/components/Keyboard/KeyboardInput/{CustomKeyboardView.android.js → CustomKeyboardView/CustomKeyboardView.android.tsx}

@@ -1,27 +1,22 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {requireNativeComponent} from 'react-native';
-import TextInputKeyboardManager from './TextInputKeyboardManager';
-import KeyboardRegistry from './KeyboardRegistry';
-import CustomKeyboardViewBase from './CustomKeyboardViewBase';
+import TextInputKeyboardManager from '../TextInputKeyboardManager/TextInputKeyboardManager.android';
+import KeyboardRegistry from '../KeyboardRegistry';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from '../CustomKeyboardViewBase';
 
 const CustomKeyboardViewNativeAndroid = requireNativeComponent('CustomKeyboardViewNativeTemp');
 
-export default class CustomKeyboardView extends CustomKeyboardViewBase {
-  static propTypes = {
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func
-  };
+export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewBaseProps> {
+  static displayName = 'IGNORE';
 
-  async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {component} = nextProps;
+  async componentDidUpdate(prevProps: CustomKeyboardViewBaseProps) {
+    const {component} = this.props;
 
-    if (this.props.component !== component && !component) {
+    if (prevProps.component !== component && !component) {
       await TextInputKeyboardManager.reset();
     }
 
-    await super.UNSAFE_componentWillReceiveProps(nextProps);
+    super.componentDidUpdate(prevProps);
   }
 
   render() {

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

@@ -1,25 +1,24 @@
-import PropTypes from 'prop-types';
-import TextInputKeyboardManager from './TextInputKeyboardManager';
-import KeyboardRegistry from './KeyboardRegistry';
-import CustomKeyboardViewBase from './CustomKeyboardViewBase';
+import TextInputKeyboardManager from './../TextInputKeyboardManager/TextInputKeyboardManager.ios';
+import KeyboardRegistry from './../KeyboardRegistry';
+import CustomKeyboardViewBase, {CustomKeyboardViewBaseProps} from './../CustomKeyboardViewBase';
 
-export default class CustomKeyboardView extends CustomKeyboardViewBase {
-  static propTypes = {
-    /**
-     * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
-     */
-    inputRef: PropTypes.object,
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func,
-    useSafeArea: PropTypes.bool
-  };
+export type CustomKeyboardViewProps = CustomKeyboardViewBaseProps & {
+  /**
+   * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.)
+   */
+  inputRef?: any;
+  useSafeArea?: boolean;
+};
+
+export default class CustomKeyboardView extends CustomKeyboardViewBase<CustomKeyboardViewProps> {
+  static displayName = 'IGNORE';
 
   static defaultProps = {
+    initialProps: {},
     useSafeArea: true
   };
 
-  constructor(props) {
+  constructor(props: CustomKeyboardViewProps) {
     super(props);
 
     const {component} = props;
@@ -27,7 +26,7 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
       this.registeredRequestShowKeyboard = false;
     }
 
-    KeyboardRegistry.addListener('onToggleExpandedKeyboard', args => {
+    KeyboardRegistry.addListener('onToggleExpandedKeyboard', (args: any) => {
       const {inputRef, initialProps} = this.props;
       if (inputRef) {
         if (this.keyboardExpandedToggle[args.keyboardId] === undefined) {
@@ -46,9 +45,9 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
     super.componentWillUnmount();
   }
 
-  async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = nextProps;
-    const {component} = this.props;
+  componentDidUpdate(prevProps: CustomKeyboardViewProps) {
+    const {inputRef: nextInputRef, component: nextComponent, initialProps: nextInitialProps, useSafeArea} = this.props;
+    const {component} = prevProps;
 
     if (nextInputRef && nextComponent !== component) {
       if (nextComponent) {
@@ -62,7 +61,7 @@ export default class CustomKeyboardView extends CustomKeyboardViewBase {
       }
     }
 
-    await super.UNSAFE_componentWillReceiveProps(nextProps);
+    super.componentDidUpdate(prevProps);
   }
 
   render() {

package/components/Keyboard/KeyboardInput/CustomKeyboardView/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {default as CustomKeyboardViewIOS, CustomKeyboardViewProps} from './CustomKeyboardView.ios';
+import {default as CustomKeyboardViewAndroid} from './CustomKeyboardView.android';
+
+const IsAndroid = Platform.OS === 'android';
+
+const CustomKeyboardView = (props: CustomKeyboardViewProps) => {
+  const Container = IsAndroid ? CustomKeyboardViewAndroid : CustomKeyboardViewIOS;
+
+  return (
+    <Container {...props}/>
+  );
+};
+
+export default CustomKeyboardView;

package/components/Keyboard/KeyboardInput/{CustomKeyboardViewBase.js → CustomKeyboardViewBase.tsx}

@@ -1,32 +1,37 @@
-import {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import KeyboardRegistry from './KeyboardRegistry';
+import {EventSubscription} from 'react-native';
 
-export default class CustomKeyboardViewBase extends Component {
-  static propTypes = {
-    initialProps: PropTypes.object,
-    component: PropTypes.string,
-    onItemSelected: PropTypes.func
-  };
+export type CustomKeyboardViewBaseProps = {
+  inputRef?: any;
+  initialProps?: any;
+  component?: string;
+  onItemSelected?: (component?: string, args?: any) => void;
+  onRequestShowKeyboard?: (keyboardId: string) => void;
+  children?: React.ReactChild | React.ReactChild[];
+};
 
+export default class CustomKeyboardViewBase<T extends CustomKeyboardViewBaseProps> extends Component<T> {
   static defaultProps = {
     initialProps: {}
   };
 
-  constructor(props) {
+  registeredRequestShowKeyboard = false;
+  keyboardExpandedToggle: any;
+  keyboardEventListeners: EventSubscription[] = [];
+
+  constructor(props: T) {
     super(props);
 
     const {component, onItemSelected} = props;
     if (component) {
       this.addOnItemSelectListener(onItemSelected, component);
-
-      this.registeredRequestShowKeyboard = false;
     }
 
     this.keyboardExpandedToggle = {};
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: T) {
     return nextProps.component !== this.props.component;
   }
 
@@ -35,7 +40,7 @@ export default class CustomKeyboardViewBase extends Component {
     KeyboardRegistry.removeListeners('onRequestShowKeyboard');
 
     if (this.keyboardEventListeners) {
-      this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
+      this.keyboardEventListeners.forEach((eventListener: EventSubscription) => eventListener.remove());
     }
 
     if (component) {
@@ -43,28 +48,29 @@ export default class CustomKeyboardViewBase extends Component {
     }
   }
 
-  addOnItemSelectListener(onItemSelected, component) {
+  addOnItemSelectListener(onItemSelected: CustomKeyboardViewBaseProps['onItemSelected'],
+    component: CustomKeyboardViewBaseProps['component']) {
     if (onItemSelected) {
-      KeyboardRegistry.addListener(`${component}.onItemSelected`, args => {
+      KeyboardRegistry.addListener(`${component}.onItemSelected`, (args: any) => {
         onItemSelected(component, args);
       });
     }
   }
 
-  async UNSAFE_componentWillReceiveProps(nextProps) {
-    const {onRequestShowKeyboard} = nextProps;
+  componentDidUpdate(prevProps: T) {
+    const {onRequestShowKeyboard} = this.props;
 
     if (onRequestShowKeyboard && !this.registeredRequestShowKeyboard) {
       this.registeredRequestShowKeyboard = true;
-      KeyboardRegistry.addListener('onRequestShowKeyboard', args => {
+      KeyboardRegistry.addListener('onRequestShowKeyboard', (args: any) => {
         onRequestShowKeyboard(args.keyboardId);
       });
     }
 
-    this.registerListener(this.props, nextProps);
+    this.registerListener(prevProps, this.props);
   }
 
-  registerListener(props, nextProps) {
+  registerListener(props: T, nextProps: T) {
     const {component, onItemSelected} = nextProps;
     if (component && props.component !== component) {
       if (props.component) {

package/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx

@@ -0,0 +1,226 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  Platform,
+  NativeModules,
+  NativeEventEmitter,
+  DeviceEventEmitter,
+  processColor,
+  BackHandler,
+  LayoutChangeEvent
+} from 'react-native';
+import KeyboardTrackingView, {KeyboardTrackingViewProps} from '../KeyboardTracking/KeyboardTrackingView';
+import CustomKeyboardView from './CustomKeyboardView';
+import KeyboardUtils from './utils/KeyboardUtils';
+
+const IsIOS = Platform.OS === 'ios';
+const IsAndroid = Platform.OS === 'android';
+
+type kbTrackingViewProps = Pick<KeyboardTrackingViewProps, 'scrollBehavior' | 'revealKeyboardInteractive' | 'manageScrollView' | 'requiresSameParentToManageScrollView' | 'allowHitsOutsideBounds' | 'addBottomView' | 'bottomViewColor' | 'useSafeArea' | 'usesBottomTabs'>;
+
+export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
+  /**
+   * Content to be rendered above the keyboard
+   */
+  renderContent?: () => React.ReactElement;
+  /**
+   * iOS only.
+   * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).
+   * This is required.
+   */
+  kbInputRef?: any;
+  /**
+   * The keyboard ID (the componentID sent to KeyboardRegistry)
+   */
+  kbComponent?: string;
+  /**
+   * The props that will be sent to the KeyboardComponent
+   */
+  kbInitialProps?: any;
+  /**
+   * A callback for when the height is changed
+   */
+  onHeightChanged?: (height: number) => void;
+  /**
+   * Callback that will be called when an item on the keyboard has been pressed.
+   */
+  onItemSelected?: (component?: string, args?: any) => void;
+  /**
+   * Callback that will be called if KeyboardRegistry.requestShowKeyboard is called.
+   */
+  onRequestShowKeyboard?: () => void;
+  /**
+   * Callback that will be called once the keyboard has been closed
+   */
+  onKeyboardResigned?: () => void;
+  /**
+   * @deprecated
+   * Please use 'scrollBehavior' prop instead
+   * The scrolling behavior (use KeyboardAccessoryView.scrollBehaviors.NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)
+   */
+  iOSScrollBehavior?: number;
+  children?: React.ReactChild;
+};
+
+/**
+ * @description: View that allows replacing the default keyboard with other components
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
+ */
+class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
+  /**
+   * @deprecated Please use KeyboardAccessoryView.scrollBehaviors instead
+   */
+  static iosScrollBehaviors = KeyboardTrackingView.scrollBehaviors; //TODO: remove on V7
+  static scrollBehaviors = KeyboardTrackingView.scrollBehaviors;
+
+  static defaultProps = {
+    revealKeyboardInteractive: false,
+    manageScrollView: true,
+    requiresSameParentToManageScrollView: false,
+    addBottomView: false,
+    allowHitsOutsideBounds: false,
+    scrollBehavior: KeyboardTrackingView.scrollBehaviors.FIXED_OFFSET
+  };
+
+  // TODO: fix
+  customInputControllerEventsSubscriber: any;
+  trackingViewRef: any;
+
+  constructor(props: KeyboardAccessoryViewProps) {
+    super(props);
+
+    this.onContainerComponentHeightChanged = this.onContainerComponentHeightChanged.bind(this);
+    this.processInitialProps = this.processInitialProps.bind(this);
+    this.registerForKeyboardResignedEvent = this.registerForKeyboardResignedEvent.bind(this);
+    this.registerAndroidBackHandler = this.registerAndroidBackHandler.bind(this);
+    this.onAndroidBackPressed = this.onAndroidBackPressed.bind(this);
+
+    this.registerForKeyboardResignedEvent();
+    this.registerAndroidBackHandler();
+  }
+
+  componentWillUnmount() {
+    if (this.customInputControllerEventsSubscriber) {
+      this.customInputControllerEventsSubscriber.remove();
+    }
+    if (IsAndroid) {
+      BackHandler.removeEventListener('hardwareBackPress', this.onAndroidBackPressed);
+    }
+  }
+
+  onContainerComponentHeightChanged(event: LayoutChangeEvent) {
+    const {onHeightChanged} = this.props;
+
+    if (onHeightChanged) {
+      onHeightChanged(event.nativeEvent.layout.height);
+    }
+  }
+
+  onAndroidBackPressed() {
+    const {kbComponent} = this.props;
+
+    if (kbComponent) {
+      KeyboardUtils.dismiss();
+      return true;
+    }
+    return false;
+  }
+
+  async getNativeProps() {
+    if (this.trackingViewRef) {
+      return await this.trackingViewRef.getNativeProps();
+    }
+    return {};
+  }
+
+  registerForKeyboardResignedEvent() {
+    const {onKeyboardResigned} = this.props;
+    let eventEmitter = null;
+    if (IsIOS) {
+      if (NativeModules.CustomInputControllerTemp) {
+        eventEmitter = new NativeEventEmitter(NativeModules.CustomInputControllerTemp);
+      }
+    } else {
+      eventEmitter = DeviceEventEmitter;
+    }
+
+    if (eventEmitter !== null) {
+      this.customInputControllerEventsSubscriber = eventEmitter.addListener('kbdResigned', () => {
+        if (onKeyboardResigned) {
+          onKeyboardResigned();
+        }
+      });
+    }
+  }
+
+  registerAndroidBackHandler() {
+    if (IsAndroid) {
+      BackHandler.addEventListener('hardwareBackPress', this.onAndroidBackPressed);
+    }
+  }
+
+  processInitialProps() {
+    const {kbInitialProps} = this.props;
+
+    if (IsIOS && kbInitialProps && kbInitialProps.backgroundColor) {
+      const processedProps = Object.assign({}, kbInitialProps);
+      processedProps.backgroundColor = processColor(processedProps.backgroundColor);
+      return processedProps;
+    }
+
+    return kbInitialProps;
+  }
+
+  scrollToStart() {
+    if (this.trackingViewRef) {
+      this.trackingViewRef.scrollToStart();
+    }
+  }
+
+  render() {
+    const {
+      renderContent,
+      kbInputRef,
+      kbComponent,
+      onItemSelected,
+      onRequestShowKeyboard,
+      scrollBehavior,
+      iOSScrollBehavior,
+      ...others
+    } = this.props;
+
+    return (
+      <KeyboardTrackingView
+        {...others}
+        scrollBehavior={IsIOS ? iOSScrollBehavior || scrollBehavior : undefined}
+        ref={(r: any) => (this.trackingViewRef = r)}
+        style={styles.trackingToolbarContainer}
+        onLayout={this.onContainerComponentHeightChanged}
+      >
+        <>{renderContent?.()}</>
+        <CustomKeyboardView
+          inputRef={kbInputRef}
+          component={kbComponent}
+          initialProps={this.processInitialProps()}
+          onItemSelected={onItemSelected}
+          onRequestShowKeyboard={onRequestShowKeyboard}
+          useSafeArea={others.useSafeArea}
+        />
+      </KeyboardTrackingView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  trackingToolbarContainer: {
+    ...Platform.select({
+      ios: {
+        ...StyleSheet.absoluteFillObject,
+        top: undefined
+      }
+    })
+  }
+});
+
+export default KeyboardAccessoryView;