KeyboardAccessoryView - adding 'usesBottomTabs' prop (#1871)

Inbal-Tish · ethanshar · web-flow · commit ccfbf24cd071 · 2022-03-01T09:16:15.000+02:00
* KeyboardAccessoryView - adding 'usesBottomTabs' prop to add bottom offset

* lib - bump version

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

Co-authored-by: Ethan Sharabi &lt;ethans@wix.com&gt;

Co-authored-by: Ethan Sharabi &lt;ethans@wix.com&gt;
diff --git a/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js b/demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js
@@ -170,8 +170,9 @@ export default class KeyboardInputViewScreen extends PureComponent {
   };
 
   render() {
-    const {message} = this.props;
+    const {message, isModal} = this.props;
     const {receivedKeyboardData, customKeyboard, useSafeArea} = this.state;
+
     return (
       <View flex bg-grey80>
         <Text h2 marginT-page marginL-page>
@@ -201,6 +202,7 @@ export default class KeyboardInputViewScreen extends PureComponent {
           revealKeyboardInteractive
           onRequestShowKeyboard={this.onRequestShowKeyboard}
           useSafeArea={useSafeArea}
+          usesBottomTabs={!isModal}
         />
       </View>
     );
diff --git a/generatedTypes/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.d.ts b/generatedTypes/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.d.ts
@@ -87,6 +87,12 @@ export declare type KeyboardAccessoryViewProps = {
      * default: true
      */
     useSafeArea?: boolean;
+    /**
+     * iOS only.
+     * Whether or not to include bottom tab bat inset
+     * default: true
+     */
+    usesBottomTabs?: boolean;
     children?: React.ReactChild;
 };
 /**
diff --git a/generatedTypes/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.d.ts b/generatedTypes/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.d.ts
@@ -15,6 +15,10 @@ export declare type KeyboardTrackingViewProps = ViewProps & {
      * Allow control safe area
      */
     useSafeArea?: boolean;
+    /**
+     * Whether or not to include bottom tab bat inset
+     */
+    usesBottomTabs?: boolean;
     scrollToFocusedInput?: boolean;
     scrollBehavior?: number;
     revealKeyboardInteractive?: boolean;
@@ -41,6 +45,10 @@ declare const KeyboardTrackingView: React.ForwardRefExoticComponent<Pick<ViewPro
      * Allow control safe area
      */
     useSafeArea?: boolean | undefined;
+    /**
+     * Whether or not to include bottom tab bat inset
+     */
+    usesBottomTabs?: boolean | undefined;
     scrollToFocusedInput?: boolean | undefined;
     scrollBehavior?: number | undefined;
     revealKeyboardInteractive?: boolean | undefined;
@@ -51,5 +59,5 @@ declare const KeyboardTrackingView: React.ForwardRefExoticComponent<Pick<ViewPro
     ref?: any;
     children?: React.ReactChild | React.ReactChild[] | undefined;
     style?: ViewStyle | undefined;
-}, keyof ViewProps | "useSafeArea" | "trackInteractive" | "scrollToFocusedInput" | "scrollBehavior" | "revealKeyboardInteractive" | "manageScrollView" | "requiresSameParentToManageScrollView" | "addBottomView" | "allowHitsOutsideBounds"> & React.RefAttributes<unknown>>;
+}, keyof ViewProps | "useSafeArea" | "trackInteractive" | "usesBottomTabs" | "scrollToFocusedInput" | "scrollBehavior" | "revealKeyboardInteractive" | "manageScrollView" | "requiresSameParentToManageScrollView" | "addBottomView" | "allowHitsOutsideBounds"> & React.RefAttributes<unknown>>;
 export default KeyboardTrackingView;
diff --git a/generatedTypes/lib/components/Keyboard/index.d.ts b/generatedTypes/lib/components/Keyboard/index.d.ts
@@ -8,6 +8,7 @@ declare const _default: {
     KeyboardTrackingView: import("react").ForwardRefExoticComponent<Pick<import("react-native").ViewProps & {
         trackInteractive?: boolean | undefined;
         useSafeArea?: boolean | undefined;
+        usesBottomTabs?: boolean | undefined;
         scrollToFocusedInput?: boolean | undefined;
         scrollBehavior?: number | undefined;
         revealKeyboardInteractive?: boolean | undefined;
@@ -18,7 +19,7 @@ declare const _default: {
         ref?: any;
         children?: import("react").ReactChild | import("react").ReactChild[] | undefined;
         style?: import("react-native").ViewStyle | undefined;
-    }, keyof import("react-native").ViewProps | "useSafeArea" | "trackInteractive" | "scrollToFocusedInput" | "scrollBehavior" | "revealKeyboardInteractive" | "manageScrollView" | "requiresSameParentToManageScrollView" | "addBottomView" | "allowHitsOutsideBounds"> & import("react").RefAttributes<unknown>>;
+    }, keyof import("react-native").ViewProps | "useSafeArea" | "trackInteractive" | "usesBottomTabs" | "scrollToFocusedInput" | "scrollBehavior" | "revealKeyboardInteractive" | "manageScrollView" | "requiresSameParentToManageScrollView" | "addBottomView" | "allowHitsOutsideBounds"> & import("react").RefAttributes<unknown>>;
     KeyboardAwareInsetsView: {
         (props: KeyboardTrackingViewProps): JSX.Element;
         displayName: string;
diff --git a/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx b/lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx
@@ -113,6 +113,12 @@ export type KeyboardAccessoryViewProps = {
    * default: true
    */
   useSafeArea?: boolean;
+  /**
+   * iOS only.
+   * Whether or not to include bottom tab bat inset
+   * default: true
+   */
+  usesBottomTabs?: boolean;
 
   children?: React.ReactChild;
 };
@@ -252,7 +258,8 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
       kbComponent,
       onItemSelected,
       onRequestShowKeyboard,
-      useSafeArea
+      useSafeArea,
+      usesBottomTabs
     } = this.props;
 
     return (
@@ -267,6 +274,7 @@ class KeyboardAccessoryView extends Component<KeyboardAccessoryViewProps> {
         requiresSameParentToManageScrollView={requiresSameParentToManageScrollView}
         addBottomView={addBottomView}
         allowHitsOutsideBounds={allowHitsOutsideBounds}
+        usesBottomTabs={usesBottomTabs}
       >
         <>
           {renderContent?.()}
diff --git a/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.tsx b/lib/components/Keyboard/KeyboardTracking/KeyboardTrackingView/index.tsx
@@ -20,6 +20,10 @@ export type KeyboardTrackingViewProps = ViewProps & {
     * Allow control safe area
     */
    useSafeArea?: boolean;
+   /**
+    * Whether or not to include bottom tab bar inset
+    */
+   usesBottomTabs?: boolean;
 
    scrollToFocusedInput?: boolean;
    scrollBehavior?: number;
diff --git a/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m b/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m
@@ -51,6 +51,7 @@ @interface KeyboardTrackingViewTemp : UIView
 @property (nonatomic) KeyboardTrackingScrollBehavior scrollBehavior;
 @property (nonatomic) BOOL addBottomView;
 @property (nonatomic) BOOL useSafeArea;
+@property (nonatomic) BOOL usesBottomTabs;
 @property (nonatomic) BOOL scrollToFocusedInput;
 @property (nonatomic) BOOL allowHitsOutsideBounds;
 
@@ -82,6 +83,7 @@ -(instancetype)init
         
         self.addBottomView = NO;
         self.scrollToFocusedInput = NO;
+        self.usesBottomTabs = NO;
         
         [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(rctContentDidAppearNotification:) name:RCTContentDidAppearNotification object:nil];
     }
@@ -503,14 +505,35 @@ - (void) rctContentDidAppearNotification:(NSNotification*)notification
     });
 }
 
+#pragma mark - root view controller and presenting style
+
+
+- (BOOL)isModal {
+    UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
+    UIViewController *presentedViewController = window.rootViewController.presentedViewController;
+
+    if (presentedViewController != nil) {
+        if ([presentedViewController isKindOfClass:[UINavigationController class]]) {
+            UINavigationController *presented = (UINavigationController*)presentedViewController;
+            if (presented.visibleViewController) {
+                return YES;
+            }
+        }
+    }
+    return NO;
+}
+
+#pragma mark - TabBarController
+
 -(CGFloat)getTabBarHeight
 {
     if (@available(iOS 11.0, *)) {
-        UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
-        if ([window.rootViewController isKindOfClass:[UITabBarController class]])
+        NSLog(@"INBAL usesBottomTabs: %d", self.usesBottomTabs);
+        if (self.usesBottomTabs == YES)
         {
             UITabBarController *tabBarController = [UITabBarController new];
             CGFloat tabBarHeight = tabBarController.tabBar.frame.size.height;
+            UIWindow *window = UIApplication.sharedApplication.windows.firstObject;
             CGFloat bottomPadding = window.safeAreaInsets.bottom;
             return tabBarHeight + bottomPadding;
         }
@@ -650,6 +673,7 @@ @implementation KeyboardTrackingViewTempManager
 RCT_REMAP_VIEW_PROPERTY(requiresSameParentToManageScrollView, requiresSameParentToManageScrollView, BOOL)
 RCT_REMAP_VIEW_PROPERTY(addBottomView, addBottomView, BOOL)
 RCT_REMAP_VIEW_PROPERTY(useSafeArea, useSafeArea, BOOL)
+RCT_REMAP_VIEW_PROPERTY(usesBottomTabs, usesBottomTabs, BOOL)
 RCT_REMAP_VIEW_PROPERTY(scrollToFocusedInput, scrollToFocusedInput, BOOL)
 RCT_REMAP_VIEW_PROPERTY(allowHitsOutsideBounds, allowHitsOutsideBounds, BOOL)
 
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index.js",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "uilib-native",`
`3`		`- "version": "3.0.5",`
	`3`	`+ "version": "3.0.6",`
`4`	`4`	`"homepage": "https://github.com/wix/react-native-ui-lib",`
`5`	`5`	`"description": "uilib native components (separated from js components)",`
`6`	`6`	`"main": "components/index.js",`