Feat/keyboard tracking view bottom view color (#2021)

* KeyboardTrackingView - add 'bottomViewColor' prop

* fix master merge

* Moving back to UIColor

* fix

* KeyboardAccessoryView - use others instead of passing each prop literally.

* Updating lib version

* fix api snippets

* Fix example screen

* KeyboardAccessotyView - removing duplicated props and extending selected KeyboardTrackingViewProps

* KeyboardAccessoryView - 'iosScrollBehavior' prop deprecation (#2016)

* KeyboardAccessoryView - iOSScrollBehavior prop deprecation

* api fix

* pr comments fixes

* fix snippet

* pr comments fixin'

Author: Inbal-Tish

demo/src/screens/nativeComponentScreens/keyboardAccessory/demoKeyboards.js

@@ -37,8 +37,8 @@ function ImagesKeyboard() {
 
 function CustomKeyboard() {
   return (
-    <View flex padding-s4>
-      <Text h3>Custom Keyboard</Text>
+    <View flex bg-violet80 center>
+      <Text h2>Custom Keyboard</Text>
     </View>
   );
 }

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx

@@ -16,16 +16,7 @@ import KeyboardUtils from './utils/KeyboardUtils';
 const IsIOS = Platform.OS === 'ios';
 const IsAndroid = Platform.OS === 'android';
 
-const IOS_SCROLL_BEHAVIORS = IsIOS
-  ? {
-    NONE: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorNone,
-    SCROLL_TO_BOTTOM_INVERTED_ONLY:
-        NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorScrollToBottomInvertedOnly,
-    FIXED_OFFSET: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset
-  }
-  : {};
-
-type kbTrackingViewProps = Pick<KeyboardTrackingViewProps, 'revealKeyboardInteractive' | 'manageScrollView' | 'requiresSameParentToManageScrollView' | 'allowHitsOutsideBounds' | 'addBottomView' | 'bottomViewColor' | 'useSafeArea' | 'usesBottomTabs'>;
+type kbTrackingViewProps = Pick<KeyboardTrackingViewProps, 'scrollBehavior' | 'revealKeyboardInteractive' | 'manageScrollView' | 'requiresSameParentToManageScrollView' | 'allowHitsOutsideBounds' | 'addBottomView' | 'bottomViewColor' | 'useSafeArea' | 'usesBottomTabs'>;
 
 export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
   /**
@@ -63,10 +54,9 @@ export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
    */
   onKeyboardResigned?: () => void;
   /**
-   * iOS only.
-   * The scrolling behavior, use KeyboardAccessoryView.iosScrollBehaviors.X where X is:
-   * NONE, SCROLL_TO_BOTTOM_INVERTED_ONLY or FIXED_OFFSET
-   * default: FIXED_OFFSET
+   * @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;
@@ -78,15 +68,19 @@ export type KeyboardAccessoryViewProps = kbTrackingViewProps & {
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/KeyboardAccessoryView/KeyboardAccessoryView.gif?raw=true
  */
 class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
-  static iosScrollBehaviors = IOS_SCROLL_BEHAVIORS;
+  /**
+   * @deprecated Please use KeyboardAccessoryView.scrollBehaviors instead
+   */
+  static iosScrollBehaviors = KeyboardTrackingView.scrollBehaviors; //TODO: remove on V7
+  static scrollBehaviors = KeyboardTrackingView.scrollBehaviors;
 
   static defaultProps = {
-    iOSScrollBehavior: -1,
     revealKeyboardInteractive: false,
     manageScrollView: true,
     requiresSameParentToManageScrollView: false,
     addBottomView: false,
-    allowHitsOutsideBounds: false
+    allowHitsOutsideBounds: false,
+    scrollBehavior: KeyboardTrackingView.scrollBehaviors.FIXED_OFFSET
   };
 
   // TODO: fix
@@ -133,16 +127,6 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
     return false;
   }
 
-  getIOSTrackingScrollBehavior() {
-    const {iOSScrollBehavior} = this.props;
-
-    let scrollBehavior = iOSScrollBehavior;
-    if (IsIOS && scrollBehavior === -1) {
-      scrollBehavior = KeyboardAccessoryView.iosScrollBehaviors.FIXED_OFFSET;
-    }
-    return scrollBehavior;
-  }
-
   async getNativeProps() {
     if (this.trackingViewRef) {
       return await this.trackingViewRef.getNativeProps();
@@ -202,13 +186,15 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
       onItemSelected,
       onRequestShowKeyboard,
       useSafeArea,
+      scrollBehavior,
+      iOSScrollBehavior,
       ...others
     } = this.props;
 
     return (
       <KeyboardTrackingView
         {...others}
-        scrollBehavior={this.getIOSTrackingScrollBehavior()}
+        scrollBehavior={IsIOS ? iOSScrollBehavior || scrollBehavior : undefined}
         ref={(r: any) => (this.trackingViewRef = r)}
         style={styles.trackingToolbarContainer}
         onLayout={this.onContainerComponentHeightChanged}

lib/components/Keyboard/KeyboardInput/keyboardAccessoryView.api.json

@@ -43,12 +43,6 @@
       "name": "onKeyboardResigned",
       "type": "() => void",
       "description": "Callback that will be called once the keyboard has been closed"
-    },
-    {
-      "name": "iOSScrollBehavior",
-      "type": "number",
-      "description": "The scrolling behavior, use KeyboardAccessoryView.iosScrollBehaviors.X where X is:\nNONE, SCROLL_TO_BOTTOM_INVERTED_ONLY or FIXED_OFFSET\niOS only.",
-      "default": "FIXED_OFFSET"
     }
   ],
   "snippet": [
@@ -58,5 +52,6 @@
     " kbComponent={$1}",
     " kbInitialProps={$2}",
     " onHeightChanged={this.onHeightChanged()}",
+    " scrollBehavior={KeyboardAccessoryView.scrollBehaviors.NONE$3}",
     "/>"
   ]}

lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.tsx

@@ -1,9 +1,15 @@
 import React, {forwardRef} from 'react';
-import {Platform, ViewStyle, ViewProps} from 'react-native';
+import {Platform, NativeModules, ViewStyle, ViewProps} from 'react-native';
 import {default as KeyboardTrackingViewIOS} from './KeyboardTrackingView.ios';
 import {default as KeyboardTrackingViewAndroid} from './KeyboardTrackingView.android';
 
 const isAndroid = Platform.OS === 'android';
+const SCROLL_BEHAVIORS = {
+  NONE: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorNone,
+  SCROLL_TO_BOTTOM_INVERTED_ONLY: 
+    NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorScrollToBottomInvertedOnly,
+  FIXED_OFFSET: NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset
+};
 
 export type KeyboardTrackingViewProps = ViewProps & {
   /**
@@ -46,6 +52,10 @@ export type KeyboardTrackingViewProps = ViewProps & {
    */
   allowHitsOutsideBounds?: boolean;
   scrollToFocusedInput?: boolean;
+  /**
+   * iOS only.
+   * The scrolling behavior (NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)
+   */
   scrollBehavior?: number;
   /**
    * iOS only.
@@ -81,4 +91,6 @@ const KeyboardTrackingView = forwardRef(({children, ...others}: KeyboardTracking
   );
 });
 
-export default KeyboardTrackingView;
+export default KeyboardTrackingView as (typeof KeyboardTrackingView & {scrollBehaviors: typeof SCROLL_BEHAVIORS});
+// @ts-expect-error
+KeyboardTrackingView.scrollBehaviors = SCROLL_BEHAVIORS;

lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/keyboardTrackingView.api.json

@@ -13,8 +13,17 @@
       "type": "boolean",
       "description": "Enables tracking of the keyboard when it's dismissed interactively (false by default).\nWhy? When using an external keyboard (BT),\nyou still get the keyboard events and the view just hovers when you focus the input.\nAlso, if you're not using interactive style of dismissing the keyboard\n(or if you don't have an input inside this view) it doesn't make sense to track it anyway.\n(This is caused because of the usage of inputAccessory to be able to track the keyboard interactive change and it introduces this bug)"
     },
-    {"name": "scrollToFocusedInput", "type": "boolean", "description": ""},
-    {"name": "scrollBehavior", "type": "number", "description": ""},
+    {
+      "name": "scrollToFocusedInput",
+      "type": "boolean",
+      "description": "Should the scrollView scroll to the focused input"
+    },
+    {
+      "name": "scrollBehavior",
+      "type": "number",
+      "description": "The scrolling behavior (use KeyboardTrackingView.scrollBehaviors.NONE | SCROLL_TO_BOTTOM_INVERTED_ONLY | FIXED_OFFSET)",
+      "note": "iOS only"
+    },
     {
       "name": "revealKeyboardInteractive",
       "type": "boolean",