Fix keyboard-awareness bug

e2e/Keyboard.test.js

@@ -1,26 +1,78 @@
 import { default as TestIDs, default as testIDs } from '../playground/src/testIDs';
-import Android from './AndroidUtils';
+import { device } from 'detox';
 import Utils from './Utils';
 
 const { elementByLabel, elementById } = Utils;
 
+const KBD_OBSCURED_TEXT = 'Keyboard Demo';
+
+const androidDriver = {
+  async init() {
+    if (device.getPlatform() !== 'android') {
+      return;
+    }
+
+    const { id: adbName } = device;
+    const { adb } = device.deviceDriver;
+
+    if (!adb || !adbName) {
+      throw new Error(`Keyboard driver init failed (id=${adbName}, hasADB=${!!adb})`);
+    }
+
+    this.adb = adb;
+    this.adbName = adbName;
+    this.kbdEnabled = await adb.shell(adbName, 'settings get Secure show_ime_with_hard_keyboard');
+
+    if (!(this.kbdEnabled === '0' || this.kbdEnabled === '1')) {
+      console.warn('[KbdDriver] Unable to get on-screen KBD setting, defaulting to false');
+      this.kbdEnabled = '0';
+    }
+  },
+
+  async enableOnScreenKeyboard() {
+    if (!this.adb) {
+      // Not initialized
+      return;
+    }
+    await this.adb.shell(this.adbName, 'settings put Secure show_ime_with_hard_keyboard 1');
+  },
+
+  async restoreOnScreenKeyboard() {
+    if (!this.adb) {
+      // Not initialized
+      return;
+    }
+    await this.adb.shell(this.adbName, `settings put Secure show_ime_with_hard_keyboard ${this.kbdEnabled}`);
+  },
+}
+
 describe.e2e('Keyboard', () => {
+  beforeAll(async () => {
+    await androidDriver.init();
+    await androidDriver.enableOnScreenKeyboard();
+  });
+
+  afterAll(async () => {
+    await androidDriver.restoreOnScreenKeyboard();
+  });
+
   beforeEach(async () => {
     await device.launchApp({ newInstance: true });
     await elementById(TestIDs.KEYBOARD_SCREEN_BTN).tap();
   });
 
   it('Push - should close keyboard when Back clicked', async () => {
+    await expect(elementByLabel(KBD_OBSCURED_TEXT)).toBeVisible();
     await elementById(TestIDs.TEXT_INPUT1).tap();
-    await expect(elementByLabel('Keyboard Demo')).not.toBeVisible();
+    await expect(elementByLabel(KBD_OBSCURED_TEXT)).not.toBeVisible();
     await elementById(TestIDs.BACK_BUTTON).tap();
     await expect(elementById(testIDs.MAIN_BOTTOM_TABS)).toBeVisible();
   });
 
   it('Modal - should close keyboard when close clicked', async () => {
     await elementById(TestIDs.MODAL_BTN).tap();
     await elementById(TestIDs.TEXT_INPUT1).tap();
-    await expect(elementByLabel('Keyboard Demo')).not.toBeVisible();
+    await expect(elementByLabel(KBD_OBSCURED_TEXT)).not.toBeVisible();
     await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
     await expect(elementById(testIDs.MAIN_BOTTOM_TABS)).toBeVisible();
   });
@@ -46,4 +98,10 @@ describe.e2e('Keyboard', () => {
     await elementById(TestIDs.MODAL_BTN).tap();
     await expect(elementById(TestIDs.TEXT_INPUT1)).not.toBeFocused();
   });
+
+  it(':android: should respect UI with keyboard awareness', async () => {
+    await elementById(TestIDs.PUSH_KEYBOARD_SCREEN_STICKY_FOOTER).tap();
+    await elementById(TestIDs.TEXT_INPUT2).tap();
+    await expect(elementByLabel(KBD_OBSCURED_TEXT)).toBeVisible();
+  });
 });

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java

