Merge pull request Expensify#7126 from parasharrajat/double-keyboard

Block Virtual keyboard on Request Money Page

src/components/TextInputAutoWidth.js → src/components/TextInputAutoWidthWithoutKeyboard/BaseTextInputAutoWidthWithoutKeyboard.js

@@ -1,45 +1,47 @@
 import React from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
+import {
+    View,
+    AppState,
+    Keyboard,
+} from 'react-native';
 import _ from 'underscore';
-import styles from '../styles/styles';
-import * as StyleUtils from '../styles/StyleUtils';
-import Text from './Text';
-import TextInputFocusable from './TextInputFocusable';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
+import Text from '../Text';
+import TextInputFocusable from '../TextInputFocusable';
+import * as baseTextInputAutoWidthWithoutKeyboardPropTypes from './baseTextInputAutoWidthWithoutKeyboardPropTypes';
 
-const propTypes = {
-    /** The value of the comment box */
-    value: PropTypes.string.isRequired,
-
-    /** A ref to forward to the text input */
-    forwardedRef: PropTypes.func.isRequired,
-
-    /** General styles to apply to the text input */
-    // eslint-disable-next-line react/forbid-prop-types
-    inputStyle: PropTypes.object,
-
-    /** Styles to apply to the text input */
-    // eslint-disable-next-line react/forbid-prop-types
-    textStyle: PropTypes.object.isRequired,
-
-    /** Optional placeholder to show when there is no value */
-    placeholder: PropTypes.string,
-};
-
-const defaultProps = {
-    inputStyle: {},
-    placeholder: '',
-};
-
-class TextInputAutoWidth extends React.Component {
+class BaseTextInputAutoWidthWithoutKeyboard extends React.Component {
     constructor(props) {
         super(props);
+        this.dismissKeyboardWhenBackgrounded = this.dismissKeyboardWhenBackgrounded.bind(this);
 
         this.state = {
             textInputWidth: 0,
         };
     }
 
+    componentDidMount() {
+        this.appStateSubscription = AppState.addEventListener(
+            'change',
+            this.dismissKeyboardWhenBackgrounded,
+        );
+    }
+
+    componentWillUnmount() {
+        if (!this.appStateSubscription) {
+            return;
+        }
+        this.appStateSubscription.remove();
+    }
+
+    dismissKeyboardWhenBackgrounded(nextAppState) {
+        if (!nextAppState.match(/inactive|background/)) {
+            return;
+        }
+        Keyboard.dismiss();
+    }
+
     render() {
         const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
         return (
@@ -48,6 +50,7 @@ class TextInputAutoWidth extends React.Component {
                     <TextInputFocusable
                         style={[this.props.inputStyle, StyleUtils.getAutoGrowTextInputStyle(this.state.textInputWidth)]}
                         ref={this.props.forwardedRef}
+                        showSoftInputOnFocus={false}
                         /* eslint-disable-next-line react/jsx-props-no-spreading */
                         {...propsWithoutStyles}
                     />
@@ -69,10 +72,10 @@ class TextInputAutoWidth extends React.Component {
     }
 }
 
-TextInputAutoWidth.propTypes = propTypes;
-TextInputAutoWidth.defaultProps = defaultProps;
+BaseTextInputAutoWidthWithoutKeyboard.propTypes = baseTextInputAutoWidthWithoutKeyboardPropTypes.propTypes;
+BaseTextInputAutoWidthWithoutKeyboard.defaultProps = baseTextInputAutoWidthWithoutKeyboardPropTypes.defaultProps;
 
 export default React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
-    <TextInputAutoWidth {...props} forwardedRef={ref} />
+    <BaseTextInputAutoWidthWithoutKeyboard {...props} forwardedRef={ref} />
 ));

src/components/TextInputAutoWidthWithoutKeyboard/baseTextInputAutoWidthWithoutKeyboardPropTypes.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** The value of the comment box */
+    value: PropTypes.string.isRequired,
+
+    /** A ref to forward to the text input */
+    forwardedRef: PropTypes.func.isRequired,
+
+    /** General styles to apply to the text input */
+    // eslint-disable-next-line react/forbid-prop-types
+    inputStyle: PropTypes.object,
+
+    /** Styles to apply to the text input */
+    // eslint-disable-next-line react/forbid-prop-types
+    textStyle: PropTypes.object.isRequired,
+
+    /** Optional placeholder to show when there is no value */
+    placeholder: PropTypes.string,
+};
+
+const defaultProps = {
+    inputStyle: {},
+    placeholder: '',
+};
+
+export {propTypes, defaultProps};

src/components/TextInputAutoWidthWithoutKeyboard/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import BaseTextInputAutoWidthWithoutKeyboard from './BaseTextInputAutoWidthWithoutKeyboard';
+import * as baseTextInputAutoWidthWithoutKeyboardPropTypes from './baseTextInputAutoWidthWithoutKeyboardPropTypes';
+
+class TextInputAutoWidthWithoutKeyboard extends React.Component {
+    componentDidMount() {
+        this.textInput.setNativeProps({inputmode: 'none'});
+    }
+
+    render() {
+        return (
+            <BaseTextInputAutoWidthWithoutKeyboard
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...this.props}
+                ref={(el) => {
+                    this.textInput = el;
+                    this.props.forwardedRef(el);
+                }}
+            />
+        );
+    }
+}
+
+TextInputAutoWidthWithoutKeyboard.propTypes = baseTextInputAutoWidthWithoutKeyboardPropTypes.propTypes;
+TextInputAutoWidthWithoutKeyboard.defaultProps = baseTextInputAutoWidthWithoutKeyboardPropTypes.defaultProps;
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <TextInputAutoWidthWithoutKeyboard {...props} forwardedRef={ref} />
+));

