KeyboardTrackingView - add 'bottomViewColor' prop

Author: Inbal-Tish

demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js

@@ -62,7 +62,7 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
     const {trackInteractive} = this.state;
 
     return (
-      <View flex bg-grey80 paddingT-page>
+      <View flex bg-blue80 paddingT-page>
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={trackInteractive ? 'interactive' : 'none'}
@@ -88,8 +88,10 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
           style={styles.trackingToolbarContainer}
           trackInteractive={trackInteractive}
           useSafeArea
+          addBottomView
+          bottomViewColor={Colors.grey80}
         >
-          <View bg-white row spread centerV paddingH-s5 paddingV-s3>
+          <View bg-grey80 row spread centerV paddingH-s5 paddingV-s3>
             <TextField
               migrate
               containerStyle={styles.textField}
@@ -119,7 +121,7 @@ const styles = StyleSheet.create({
   },
   textField: {
     flex: 1,
-    backgroundColor: Colors.grey60,
+    backgroundColor: Colors.grey50,
     paddingVertical: Spacings.s2,
     paddingHorizontal: Spacings.s4,
     borderRadius: 8

lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx

@@ -30,10 +30,6 @@ export type KeyboardAccessoryViewProps = {
    * Content to be rendered above the keyboard
    */
   renderContent?: () => React.ReactElement;
-  /**
-   * A callback for when the height is changed
-   */
-  onHeightChanged?: (height: number) => void;
   /**
    * iOS only.
    * The reference to the actual text input (or the keyboard may not reset when instructed to, etc.).
@@ -48,6 +44,10 @@ export type KeyboardAccessoryViewProps = {
    * 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.
    */
@@ -64,21 +64,18 @@ export type KeyboardAccessoryViewProps = {
    * iOS only.
    * The scrolling behavior, use KeyboardAccessoryView.iosScrollBehaviors.X where X is:
    * NONE, SCROLL_TO_BOTTOM_INVERTED_ONLY or FIXED_OFFSET
-   *
    * default: FIXED_OFFSET
    */
   iOSScrollBehavior?: number;
   /**
    * iOS only.
    * Show the keyboard on a negative scroll
-   *
    * default: false
    */
   revealKeyboardInteractive?: boolean;
   /**
    * iOS only.
    * Set to false to turn off inset management and manage it yourself
-   *
    * default: true
    */
   manageScrollView?: boolean;
@@ -88,39 +85,39 @@ export type KeyboardAccessoryViewProps = {
    * it means that the ScrollView found is the wrong one and you'll have
    * to have the KeyboardAccessoryView and the ScrollView as siblings
    * and set this to true
-   *
    * default: false
    */
   requiresSameParentToManageScrollView?: boolean;
   /**
    * iOS only.
-   * Add a (white) SafeArea view beneath the KeyboardAccessoryView
-   *
+   * Allow hitting sub-views that are placed beyond the view bounds
    * default: false
    */
-  addBottomView?: boolean;
+  allowHitsOutsideBounds?: boolean;
   /**
    * iOS only.
-   * Allow hitting sub-views that are placed beyond the view bounds
-   *
+   * Add a SafeArea view beneath the KeyboardAccessoryView
    * default: false
    */
-  allowHitsOutsideBounds?: boolean;
-
+  addBottomView?: boolean;
+  /**
+   * iOS only.
+   * The bottom view's color as an hex string
+   * default: '#ffffff'
+   */
+  bottomViewColor?: string;
   /**
    * iOS only.
    * Whether or not to handle SafeArea
    * default: true
    */
   useSafeArea?: boolean;
-
   /**
    * iOS only.
    * Whether or not to include bottom tab bat inset
    * default: false
    */
   usesBottomTabs?: boolean;
-
   children?: React.ReactChild;
 };
 
@@ -130,7 +127,6 @@ export type KeyboardAccessoryViewProps = {
  * @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;
 
   static defaultProps = {
@@ -274,12 +270,11 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
         manageScrollView={manageScrollView}
         requiresSameParentToManageScrollView={requiresSameParentToManageScrollView}
         addBottomView={addBottomView}
+        bottomViewColor={bottomViewColor}
         allowHitsOutsideBounds={allowHitsOutsideBounds}
         usesBottomTabs={usesBottomTabs}
       >
-        <>
-          {renderContent?.()}
-        </>
+        <>{renderContent?.()}</>
         <CustomKeyboardView
           inputRef={kbInputRef}
           component={kbComponent}

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

@@ -12,11 +12,6 @@
       "type": "() => React.ReactElement",
       "description": "Content to be rendered above the keyboard"
     },
-    {
-      "name": "onHeightChanged",
-      "type": "(height: number) => void",
-      "description": "A callback for when the height is changed"
-    },
     {
       "name": "kbInputRef",
       "type": "any",
@@ -29,6 +24,11 @@
       "description": "The keyboard ID (the componentID sent to KeyboardRegistry)"
     },
     {"name": "kbInitialProps", "type": "any", "description": "The props that will be sent to the KeyboardComponent"},
+    {
+      "name": "onHeightChanged",
+      "type": "(height: number) => void",
+      "description": "A callback for when the height is changed"
+    },
     {
       "name": "onItemSelected",
       "type": "() => void",
@@ -54,42 +54,56 @@
       "name": "revealKeyboardInteractive",
       "type": "boolean",
       "description": "Show the keyboard on a negative scroll\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "false"
     },
     {
       "name": "manageScrollView",
       "type": "boolean",
       "description": "Set to false to turn off inset management and manage it yourself\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "true"
     },
     {
       "name": "requiresSameParentToManageScrollView",
       "type": "boolean",
       "description": "Set to true manageScrollView is set to true and still does not work,\nit means that the ScrollView found is the wrong one and you'll have\nto have the KeyboardAccessoryView and the ScrollView as siblings\nand set this to true\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "false"
     },
     {
-      "name": "addBottomView",
+      "name": "allowHitsOutsideBounds",
       "type": "boolean",
-      "description": "Add a (white) SafeArea view beneath the KeyboardAccessoryView\niOS only.",
+      "description": "Allow hitting sub-views that are placed beyond the view bounds\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "false"
     },
     {
-      "name": "allowHitsOutsideBounds",
+      "name": "addBottomView",
       "type": "boolean",
-      "description": "Allow hitting sub-views that are placed beyond the view bounds\niOS only.",
+      "description": "Add a view beneath the KeyboardAccessoryView\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "false"
     },
+    {
+      "name": "bottomViewColor", 
+      "type": "string", 
+      "description": "The bottom view's color as an hex string\niOS only.",       
+      "note": "KeyboardTrackingView prop. iOS only",
+      "default": "#ffffff"
+    },
     {
       "name": "useSafeArea",
       "type": "boolean",
       "description": "Whether or not to handle SafeArea\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "true"
     },
     {
       "name": "usesBottomTabs",
       "type": "boolean",
       "description": "Whether or not to include bottom tab bar inset\niOS only.",
+      "note": "KeyboardTrackingView prop. iOS only",
       "default": "false"
     }
   ],

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

@@ -7,43 +7,73 @@ const isAndroid = Platform.OS === 'android';
 
 export type KeyboardTrackingViewProps = ViewProps & {
   /**
-     * Enables tracking of the keyboard when it's dismissed interactively (false by default).
-     * Why? When using an external keyboard (BT),
-     * you still get the keyboard events and the view just hovers when you focus the input.
-     * Also, if you're not using interactive style of dismissing the keyboard
-     * (or if you don't have an input inside this view) it doesn't make sense to track it anyway.
-     * (This is caused because of the usage of inputAccessory to be able to track the
-     * keyboard interactive change and it introduces this bug)
-     */
-   trackInteractive?: boolean;
-   /**
-    * Allow control safe area
-    */
-   useSafeArea?: boolean;
-   /**
-    * Whether or not to include bottom tab bar inset
-    */
-   usesBottomTabs?: boolean;
-
-   scrollToFocusedInput?: boolean;
-   scrollBehavior?: number;
-   revealKeyboardInteractive?: boolean;
-   manageScrollView?: boolean;
-   requiresSameParentToManageScrollView?: boolean;
-   addBottomView?: boolean;
-   allowHitsOutsideBounds?: boolean;
-
-   // Can't figure out what it's supposed to be
-   ref?: any;
-
-   children?: React.ReactChild | React.ReactChild[];
-
-   style?: ViewStyle;
-}
+   * Enables tracking of the keyboard when it's dismissed interactively (false by default).
+   * Why? When using an external keyboard (BT),
+   * you still get the keyboard events and the view just hovers when you focus the input.
+   * Also, if you're not using interactive style of dismissing the keyboard
+   * (or if you don't have an input inside this view) it doesn't make sense to track it anyway.
+   * (This is caused because of the usage of inputAccessory to be able to track the
+   * keyboard interactive change and it introduces this bug)
+   */
+  trackInteractive?: boolean;
+  /**
+   * iOS only.
+   * Show the keyboard on a negative scroll
+   * default: false
+   */
+  revealKeyboardInteractive?: boolean;
+  /**
+   * iOS only.
+   * Set to false to turn off inset management and manage it yourself
+   * default: true
+   */
+  manageScrollView?: boolean;
+  /**
+   * iOS only.
+   * Set to true manageScrollView is set to true and still does not work,
+   * it means that the ScrollView found is the wrong one and you'll have
+   * to have the KeyboardAccessoryView and the ScrollView as siblings
+   * and set this to true
+   *
+   * default: false
+   */
+  requiresSameParentToManageScrollView?: boolean;
+  /**
+   * iOS only.
+   * Allow hitting sub-views that are placed beyond the view bounds
+   *
+   * default: false
+   */
+  allowHitsOutsideBounds?: boolean;
+  scrollToFocusedInput?: boolean;
+  scrollBehavior?: number;
+  /**
+   * iOS only.
+   * Add a SafeArea view beneath the KeyboardAccessoryView
+   * default: false
+   */
+  addBottomView?: boolean;
+  /**
+   * iOS only.
+   * The bottom view's color as an hex string
+   * default: '#ffffff'
+   */
+  bottomViewColor?: string;
+  /**
+   * Allow control safe area
+   */
+  useSafeArea?: boolean;
+  /**
+   * Whether or not to include bottom tab bar inset
+   */
+  usesBottomTabs?: boolean;
+  ref?: any;
+  style?: ViewStyle;
+  children?: React.ReactChild | React.ReactChild[];
+};
 
 const KeyboardTrackingView = forwardRef(({children, ...others}: KeyboardTrackingViewProps, ref: any) => {
   const KeyboardTrackingViewContainer = isAndroid ? KeyboardTrackingViewAndroid : KeyboardTrackingViewIOS;
-  
   return (
     <KeyboardTrackingViewContainer {...others} ref={ref}>
       {children}