Merge pull request #13106 from 0xmiroslav/issue-11087

fix android keyboard issue

src/components/KeyboardAvoidingView/index.ios.js

@@ -0,0 +1,14 @@
+/*
+ * The KeyboardAvoidingView is only used on ios
+ */
+import React from 'react';
+import {KeyboardAvoidingView as KeyboardAvoidingViewComponent} from 'react-native';
+
+const KeyboardAvoidingView = props => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <KeyboardAvoidingViewComponent {...props} />
+);
+
+KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
+
+export default KeyboardAvoidingView;

src/components/KeyboardAvoidingView/index.js

@@ -0,0 +1,18 @@
+/*
+ * The KeyboardAvoidingView is only used on ios
+ */
+import React from 'react';
+import {View} from 'react-native';
+import _ from 'underscore';
+
+const KeyboardAvoidingView = (props) => {
+    const viewProps = _.omit(props, ['behavior', 'contentContainerStyle', 'enabled', 'keyboardVerticalOffset']);
+    return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+        <View {...viewProps} />
+    );
+};
+
+KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
+
+export default KeyboardAvoidingView;

src/components/PDFView/index.native.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
-import {TouchableWithoutFeedback, View, KeyboardAvoidingView} from 'react-native';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import PDF from 'react-native-pdf';
+import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';

src/components/ScreenWrapper/index.js

@@ -1,17 +1,126 @@
+import {View} from 'react-native';
 import React from 'react';
-import BaseScreenWrapper from './BaseScreenWrapper';
-import {defaultProps, propTypes} from './propTypes';
-
-const ScreenWrapper = props => (
-    <BaseScreenWrapper
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {props.children}
-    </BaseScreenWrapper>
-);
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import KeyboardAvoidingView from '../KeyboardAvoidingView';
+import CONST from '../../CONST';
+import KeyboardShortcut from '../../libs/KeyboardShortcut';
+import Navigation from '../../libs/Navigation/Navigation';
+import onScreenTransitionEnd from '../../libs/onScreenTransitionEnd';
+import * as StyleUtils from '../../styles/StyleUtils';
+import styles from '../../styles/styles';
+import HeaderGap from '../HeaderGap';
+import OfflineIndicator from '../OfflineIndicator';
+import compose from '../../libs/compose';
+import withNavigation from '../withNavigation';
+import withWindowDimensions from '../withWindowDimensions';
+import ONYXKEYS from '../../ONYXKEYS';
+import {withNetwork} from '../OnyxProvider';
+import {propTypes, defaultProps} from './propTypes';
+
+class ScreenWrapper extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            didScreenTransitionEnd: false,
+        };
+    }
+
+    componentDidMount() {
+        const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
+        this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
+            if (this.props.modal.willAlertModalBecomeVisible) {
+                return;
+            }
+
+            Navigation.dismissModal();
+        }, shortcutConfig.descriptionKey, shortcutConfig.modifiers, true);
+
+        this.unsubscribeTransitionEnd = onScreenTransitionEnd(this.props.navigation, () => {
+            this.setState({didScreenTransitionEnd: true});
+            this.props.onTransitionEnd();
+        });
+    }
+
+    /**
+     * We explicitly want to ignore if props.modal changes, and only want to rerender if
+     * any of the other props **used for the rendering output** is changed.
+     * @param {Object} nextProps
+     * @param {Object} nextState
+     * @returns {boolean}
+     */
+    shouldComponentUpdate(nextProps, nextState) {
+        return !_.isEqual(this.state, nextState)
+            || !_.isEqual(_.omit(this.props, 'modal'), _.omit(nextProps, 'modal'));
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeEscapeKey) {
+            this.unsubscribeEscapeKey();
+        }
+        if (this.unsubscribeTransitionEnd) {
+            this.unsubscribeTransitionEnd();
+        }
+    }
+
+    render() {
+        return (
+            <SafeAreaInsetsContext.Consumer>
+                {(insets) => {
+                    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
+                    const paddingStyle = {};
+
+                    if (this.props.includePaddingTop) {
+                        paddingStyle.paddingTop = paddingTop;
+                    }
+
+                    // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked.
+                    if (this.props.includePaddingBottom || this.props.network.isOffline) {
+                        paddingStyle.paddingBottom = paddingBottom;
+                    }
+
+                    return (
+                        <View
+                            style={[
+                                ...this.props.style,
+                                styles.flex1,
+                                paddingStyle,
+                            ]}
+                        >
+                            <KeyboardAvoidingView style={[styles.w100, styles.h100]} behavior={this.props.keyboardAvoidingViewBehavior}>
+                                <HeaderGap />
+                                {// If props.children is a function, call it to provide the insets to the children.
+                                    _.isFunction(this.props.children)
+                                        ? this.props.children({
+                                            insets,
+                                            didScreenTransitionEnd: this.state.didScreenTransitionEnd,
+                                        })
+                                        : this.props.children
+                                }
+                                {this.props.isSmallScreenWidth && (
+                                    <OfflineIndicator />
+                                )}
+                            </KeyboardAvoidingView>
+                        </View>
+                    );
+                }}
+            </SafeAreaInsetsContext.Consumer>
+        );
+    }
+}
+
 ScreenWrapper.propTypes = propTypes;
 ScreenWrapper.defaultProps = defaultProps;
-ScreenWrapper.displayName = 'ScreenWrapper';
 
-export default ScreenWrapper;
+export default compose(
+    withNavigation,
+    withWindowDimensions,
+    withOnyx({
+        modal: {
+            key: ONYXKEYS.MODAL,
+        },
+    }),
+    withNetwork(),
+)(ScreenWrapper);

src/pages/settings/AddSecondaryLoginPage.js

@@ -107,7 +107,8 @@ class AddSecondaryLoginPage extends Component {
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
                     onCloseButtonPress={() => Navigation.dismissModal()}
                 />
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                {/* We use keyboardShouldPersistTaps="handled" to prevent the keyboard from being hidden when switching focus on input fields  */}
+                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5} keyboardShouldPersistTaps="handled">
                     <Text style={[styles.mb6]}>
                         {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
                             ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'

src/pages/signin/SignInPageLayout/SignInPageContent.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import {ScrollView, View, KeyboardAvoidingView} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import styles from '../../../styles/styles';
 import variables from '../../../styles/variables';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
 import TermsAndLicenses from '../TermsAndLicenses';