@@ -316,10 +316,12 @@ public Animator getPopAnimation(Options appearingOptions, Options disappearingOp
     @Override
     protected WindowInsetsCompat onApplyWindowInsets(View view, WindowInsetsCompat insets) {
         Insets sysInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
-        view.setPaddingRelative(0, 0, 0, sysInsets.bottom);
-        return WindowInsetsCompat.CONSUMED;
-    }
+        Insets imeInsets = insets.getInsets(WindowInsetsCompat.Type.ime());
 
+        int bottomInset = (imeInsets.bottom > 0) ? 0 : sysInsets.bottom;
+        view.setPaddingRelative(0, 0, 0, bottomInset);
+        return insets;
+    }
 
     @RestrictTo(RestrictTo.Scope.TESTS)
     public BottomTabs getBottomTabs() {

playground/src/screens/KeyboardScreen.tsx

@@ -1,5 +1,15 @@
 import React from 'react';
-import { View, ScrollView, Dimensions, StyleSheet, Image, TextInput, Text } from 'react-native';
+import {
+  SafeAreaView,
+  View,
+  ScrollView,
+  Dimensions,
+  StyleSheet,
+  Image,
+  TextInput,
+  Text,
+  KeyboardAvoidingView,
+} from 'react-native';
 import {
   NavigationProps,
   NavigationComponent,
@@ -15,6 +25,7 @@ const KEYBOARD_LABEL = 'Keyboard Demo';
 interface Props extends NavigationProps {
   title?: string;
   autoFocus?: boolean;
+  stickyFooter?: boolean;
 }
 
 export default class KeyboardScreen extends NavigationComponent<Props> {
@@ -34,6 +45,7 @@ export default class KeyboardScreen extends NavigationComponent<Props> {
       },
     };
   }
+
   constructor(props: Props) {
     super(props);
     Navigation.events().bindComponent(this);
@@ -50,30 +62,41 @@ export default class KeyboardScreen extends NavigationComponent<Props> {
   }
 
   render() {
+    const FooterRoot = this.props.stickyFooter === true ? KeyboardAvoidingView : View;
     return (
-      <View style={styles.root}>
+      <SafeAreaView style={styles.root}>
         <ScrollView>
           <Image style={styles.image} source={require('../../img/2048.jpeg')} />
           <View style={{ alignItems: 'center' }}>
             <Button
               style={styles.button}
-              label={'Modal Keyboard Screen'}
+              label={'Modal screen'}
               testID={testIDs.MODAL_BTN}
               onPress={async () => {
                 await this.openModalKeyboard(undefined);
               }}
             />
+            <View style={styles.row}>
+              <Button
+                style={styles.button}
+                label={'Push screen w/ focus'}
+                testID={testIDs.PUSH_FOCUSED_KEYBOARD_SCREEN}
+                onPress={async () => {
+                  await this.openPushedKeyboard(undefined, true);
+                }}
+              />
+              <Button
+                style={styles.button}
+                label={'w/ sticky-footer'}
+                testID={testIDs.PUSH_KEYBOARD_SCREEN_STICKY_FOOTER}
+                onPress={async () => {
+                  await this.openPushedKeyboard(undefined, undefined, true);
+                }}
+              />
+            </View>
             <Button
               style={styles.button}
-              label={'Push Focused Keyboard Screen'}
-              testID={testIDs.PUSH_FOCUSED_KEYBOARD_SCREEN}
-              onPress={async () => {
-                await this.openPushedKeyboard(undefined, true);
-              }}
-            />
-            <Button
-              style={styles.button}
-              label={'Show Focused Keyboard Screen Modal'}
+              label={'Modal screen w/ focus'}
               testID={testIDs.MODAL_FOCUSED_KEYBOARD_SCREEN}
               onPress={async () => {
                 await this.openModalKeyboard(undefined, true);
@@ -104,20 +127,21 @@ export default class KeyboardScreen extends NavigationComponent<Props> {
             />
           </View>
         </ScrollView>
-        <View style={styles.footer}>
-          <Text style={styles.input}> {KEYBOARD_LABEL}</Text>
-        </View>
-      </View>
+        <FooterRoot behavior="height" style={styles.footer}>
+          <Text style={styles.input}>{KEYBOARD_LABEL}</Text>
+        </FooterRoot>
+      </SafeAreaView>
     );
   }
 
-  openPushedKeyboard = async (text?: string, autoFocus?: boolean) => {
+  openPushedKeyboard = async (text?: string, autoFocus?: boolean, stickyFooter?: boolean) => {
     await Navigation.push(this.props.componentId, {
       component: {
         name: Screens.KeyboardScreen,
         passProps: {
           title: text,
           autoFocus,
+          stickyFooter,
         },
       },
     });
@@ -169,4 +193,8 @@ const styles = StyleSheet.create({
     width: screenWidth,
     resizeMode: 'cover',
   },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
 });

playground/src/testIDs.ts

@@ -28,6 +28,7 @@ const testIDs = {
   MODAL_DISABLED_BACK_BTN: 'SHOW_MODAL_DISABLED_BACK_BTN',
   PUSH_FOCUSED_KEYBOARD_SCREEN: 'PUSH_FOCUSED_KEYBOARD_SCREEN',
   MODAL_FOCUSED_KEYBOARD_SCREEN: 'MODAL_FOCUSED_KEYBOARD_SCREEN',
+  PUSH_KEYBOARD_SCREEN_STICKY_FOOTER: 'PUSH_KEYBOARD_SCREEN_STICKY_FOOTER',
   PAGE_SHEET_MODAL_BTN: 'SHOW_PAGE_SHEET_MODAL_BUTTON',
   DISMISS_MODAL_BTN: 'DISMISS_MODAL_BUTTON',
   DISMISS_REACT_MODAL_BTN: 'DISMISS_REACT_MODAL_BUTTON',