diff --git a/src/components/ScreenWrapper.js b/src/components/ScreenWrapper.js
index 9167c7cc2dd..bc6a416dbd0 100644
--- a/src/components/ScreenWrapper.js
+++ b/src/components/ScreenWrapper.js
@@ -1,7 +1,7 @@
import _ from 'underscore';
import React from 'react';
import PropTypes from 'prop-types';
-import {View, KeyboardAvoidingView} from 'react-native';
+import {View} from 'react-native';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
import {withOnyx} from 'react-native-onyx';
import styles from '../styles/styles';
@@ -15,10 +15,6 @@ import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import CONST from '../CONST';
import withNavigation from './withNavigation';
-import withWindowDimensions from './withWindowDimensions';
-import OfflineIndicator from './OfflineIndicator';
-import {withNetwork} from './OnyxProvider';
-import networkPropTypes from './networkPropTypes';
const propTypes = {
/** Array of additional styles to add */
@@ -39,13 +35,6 @@ const propTypes = {
// Called when navigated Screen's transition is finished.
onTransitionEnd: PropTypes.func,
- /** Is the window width narrow, like on a mobile device */
- isSmallScreenWidth: PropTypes.bool.isRequired,
-
- /** The behavior to pass to the KeyboardAvoidingView, requires some trial and error depending on the layout/devices used.
- * Search 'switch(behavior)' in ./node_modules/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js for more context */
- keyboardAvoidingViewBehavior: PropTypes.oneOf(['padding', 'height', 'position']),
-
// react-navigation navigation object available to screen components
navigation: PropTypes.shape({
// Method to attach listener to Navigation state.
@@ -58,9 +47,6 @@ const propTypes = {
willAlertModalBecomeVisible: PropTypes.bool,
}),
- /** Information about the network */
- network: networkPropTypes.isRequired,
-
};
const defaultProps = {
@@ -72,7 +58,6 @@ const defaultProps = {
addListener: () => {},
},
modal: {},
- keyboardAvoidingViewBehavior: 'padding',
};
class ScreenWrapper extends React.Component {
@@ -120,36 +105,27 @@ class ScreenWrapper extends React.Component {
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) {
+ if (this.props.includePaddingBottom) {
paddingStyle.paddingBottom = paddingBottom;
}
return (
-
-
-
- {// 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 && this.props.network.isOffline && (
-
-
-
- )}
-
+
+ {// 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
+ }
+
);
}}
@@ -163,11 +139,9 @@ ScreenWrapper.defaultProps = defaultProps;
export default compose(
withNavigation,
- withWindowDimensions,
withOnyx({
modal: {
key: ONYXKEYS.MODAL,
},
}),
- withNetwork(),
)(ScreenWrapper);
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 6d6586fa1f0..5a14ed6f7f4 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -13,6 +13,7 @@ import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import Text from '../components/Text';
import styles from '../styles/styles';
import Button from '../components/Button';
@@ -124,65 +125,67 @@ class AddPersonalBankAccountPage extends React.Component {
return (
-
- {success ? (
- <>
-
- {success}
-
-
-
-
- ) : (
-
-
- {
- this.setState({
- selectedPlaidBankAccount: params.selectedPlaidBankAccount,
- });
- }}
- onExitPlaid={Navigation.goBack}
- receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
- />
+
+
+ {success ? (
+ <>
+
+ {success}
+
+
+
+
+ ) : (
+
+
+ {
+ this.setState({
+ selectedPlaidBankAccount: params.selectedPlaidBankAccount,
+ });
+ }}
+ onExitPlaid={Navigation.goBack}
+ receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+ />
+ {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
+
+ this.setState({password: text})}
+ errorText={this.getErrorText('password')}
+ hasError={this.getErrors().password}
+ />
+
+ )}
+
{!_.isUndefined(this.state.selectedPlaidBankAccount) && (
-
- this.setState({password: text})}
- errorText={this.getErrorText('password')}
- hasError={this.getErrors().password}
- />
-
+
)}
-
- {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
-
- )}
-
- )}
+
+ )}
+
);
}
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index d2ab86fccc9..71daa5f13f7 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -3,7 +3,9 @@ import _ from 'underscore';
import React from 'react';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
-import {View} from 'react-native';
+import {
+ View, KeyboardAvoidingView,
+} from 'react-native';
import IdologyQuestions from './IdologyQuestions';
import ScreenWrapper from '../../components/ScreenWrapper';
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -252,17 +254,19 @@ class AdditionalDetailsStep extends React.Component {
render() {
if (!_.isEmpty(this.props.walletAdditionalDetails.questions)) {
return (
-
- Navigation.dismissModal()}
- shouldShowBackButton
- onBackButtonPress={() => Wallet.setAdditionalDetailsQuestions(null)}
- />
-
+
+
+ Navigation.dismissModal()}
+ shouldShowBackButton
+ onBackButtonPress={() => Wallet.setAdditionalDetailsQuestions(null)}
+ />
+
+
);
}
@@ -273,125 +277,127 @@ class AdditionalDetailsStep extends React.Component {
const {firstName, lastName} = PersonalDetails.extractFirstAndLastNameFromAvailableDetails(this.props.currentUserPersonalDetails);
return (
-
- Navigation.dismissModal()}
- />
-
-
- {this.props.translate('additionalDetailsStep.helpText')}
-
- {this.props.translate('additionalDetailsStep.helpLink')}
-
-
- this.form = el}>
-
-
+
+
+ Navigation.dismissModal()}
+ />
+
+
+ {this.props.translate('additionalDetailsStep.helpText')}
+
+ {this.props.translate('additionalDetailsStep.helpLink')}
+
+
+ this.form = el}>
+
+
+ this.clearErrorAndSetValue('legalFirstName', val)}
+ value={this.props.walletAdditionalDetailsDraft.legalFirstName || firstName}
+ errorText={this.getErrorText('legalFirstName')}
+ />
+ this.clearErrorAndSetValue('legalLastName', val)}
+ value={this.props.walletAdditionalDetailsDraft.legalLastName || lastName}
+ errorText={this.getErrorText('legalLastName')}
+ />
+ {
+ const renamedFields = {
+ street: 'addressStreet',
+ state: 'addressState',
+ zipCode: 'addressZip',
+ city: 'addressCity',
+ };
+ _.each(values, (value, inputKey) => {
+ const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
+ this.clearErrorAndSetValue(renamedInputKey, value);
+ });
+ }}
+ errorText={this.getErrorText('addressStreet')}
+ hint={this.props.translate('common.noPO')}
+ />
+ {this.props.walletAdditionalDetailsDraft.addressStreet ? (
+ <>
+ {/** Once the user has started entering his address, show the other address fields (city, state, zip) */}
+ {/** We'll autofill them when the user selects a full address from the google autocomplete */}
+ this.clearErrorAndSetValue('addressCity', val)}
+ value={this.props.walletAdditionalDetailsDraft.addressCity || ''}
+ errorText={this.getErrorText('addressCity')}
+ />
+ this.clearErrorAndSetValue('addressState', val)}
+ value={this.props.walletAdditionalDetailsDraft.addressState || ''}
+ errorText={this.getErrorText('addressState')}
+ />
+ this.clearErrorAndSetValue('addressZip', val)}
+ value={this.props.walletAdditionalDetailsDraft.addressZip || ''}
+ errorText={this.getErrorText('addressZip')}
+ />
+
+ ) : null}
+
this.clearErrorAndSetValue('legalFirstName', val)}
- value={this.props.walletAdditionalDetailsDraft.legalFirstName || firstName}
- errorText={this.getErrorText('legalFirstName')}
+ keyboardType={CONST.KEYBOARD_TYPE.PHONE_PAD}
+ label={this.props.translate(this.fieldNameTranslationKeys.phoneNumber)}
+ onChangeText={val => this.clearErrorAndSetValue('phoneNumber', val)}
+ value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''}
+ placeholder={this.props.translate('common.phoneNumberPlaceholder')}
+ errorText={this.getErrorText('phoneNumber')}
/>
- this.clearErrorAndSetValue('legalLastName', val)}
- value={this.props.walletAdditionalDetailsDraft.legalLastName || lastName}
- errorText={this.getErrorText('legalLastName')}
+ label={this.props.translate(this.fieldNameTranslationKeys.dob)}
+ onInputChange={val => this.clearDateErrorsAndSetValue(val)}
+ defaultValue={this.props.walletAdditionalDetailsDraft.dob || ''}
+ placeholder={this.props.translate('common.dob')}
+ errorText={this.getErrorText('dob') || this.getErrorText('age')}
+ maximumDate={new Date()}
/>
- {
- const renamedFields = {
- street: 'addressStreet',
- state: 'addressState',
- zipCode: 'addressZip',
- city: 'addressCity',
- };
- _.each(values, (value, inputKey) => {
- const renamedInputKey = lodashGet(renamedFields, inputKey, inputKey);
- this.clearErrorAndSetValue(renamedInputKey, value);
- });
- }}
- errorText={this.getErrorText('addressStreet')}
- hint={this.props.translate('common.noPO')}
+ label={this.props.translate(this.fieldNameTranslationKeys[shouldAskForFullSSN ? 'ssnFull9' : 'ssn'])}
+ onChangeText={val => this.clearSSNErrorAndSetValue(val)}
+ value={this.props.walletAdditionalDetailsDraft.ssn || ''}
+ errorText={this.getErrorText('ssnFull9') || this.getErrorText('ssn')}
+ maxLength={shouldAskForFullSSN ? 9 : 4}
+ keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
/>
- {this.props.walletAdditionalDetailsDraft.addressStreet ? (
- <>
- {/** Once the user has started entering his address, show the other address fields (city, state, zip) */}
- {/** We'll autofill them when the user selects a full address from the google autocomplete */}
- this.clearErrorAndSetValue('addressCity', val)}
- value={this.props.walletAdditionalDetailsDraft.addressCity || ''}
- errorText={this.getErrorText('addressCity')}
- />
- this.clearErrorAndSetValue('addressState', val)}
- value={this.props.walletAdditionalDetailsDraft.addressState || ''}
- errorText={this.getErrorText('addressState')}
- />
- this.clearErrorAndSetValue('addressZip', val)}
- value={this.props.walletAdditionalDetailsDraft.addressZip || ''}
- errorText={this.getErrorText('addressZip')}
- />
-
- ) : null}
- this.clearErrorAndSetValue('phoneNumber', val)}
- value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''}
- placeholder={this.props.translate('common.phoneNumberPlaceholder')}
- errorText={this.getErrorText('phoneNumber')}
+ {
+ this.form.scrollTo({y: 0, animated: true});
+ }}
+ message={this.props.walletAdditionalDetails.additionalErrorMessage}
+ isLoading={this.props.walletAdditionalDetails.loading}
+ buttonText={this.props.translate('common.saveAndContinue')}
/>
- this.clearDateErrorsAndSetValue(val)}
- defaultValue={this.props.walletAdditionalDetailsDraft.dob || ''}
- placeholder={this.props.translate('common.dob')}
- errorText={this.getErrorText('dob') || this.getErrorText('age')}
- maximumDate={new Date()}
- />
- this.clearSSNErrorAndSetValue(val)}
- value={this.props.walletAdditionalDetailsDraft.ssn || ''}
- errorText={this.getErrorText('ssnFull9') || this.getErrorText('ssn')}
- maxLength={shouldAskForFullSSN ? 9 : 4}
- keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
- />
-
- {
- this.form.scrollTo({y: 0, animated: true});
- }}
- message={this.props.walletAdditionalDetails.additionalErrorMessage}
- isLoading={this.props.walletAdditionalDetails.loading}
- buttonText={this.props.translate('common.saveAndContinue')}
- />
-
-
+
+
+
);
}
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index 53f25dfeffd..f1ac80846a0 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -1,6 +1,7 @@
import _ from 'underscore';
import React from 'react';
import {withOnyx} from 'react-native-onyx';
+import {KeyboardAvoidingView} from 'react-native';
import ScreenWrapper from '../../components/ScreenWrapper';
import * as BankAccounts from '../../libs/actions/BankAccounts';
import ONYXKEYS from '../../ONYXKEYS';
@@ -58,12 +59,14 @@ class EnablePaymentsPage extends React.Component {
if (this.props.userWallet.shouldShowFailedKYC) {
return (
-
- Navigation.dismissModal()}
- />
-
+
+
+ Navigation.dismissModal()}
+ />
+
+
);
}
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index 4a07075b0d3..030ea26bac8 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
import PropTypes from 'prop-types';
import ScreenWrapper from '../components/ScreenWrapper';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
import Section from '../components/Section';
import Navigation from '../libs/Navigation/Navigation';
@@ -27,34 +28,36 @@ const propTypes = {
const GetAssistancePage = props => (
- Navigation.dismissModal(true)}
- shouldShowBackButton
- onBackButtonPress={() => Navigation.goBack()}
- />
- Report.navigateToConciergeChat(),
- icon: Expensicons.ChatBubble,
- shouldShowRightIcon: true,
- },
- {
- title: props.translate('getAssistancePage.requestSetupCall'),
- onPress: () => Navigation.navigate(ROUTES.getRequestCallRoute(props.route.params.taskID)),
- icon: Expensicons.Phone,
- shouldShowRightIcon: true,
- },
- ]}
- >
-
- {props.translate('getAssistancePage.description')}
-
-
+
+ Navigation.dismissModal(true)}
+ shouldShowBackButton
+ onBackButtonPress={() => Navigation.goBack()}
+ />
+ Report.navigateToConciergeChat(),
+ icon: Expensicons.ChatBubble,
+ shouldShowRightIcon: true,
+ },
+ {
+ title: props.translate('getAssistancePage.requestSetupCall'),
+ onPress: () => Navigation.navigate(ROUTES.getRequestCallRoute(props.route.params.taskID)),
+ icon: Expensicons.Phone,
+ shouldShowRightIcon: true,
+ },
+ ]}
+ >
+
+ {props.translate('getAssistancePage.description')}
+
+
+
);
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index d8bb8fe7fa4..0e55bdbccfb 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -16,6 +16,7 @@ import ScreenWrapper from '../components/ScreenWrapper';
import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import compose from '../libs/compose';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import personalDetailsPropType from './personalDetailsPropType';
const propTypes = {
@@ -212,7 +213,7 @@ class NewChatPage extends Component {
return (
{({didScreenTransitionEnd}) => (
- <>
+
)}
-
+
)}
);
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 9f022bd00bc..21a15777b73 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -14,6 +14,7 @@ import CONST from '../../CONST';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import compose from '../../libs/compose';
import styles from '../../styles/styles';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import getPlaidOAuthReceivedRedirectURI from '../../libs/getPlaidOAuthReceivedRedirectURI';
import Text from '../../components/Text';
import {withNetwork} from '../../components/OnyxProvider';
@@ -218,32 +219,34 @@ class ReimbursementAccountPage extends React.Component {
}
return (
- {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
-
- )}
- {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
-
- )}
- {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
-
- )}
- {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
-
- )}
- {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
-
- )}
- {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && (
-
- )}
-
+
+ {currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT && (
+
+ )}
+ {currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY && (
+
+ )}
+ {currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR && (
+
+ )}
+ {currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT && (
+
+ )}
+ {currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION && (
+
+ )}
+ {currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE && (
+
+ )}
+
+
);
}
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index d2b8fa817e8..cbfd52a4390 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -23,6 +23,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes,
import TextInput from '../components/TextInput';
import Text from '../components/Text';
import Section from '../components/Section';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
import * as Illustrations from '../components/Icon/Illustrations';
import * as Expensicons from '../components/Icon/Expensicons';
import * as LoginUtils from '../libs/LoginUtils';
@@ -284,84 +285,86 @@ class RequestCallPage extends Component {
return (
- Navigation.goBack()}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
- {this.props.requestCallForm.didRequestCallSucceed
- ? (
-
- ) : (
- <>
-
-
-
-
- {this.props.translate('requestCallPage.description')}
+
+ Navigation.goBack()}
+ onCloseButtonPress={() => Navigation.dismissModal(true)}
+ />
+ {this.props.requestCallForm.didRequestCallSucceed
+ ? (
+
+ ) : (
+ <>
+
+
+
+
+ {this.props.translate('requestCallPage.description')}
+
+ this.setState({firstName})}
+ onChangeLastName={lastName => this.setState({lastName})}
+ style={[styles.mv4]}
+ />
+ this.setState({phoneNumber})}
+ />
+ this.setState({phoneExtension})}
+ containerStyles={[styles.mt4]}
+ />
+ {this.getWaitTimeMessage()}
+
+
+
+
+ {isBlockedFromConcierge && (
+
+
+ {this.props.translate('requestCallPage.blockedFromConcierge')}
+
+ )}
+ {!_.isEmpty(this.props.requestCallForm.error) && (
+
+ {this.props.requestCallForm.error}
- this.setState({firstName})}
- onChangeLastName={lastName => this.setState({lastName})}
- style={[styles.mv4]}
- />
- this.setState({phoneNumber})}
- />
- this.setState({phoneExtension})}
- containerStyles={[styles.mt4]}
- />
- {this.getWaitTimeMessage()}
-
-
-
-
- {isBlockedFromConcierge && (
-
-
- {this.props.translate('requestCallPage.blockedFromConcierge')}
-
- )}
- {!_.isEmpty(this.props.requestCallForm.error) && (
-
- {this.props.requestCallForm.error}
-
- )}
-
-
-
- )}
+ )}
+
+
+
+ )}
+
);
}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 4cc4589ec04..84064086fe6 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -16,6 +16,7 @@ import Permissions from '../../libs/Permissions';
import * as ReportUtils from '../../libs/ReportUtils';
import ReportActionsView from './report/ReportActionsView';
import ReportActionCompose from './report/ReportActionCompose';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import SwipeableView from '../../components/SwipeableView';
import CONST from '../../CONST';
import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
@@ -214,49 +215,51 @@ class ReportScreen extends React.Component {
return (
- Navigation.navigate(ROUTES.HOME)}
- />
-
-
- {this.shouldShowLoader() && }
- {!this.shouldShowLoader() && (
-
- )}
- {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
-
- {
- isArchivedRoom
- ? (
-
- ) : (
-
-
-
- )
- }
+
+ Navigation.navigate(ROUTES.HOME)}
+ />
+
+
+ {this.shouldShowLoader() && }
+ {!this.shouldShowLoader() && (
+
+ )}
+ {(isArchivedRoom || this.props.session.shouldShowComposeInput) && (
+
+ {
+ isArchivedRoom
+ ? (
+
+ ) : (
+
+
+
+ )
+ }
+
+ )}
- )}
-
+
);
}
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index c2cf3b9262b..fd45bd61626 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -669,7 +669,7 @@ class ReportActionCompose extends React.Component {
- {!this.props.isSmallScreenWidth && }
+
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index d0f9861ee81..b8b408b4c81 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -10,6 +10,7 @@ import ScreenWrapper from '../../components/ScreenWrapper';
import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
import compose from '../../libs/compose';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import * as IOU from '../../libs/actions/IOU';
import * as CurrencySymbolUtils from '../../libs/CurrencySymbolUtils';
import {withNetwork} from '../../components/OnyxProvider';
@@ -116,19 +117,21 @@ class IOUCurrencySelection extends Component {
const headerMessage = this.state.searchValue.trim() && !this.state.currencyData.length ? this.props.translate('common.noResultsFound') : '';
return (
-
-
+
+
+
+
);
}
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 508456ebe9a..14a24b473aa 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -23,6 +23,7 @@ import AnimatedStep from '../../components/AnimatedStep';
import ScreenWrapper from '../../components/ScreenWrapper';
import Tooltip from '../../components/Tooltip';
import CONST from '../../CONST';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import * as PersonalDetails from '../../libs/actions/PersonalDetails';
import withCurrentUserPersonalDetails from '../../components/withCurrentUserPersonalDetails';
import ROUTES from '../../ROUTES';
@@ -173,7 +174,7 @@ class IOUModal extends Component {
* Decides our animation type based on whether we're increasing or decreasing
* our step index.
* @returns {String}
- */
+ */
getDirection() {
if (this.state.previousStepIndex < this.state.currentStepIndex) {
return 'in';
@@ -357,7 +358,7 @@ class IOUModal extends Component {
return (
{({didScreenTransitionEnd}) => (
- <>
+
)}
-
+
)}
);
diff --git a/src/pages/settings/AddSecondaryLoginPage.js b/src/pages/settings/AddSecondaryLoginPage.js
index afffdb7cfdb..7a15526de57 100755
--- a/src/pages/settings/AddSecondaryLoginPage.js
+++ b/src/pages/settings/AddSecondaryLoginPage.js
@@ -14,6 +14,7 @@ import ONYXKEYS from '../../ONYXKEYS';
import Button from '../../components/Button';
import ROUTES from '../../ROUTES';
import CONST from '../../CONST';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import compose from '../../libs/compose';
import FixedFooter from '../../components/FixedFooter';
@@ -100,60 +101,62 @@ class AddSecondaryLoginPage extends Component {
this.phoneNumberInputRef.focus();
}}
>
- Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
- onCloseButtonPress={() => Navigation.dismissModal()}
- />
-
-
- {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
- ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
- : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
-
-
- this.phoneNumberInputRef = el}
- value={this.state.login}
- onChangeText={this.onSecondaryLoginChange}
- keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
- ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
- returnKeyType="done"
- />
-
-
- this.setState({password})}
- secureTextEntry
- autoCompleteType="password"
- textContentType="password"
- onSubmitEditing={this.submitForm}
- />
-
- {!_.isEmpty(this.props.user.error) && (
-
- {this.props.user.error}
-
- )}
-
-
-
+
+
+ {this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE
+ ? 'addSecondaryLoginPage.enterPreferredPhoneNumberToSendValidationLink'
+ : 'addSecondaryLoginPage.enterPreferredEmailToSendValidationLink')}
+
+
+ this.phoneNumberInputRef = el}
+ value={this.state.login}
+ onChangeText={this.onSecondaryLoginChange}
+ keyboardType={this.formType === CONST.LOGIN_TYPE.PHONE
+ ? CONST.KEYBOARD_TYPE.PHONE_PAD : undefined}
+ returnKeyType="done"
+ />
+
+
+ this.setState({password})}
+ secureTextEntry
+ autoCompleteType="password"
+ textContentType="password"
+ onSubmitEditing={this.submitForm}
+ />
+
+ {!_.isEmpty(this.props.user.error) && (
+
+ {this.props.user.error}
+
+ )}
+
+
+
+
+
);
}
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index 69270c2baca..23d70132c05 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -14,6 +14,7 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
import * as User from '../../libs/actions/User';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import compose from '../../libs/compose';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import FixedFooter from '../../components/FixedFooter';
import TextInput from '../../components/TextInput';
import * as Session from '../../libs/actions/Session';
@@ -146,84 +147,86 @@ class PasswordPage extends Component {
this.currentPasswordInputRef.focus();
}}
>
- Navigation.goBack()}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
- {!_.isEmpty(this.props.account.success)
- ? (
-
- ) : (
- <>
-
-
- {this.props.translate('passwordPage.changingYourPasswordPrompt')}
-
-
- this.currentPasswordInputRef = el}
- secureTextEntry
- autoCompleteType="password"
- textContentType="password"
- value={this.state.currentPassword}
- onChangeText={text => this.clearErrorAndSetValue('currentPassword', text)}
- returnKeyType="done"
- hasError={this.state.errors.currentPassword}
- errorText={this.getErrorText('currentPassword')}
- onSubmitEditing={this.submit}
- />
-
-
- this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
- onSubmitEditing={this.submit}
- />
- {shouldShowNewPasswordPrompt && (
-
- {this.props.translate('passwordPage.newPasswordPrompt')}
+
+ Navigation.goBack()}
+ onCloseButtonPress={() => Navigation.dismissModal(true)}
+ />
+ {!_.isEmpty(this.props.account.success)
+ ? (
+
+ ) : (
+ <>
+
+
+ {this.props.translate('passwordPage.changingYourPasswordPrompt')}
+
+ this.currentPasswordInputRef = el}
+ secureTextEntry
+ autoCompleteType="password"
+ textContentType="password"
+ value={this.state.currentPassword}
+ onChangeText={text => this.clearErrorAndSetValue('currentPassword', text)}
+ returnKeyType="done"
+ hasError={this.state.errors.currentPassword}
+ errorText={this.getErrorText('currentPassword')}
+ onSubmitEditing={this.submit}
+ />
+
+
+ this.clearErrorAndSetValue('newPassword', text, ['newPasswordSameAsOld'])}
+ onSubmitEditing={this.submit}
+ />
+ {shouldShowNewPasswordPrompt && (
+
+ {this.props.translate('passwordPage.newPasswordPrompt')}
+
+ )}
+
+ {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
+
+ {this.props.account.error}
+
)}
-
- {_.every(this.state.errors, error => !error) && !_.isEmpty(this.props.account.error) && (
-
- {this.props.account.error}
-
- )}
-
-
-
-
-
- )}
+
+
+
+
+
+ )}
+
);
}
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index b59619f8e05..9e1ccee29c7 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -9,6 +9,7 @@ import Text from '../../../components/Text';
import TextLink from '../../../components/TextLink';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
import * as ValidationUtils from '../../../libs/ValidationUtils';
import CheckboxWithLabel from '../../../components/CheckboxWithLabel';
import StatePicker from '../../../components/StatePicker';
@@ -87,92 +88,94 @@ class DebitCardPage extends Component {
render() {
return (
- Navigation.goBack()}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
-
+
+
);
}
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index 2e8bdff1d8e..fde6b501547 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -13,6 +13,7 @@ import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import compose from '../../../libs/compose';
import Button from '../../../components/Button';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
import FixedFooter from '../../../components/FixedFooter';
import Growl from '../../../libs/Growl';
import TextInput from '../../../components/TextInput';
@@ -60,42 +61,44 @@ class AddPayPalMePage extends React.Component {
render() {
return (
- Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
-
-
-
- {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
-
- this.setState({payPalMeUsername: text, payPalMeUsernameError: false})}
- returnKeyType="done"
- hasError={this.state.payPalMeUsernameError}
- errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
- />
-
-
-
-
+
+
+
+ {this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
+
+ this.setState({payPalMeUsername: text, payPalMeUsernameError: false})}
+ returnKeyType="done"
+ hasError={this.state.payPalMeUsernameError}
+ errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
+ />
+
+
+
+
+
+
);
}
diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js
index 99d0b1fe262..b1d87834004 100644
--- a/src/pages/settings/Payments/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js
@@ -5,6 +5,7 @@ import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
import ScreenWrapper from '../../../components/ScreenWrapper';
import Navigation from '../../../libs/Navigation/Navigation';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
import CONST from '../../../CONST';
import PaymentMethodList from './PaymentMethodList';
import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
@@ -57,28 +58,30 @@ const ChooseTransferAccountPage = (props) => {
return (
- Navigation.goBack()}
- onCloseButtonPress={() => Navigation.dismissModal()}
- />
-
-
+ Navigation.goBack()}
+ onCloseButtonPress={() => Navigation.dismissModal()}
/>
-
-
+
+
+
+
+
);
};
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index c8b5b803add..779d5521732 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -14,6 +14,7 @@ import Navigation from '../../../../libs/Navigation/Navigation';
import styles from '../../../../styles/styles';
import withLocalize from '../../../../components/withLocalize';
import compose from '../../../../libs/compose';
+import KeyboardAvoidingView from '../../../../components/KeyboardAvoidingView/index';
import * as BankAccounts from '../../../../libs/actions/BankAccounts';
import Popover from '../../../../components/Popover';
import MenuItem from '../../../../components/MenuItem';
@@ -32,7 +33,6 @@ import KYCWall from '../../../../components/KYCWall';
import {propTypes, defaultProps} from './paymentsPagePropTypes';
import {withNetwork} from '../../../../components/OnyxProvider';
import * as PaymentUtils from '../../../../libs/PaymentUtils';
-import OfflineIndicator from '../../../../components/OfflineIndicator';
class BasePaymentsPage extends React.Component {
constructor(props) {
@@ -265,176 +265,177 @@ class BasePaymentsPage extends React.Component {
const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth;
return (
- Navigation.navigate(ROUTES.SETTINGS)}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
-
- {Permissions.canUseWallet(this.props.betas) && (
- <>
-
-
-
- {this.props.userWallet.currentBalance > 0 && (
-
- {triggerKYCFlow => (
-
- )}
-
- )}
-
- )}
-
- {this.props.translate('paymentsPage.paymentMethodsTitle')}
-
-
+ Navigation.navigate(ROUTES.SETTINGS)}
+ onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
-
- this.addPaymentMethodTypePressed(method)}
- />
-
-
- {isPopoverBottomMount && (
-
+
+ {Permissions.canUseWallet(this.props.betas) && (
+ <>
+
+
+
+ {this.props.userWallet.currentBalance > 0 && (
+
+ {triggerKYCFlow => (
+
+ )}
+
+ )}
+
)}
- {shouldShowMakeDefaultButton && (
+
+ {this.props.translate('paymentsPage.paymentMethodsTitle')}
+
+
+
+ this.addPaymentMethodTypePressed(method)}
+ />
+
+
+ {isPopoverBottomMount && (
+
+ )}
+ {shouldShowMakeDefaultButton && (
+ {
+ this.setState({
+ shouldShowDefaultDeleteMenu: false,
+ });
+
+ // Wait for the previous modal to close, before opening a new one. A modal will be considered completely closed when closing animation is finished.
+ // InteractionManager fires after the currently running animation is completed.
+ // https://github.com/Expensify/App/issues/7768#issuecomment-1044879541
+ InteractionManager.runAfterInteractions(() => {
+ this.setState({
+ shouldShowPasswordPrompt: true,
+ passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+ });
+ });
+ }}
+ style={[styles.button, styles.alignSelfCenter, styles.w100]}
+ >
+
+ {this.props.translate('paymentsPage.setDefaultConfirmation')}
+
+
+ )}
{
this.setState({
shouldShowDefaultDeleteMenu: false,
});
-
- // Wait for the previous modal to close, before opening a new one. A modal will be considered completely closed when closing animation is finished.
- // InteractionManager fires after the currently running animation is completed.
- // https://github.com/Expensify/App/issues/7768#issuecomment-1044879541
InteractionManager.runAfterInteractions(() => {
this.setState({
- shouldShowPasswordPrompt: true,
- passwordButtonText: this.props.translate('paymentsPage.setDefaultConfirmation'),
+ shouldShowConfirmPopover: true,
});
});
}}
- style={[styles.button, styles.alignSelfCenter, styles.w100]}
+ style={[
+ styles.button,
+ styles.buttonDanger,
+ shouldShowMakeDefaultButton && styles.mt4,
+ styles.alignSelfCenter,
+ styles.w100,
+ ]}
>
-
- {this.props.translate('paymentsPage.setDefaultConfirmation')}
+
+ {this.props.translate('common.delete')}
- )}
- {
- this.setState({
- shouldShowDefaultDeleteMenu: false,
- });
- InteractionManager.runAfterInteractions(() => {
- this.setState({
- shouldShowConfirmPopover: true,
- });
- });
- }}
- style={[
- styles.button,
- styles.buttonDanger,
- shouldShowMakeDefaultButton && styles.mt4,
- styles.alignSelfCenter,
- styles.w100,
- ]}
- >
-
- {this.props.translate('common.delete')}
-
-
-
-
- {
- this.hidePasswordPrompt();
- this.makeDefaultPaymentMethod(password);
- }}
- submitButtonText={this.state.passwordButtonText}
- isDangerousAction
- />
- {
- this.setState({
- shouldShowConfirmPopover: false,
- });
- this.deletePaymentMethod();
- }}
- onCancel={() => {
- this.setState({shouldShowConfirmPopover: false});
- }}
- shouldShowCancelButton
- danger
- />
-
+
+
+ {
+ this.hidePasswordPrompt();
+ this.makeDefaultPaymentMethod(password);
+ }}
+ submitButtonText={this.state.passwordButtonText}
+ isDangerousAction
+ />
+ {
+ this.setState({
+ shouldShowConfirmPopover: false,
+ });
+ this.deletePaymentMethod();
+ }}
+ onCancel={() => {
+ this.setState({shouldShowConfirmPopover: false});
+ }}
+ shouldShowCancelButton
+ danger
+ />
+
);
}
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index a6694e78555..7f3857b2127 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -10,6 +10,7 @@ import Navigation from '../../../libs/Navigation/Navigation';
import styles from '../../../styles/styles';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import compose from '../../../libs/compose';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
import * as Expensicons from '../../../components/Icon/Expensicons';
import * as Illustrations from '../../../components/Icon/Illustrations';
import Icon from '../../../components/Icon';
@@ -28,7 +29,6 @@ import cardPropTypes from '../../../components/cardPropTypes';
import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
import ROUTES from '../../../ROUTES';
import FormAlertWrapper from '../../../components/FormAlertWrapper';
-import OfflineIndicator from '../../../components/OfflineIndicator';
const propTypes = {
/** User's wallet information */
@@ -205,100 +205,101 @@ class TransferBalancePage extends React.Component {
return (
- Navigation.goBack()}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
-
-
-
-
-
- {_.map(this.paymentTypes, paymentType => (
-
-
-
- {isOffline => (
-
-
-
+
+
+
+
+
+ {isOffline => (
+
+
+
);
}
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 0cdde430ee2..b2583dc7f2b 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -19,6 +19,7 @@ import LoginField from './LoginField';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import compose from '../../../libs/compose';
import Button from '../../../components/Button';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
import FixedFooter from '../../../components/FixedFooter';
import TextInput from '../../../components/TextInput';
import Picker from '../../../components/Picker';
@@ -218,97 +219,99 @@ class ProfilePage extends Component {
return (
- Navigation.navigate(ROUTES.SETTINGS)}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
-
-
+ Navigation.navigate(ROUTES.SETTINGS)}
+ onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
-
- {this.props.translate('profilePage.tellUsAboutYourself')}
-
- this.setState({firstName})}
- onChangeLastName={lastName => this.setState({lastName})}
- style={[styles.mt4, styles.mb4]}
- />
-
- {
- const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT;
- this.setState({
- pronouns: hasSelfSelectedPronouns ? '' : pronouns,
- hasSelfSelectedPronouns,
- });
- }}
- items={pronounsList}
- placeholder={{
- value: '',
- label: this.props.translate('profilePage.selectYourPronouns'),
- }}
- value={pronounsPickerValue}
+
+
- {this.state.hasSelfSelectedPronouns && (
-
- this.setState({pronouns})}
- placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
- errorText={PersonalDetails.getMaxCharacterError(this.state.hasPronounError)}
- />
-
- )}
-
-
-
-
- this.setState({selectedTimezone})}
- items={timezones}
- isDisabled={this.state.isAutomaticTimezone}
- value={this.state.selectedTimezone}
+
+ {this.props.translate('profilePage.tellUsAboutYourself')}
+
+ this.setState({firstName})}
+ onChangeLastName={lastName => this.setState({lastName})}
+ style={[styles.mt4, styles.mb4]}
/>
-
-
-
-
-
-
+
+ {
+ const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT;
+ this.setState({
+ pronouns: hasSelfSelectedPronouns ? '' : pronouns,
+ hasSelfSelectedPronouns,
+ });
+ }}
+ items={pronounsList}
+ placeholder={{
+ value: '',
+ label: this.props.translate('profilePage.selectYourPronouns'),
+ }}
+ value={pronounsPickerValue}
+ />
+ {this.state.hasSelfSelectedPronouns && (
+
+ this.setState({pronouns})}
+ placeholder={this.props.translate('profilePage.selfSelectYourPronoun')}
+ errorText={PersonalDetails.getMaxCharacterError(this.state.hasPronounError)}
+ />
+
+ )}
+
+
+
+
+ this.setState({selectedTimezone})}
+ items={timezones}
+ isDisabled={this.state.isAutomaticTimezone}
+ value={this.state.selectedTimezone}
+ />
+
+
+
+
+
+
+
);
}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index f908faf126b..2f9d7f5360e 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -15,6 +15,7 @@ import Button from '../../../components/Button';
import Text from '../../../components/Text';
import FixedFooter from '../../../components/FixedFooter';
import ConfirmModal from '../../../components/ConfirmModal';
+import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
import * as CloseAccountActions from '../../../libs/actions/CloseAccount';
@@ -54,82 +55,84 @@ class CloseAccountPage extends Component {
const userEmailOrPhone = Str.removeSMSDomain(this.props.session.email);
return (
- Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
- onCloseButtonPress={() => Navigation.dismissModal(true)}
- />
-
- {this.props.translate('closeAccountPage.reasonForLeavingPrompt')}
- this.setState({reasonForLeaving})}
- label={this.props.translate('closeAccountPage.enterMessageHere')}
- containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
+
+ Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
+ onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
-
-
- {this.props.translate('closeAccountPage.closeAccountWarning')}
-
- {' '}
- {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
-
-
-
- {this.props.translate('closeAccountPage.defaultContact')}
-
- {' '}
- {userEmailOrPhone}
-
- this.setState({phoneOrEmail: phoneOrEmail.toLowerCase()})}
- label={this.props.translate('closeAccountPage.enterDefaultContact')}
- containerStyles={[styles.mt5]}
- />
-
-
-
-
- {this.props.translate('closeAccountPage.closeAccountActionRequired')}
+
+ {this.props.translate('closeAccountPage.reasonForLeavingPrompt')}
+ this.setState({reasonForLeaving})}
+ label={this.props.translate('closeAccountPage.enterMessageHere')}
+ containerStyles={[styles.mt5, styles.closeAccountMessageInput]}
+ />
+
+
+ {this.props.translate('closeAccountPage.closeAccountWarning')}
+
{' '}
- { Linking.openURL('https://community.expensify.com/discussion/4724/faq-why-cant-i-close-my-account'); }}
- >
- {this.props.translate('common.here')}
+ {this.props.translate('closeAccountPage.closeAccountPermanentlyDeleteData')}
+
+
+
+ {this.props.translate('closeAccountPage.defaultContact')}
{' '}
- {this.props.translate('closeAccountPage.closeAccountTryAgainAfter')}
+ {userEmailOrPhone}
- )}
- onConfirm={CloseAccountActions.hideCloseAccountModal}
- isVisible={this.props.isCloseAccoutModalOpen}
- shouldShowCancelButton={false}
- />
+ this.setState({phoneOrEmail: phoneOrEmail.toLowerCase()})}
+ label={this.props.translate('closeAccountPage.enterDefaultContact')}
+ containerStyles={[styles.mt5]}
+ />
+
+
+
+
+ {this.props.translate('closeAccountPage.closeAccountActionRequired')}
+ {' '}
+ { Linking.openURL('https://community.expensify.com/discussion/4724/faq-why-cant-i-close-my-account'); }}
+ >
+ {this.props.translate('common.here')}
+
+ {' '}
+ {this.props.translate('closeAccountPage.closeAccountTryAgainAfter')}
+
+ )}
+ onConfirm={CloseAccountActions.hideCloseAccountModal}
+ isVisible={this.props.isCloseAccoutModalOpen}
+ shouldShowCancelButton={false}
+ />
+
);
}
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index ec3906eed06..0940abd51d5 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -13,6 +13,7 @@ import compose from '../../libs/compose';
import ONYXKEYS from '../../ONYXKEYS';
import * as Policy from '../../libs/actions/Policy';
import TextInput from '../../components/TextInput';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
import OptionsSelector from '../../components/OptionsSelector';
import * as OptionsListUtils from '../../libs/OptionsListUtils';
@@ -243,7 +244,7 @@ class WorkspaceInvitePage extends React.Component {
return (
{({didScreenTransitionEnd}) => (
- <>
+
-
+
)}
);
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 1dae4d8d5b6..5740c74ae2e 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -20,6 +20,7 @@ import Button from '../../components/Button';
import FixedFooter from '../../components/FixedFooter';
import Permissions from '../../libs/Permissions';
import Log from '../../libs/Log';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import * as ValidationUtils from '../../libs/ValidationUtils';
const propTypes = {
@@ -150,50 +151,52 @@ class WorkspaceNewRoomPage extends React.Component {
return (
- Navigation.dismissModal()}
- />
-
-
- this.clearErrorAndSetValue('roomName', roomName)}
- />
-
-
- this.clearErrorAndSetValue('policyID', policyID)}
- />
-
-
- this.setState({visibility})}
- />
-
-
- {_.find(visibilityOptions, option => option.value === this.state.visibility).description}
-
-
-
-
+
+
+ this.clearErrorAndSetValue('roomName', roomName)}
+ />
+
+
+ this.clearErrorAndSetValue('policyID', policyID)}
+ />
+
+
+ this.setState({visibility})}
+ />
+
+
+ {_.find(visibilityOptions, option => option.value === this.state.visibility).description}
+
+
+
+
+
+
);
}
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index d1acbc2306c..6eaf7118fca 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -16,6 +16,7 @@ import * as BankAccounts from '../../libs/actions/BankAccounts';
import BankAccount from '../../libs/models/BankAccount';
import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
import userPropTypes from '../settings/userPropTypes';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
import withFullPolicy from './withFullPolicy';
import {withNetwork} from '../../components/OnyxProvider';
import networkPropTypes from '../../components/networkPropTypes';
@@ -95,33 +96,35 @@ class WorkspacePageWithSections extends React.Component {
return (
- Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
- onCloseButtonPress={() => Navigation.dismissModal()}
- />
- {this.props.reimbursementAccount.loading ? (
-
-
-
- ) : (
- <>
-
-
-
- {this.props.children(hasVBA, policyID, isUsingECard)}
-
-
-
- {this.props.footer}
-
- )}
+
+ Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
+ onCloseButtonPress={() => Navigation.dismissModal()}
+ />
+ {this.props.reimbursementAccount.loading ? (
+
+
+
+ ) : (
+ <>
+
+
+
+ {this.props.children(hasVBA, policyID, isUsingECard)}
+
+
+
+ {this.props.footer}
+
+ )}
+
);
}