Fix keyboard bottom insets removing bottom tabs margin (#7441)

# Issue: When Bottom tabs are visible a margin is added on top of the keyboard when it was opened. The margin is a bottom inset set to component due to bottom tabs height, which always will push the component up by bottom tabs height pixels. # Fix: - Determine bottom insets when bottom tabs are hidden or visible. - Subtract the component bottom inset from new insets once the keyboard is opened.
wix · Feb 8, 2022 · f3ac5c5 · f3ac5c5
1 parent 625fd42
commit f3ac5c5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 26 deletions.
diff --git a/...ain/java/com/reactnativenavigation/viewcontrollers/component/ComponentViewController.java b/...ain/java/com/reactnativenavigation/viewcontrollers/component/ComponentViewController.java
@@ -154,17 +154,20 @@ public void applyBottomInset() {
     @Override
     protected WindowInsetsCompat onApplyWindowInsets(View view, WindowInsetsCompat insets) {
         ViewController<?> viewController = findController(view);
-        if (viewController == null || viewController.getView() == null  || ignoreInsets) return insets;
+        if (viewController == null || viewController.getView() == null || ignoreInsets) return insets;
+        final Options currentOptions = resolveCurrentOptions(presenter.defaultOptions);
 
-        final int keyboardBottomInset = options.layout.adjustResize.get(true) ? insets.getInsets( WindowInsetsCompat.Type.ime()).bottom : 0;
-        final Insets systemBarsInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars() );
-        final int visibleNavBar = resolveCurrentOptions(presenter.defaultOptions).navigationBar.isVisible.isTrueOrUndefined()?1:0;
+        final int keyboardBottomInset = currentOptions.layout.adjustResize.get(true) ? insets.getInsets(WindowInsetsCompat.Type.ime()).bottom : 0;
+        final Insets systemBarsInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
+        final int visibleNavBar = currentOptions.navigationBar.isVisible.isTrueOrUndefined() ? 1 : 0;
+        final int controllerBottomInset = currentOptions.bottomTabsOptions.isHiddenOrDrawBehind() ? 0 : getBottomInset();
         final WindowInsetsCompat finalInsets = new WindowInsetsCompat.Builder().setInsets(WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.ime(),
                 Insets.of(systemBarsInsets.left,
                         0,
                         systemBarsInsets.right,
-                        Math.max(visibleNavBar*systemBarsInsets.bottom,keyboardBottomInset))
+                        Math.max(0, Math.max(visibleNavBar * systemBarsInsets.bottom, keyboardBottomInset) - controllerBottomInset))
         ).build();
+
         ViewCompat.onApplyWindowInsets(viewController.getView(), finalInsets);
         return insets;
     }

diff --git a/playground/src/screens/KeyboardScreen.tsx b/playground/src/screens/KeyboardScreen.tsx
@@ -18,11 +18,9 @@ interface Props extends NavigationComponentProps {
 }
 
 export default class KeyboardScreen extends NavigationComponent<Props> {
+  private secondTextInput: any;
   static options() {
     return {
-      bottomTabs: {
-        drawBehind: true,
-      },
       topBar: {
         title: {
           text: 'Keyboard',
@@ -88,15 +86,17 @@ export default class KeyboardScreen extends NavigationComponent<Props> {
               onSubmitEditing={async (event) => {
                 if (event.nativeEvent.text || event.nativeEvent.text.trim().length > 0)
                   await this.openModalKeyboard(event.nativeEvent.text);
+                else this.secondTextInput.focus();
               }}
             />
             <TextInput
+              ref={(input) => {
+                this.secondTextInput = input;
+              }}
               style={styles.input}
               testID={testIDs.TEXT_INPUT2}
               placeholderTextColor="rgba(255, 0, 0, 0.5)"
               placeholder="Submit pushes screen"
-              onFocus={this.hideTabs}
-              onBlur={this.showTabs}
               onSubmitEditing={async (event) => {
                 if (event.nativeEvent.text || event.nativeEvent.text.trim().length > 0)
                   await this.openPushedKeyboard(event.nativeEvent.text, true);
@@ -133,22 +133,6 @@ export default class KeyboardScreen extends NavigationComponent<Props> {
       })
     );
   };
-
-  hideTabs = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      bottomTabs: {
-        visible: false,
-      },
-    });
-  };
-
-  showTabs = () => {
-    Navigation.mergeOptions(this.props.componentId, {
-      bottomTabs: {
-        visible: true,
-      },
-    });
-  };
 }
 
 const styles = StyleSheet.create({