src/components/TextInputAutoWidthWithoutKeyboard/index.native.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import BaseTextInputAutoWidthWithoutKeyboard from './BaseTextInputAutoWidthWithoutKeyboard';
+import * as baseTextInputAutoWidthWithoutKeyboardPropTypes from './baseTextInputAutoWidthWithoutKeyboardPropTypes';
+
+const TextInputAutoWidthWithoutKeyboard = props => (
+    <BaseTextInputAutoWidthWithoutKeyboard
+    // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        ref={props.forwardedRef}
+    />
+);
+
+TextInputAutoWidthWithoutKeyboard.propTypes = baseTextInputAutoWidthWithoutKeyboardPropTypes.propTypes;
+TextInputAutoWidthWithoutKeyboard.defaultProps = baseTextInputAutoWidthWithoutKeyboardPropTypes.defaultProps;
+TextInputAutoWidthWithoutKeyboard.displayName = 'TextInputAutoWidthWithoutKeyboard';
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <TextInputAutoWidthWithoutKeyboard {...props} forwardedRef={ref} />
+));

src/pages/iou/steps/IOUAmountPage.js

@@ -3,8 +3,6 @@ import {
     View,
     TouchableOpacity,
     InteractionManager,
-    AppState,
-    Keyboard,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -13,14 +11,14 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import BigNumberPad from '../../../components/BigNumberPad';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import TextInputAutoWidth from '../../../components/TextInputAutoWidth';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
 import Button from '../../../components/Button';
 import Text from '../../../components/Text';
 import CONST from '../../../CONST';
+import TextInputAutoWidthWithoutKeyboard from '../../../components/TextInputAutoWidthWithoutKeyboard';
 
 const propTypes = {
     /** Whether or not this IOU has multiple participants */
@@ -79,7 +77,6 @@ class IOUAmountPage extends React.Component {
         this.updateAmount = this.updateAmount.bind(this);
         this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
         this.focusTextInput = this.focusTextInput.bind(this);
-        this.dismissKeyboardWhenBackgrounded = this.dismissKeyboardWhenBackgrounded.bind(this);
 
         this.state = {
             amount: props.selectedAmount,
@@ -88,10 +85,6 @@ class IOUAmountPage extends React.Component {
 
     componentDidMount() {
         this.focusTextInput();
-        this.appStateSubscription = AppState.addEventListener(
-            'change',
-            this.dismissKeyboardWhenBackgrounded,
-        );
     }
 
     componentDidUpdate(prevProps) {
@@ -102,20 +95,6 @@ class IOUAmountPage extends React.Component {
         this.focusTextInput();
     }
 
-    componentWillUnmount() {
-        if (!this.appStateSubscription) {
-            return;
-        }
-        this.appStateSubscription.remove();
-    }
-
-    dismissKeyboardWhenBackgrounded(nextAppState) {
-        if (!nextAppState.match(/inactive|background/)) {
-            return;
-        }
-        Keyboard.dismiss();
-    }
-
     /**
      * Focus text input
      */
@@ -209,16 +188,14 @@ class IOUAmountPage extends React.Component {
                             {lodashGet(this.props.currencyList, [this.props.iou.selectedCurrencyCode, 'symbol'])}
                         </Text>
                     </TouchableOpacity>
-                    <TextInputAutoWidth
+                    <TextInputAutoWidthWithoutKeyboard
                         inputStyle={styles.iouAmountTextInput}
                         textStyle={styles.iouAmountText}
                         onChangeText={this.updateAmount}
                         ref={el => this.textInput = el}
                         value={this.state.amount}
                         placeholder="0"
                         keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
-                        showSoftInputOnFocus={false}
-                        inputmode="none"
                     />
                 </View>
                 <View style={[styles.w100, styles.justifyContentEnd]}>