Use native KeyboardAvoidingView component everywhere

src/components/FAB/FAB.js → src/components/FloatingActionButton.js

@@ -1,23 +1,33 @@
 import React, {PureComponent} from 'react';
 import {
-    Pressable, Animated, Easing,
+    Pressable, Animated, Easing, KeyboardAvoidingView,
 } from 'react-native';
-import Icon from '../Icon';
-import * as Expensicons from '../Icon/Expensicons';
-import styles from '../../styles/styles';
-import * as StyleUtils from '../../styles/StyleUtils';
-import themeColors from '../../styles/themes/default';
-import fabPropTypes from './fabPropTypes';
-import Tooltip from '../Tooltip';
-import withLocalize from '../withLocalize';
+import PropTypes from 'prop-types';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
+import themeColors from '../styles/themes/default';
+import Tooltip from './Tooltip';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 AnimatedIcon.displayName = 'AnimatedIcon';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 AnimatedPressable.displayName = 'AnimatedPressable';
 
-class FAB extends PureComponent {
+const propTypes = {
+    // Callback to fire on request to toggle the FloatingActionButton
+    onPress: PropTypes.func.isRequired,
+
+    // Current state (active or not active) of the component
+    isActive: PropTypes.bool.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+class FloatingActionButton extends PureComponent {
     constructor(props) {
         super(props);
         this.animatedValue = new Animated.Value(props.isActive ? 1 : 0);
@@ -63,22 +73,25 @@ class FAB extends PureComponent {
         });
 
         return (
-            <Tooltip absolute text={this.props.translate('common.new')}>
-                <AnimatedPressable
-                    accessibilityLabel={this.props.accessibilityLabel}
-                    accessibilityRole={this.props.accessibilityRole}
-                    onPress={this.props.onPress}
-                    style={[
-                        styles.floatingActionButton,
-                        StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
-                    ]}
-                >
-                    <AnimatedIcon src={Expensicons.Plus} fill={fill} />
-                </AnimatedPressable>
-            </Tooltip>
+            <KeyboardAvoidingView behavior="padding">
+                <Tooltip absolute text={this.props.translate('common.new')}>
+                    <AnimatedPressable
+                        accessibilityLabel={this.props.accessibilityLabel}
+                        accessibilityRole={this.props.accessibilityRole}
+                        onPress={this.props.onPress}
+                        style={[
+                            styles.floatingActionButton,
+                            StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
+                        ]}
+                    >
+                        <AnimatedIcon src={Expensicons.Plus} fill={fill} />
+                    </AnimatedPressable>
+                </Tooltip>
+            </KeyboardAvoidingView>
         );
     }
 }
 
-FAB.propTypes = fabPropTypes;
-export default withLocalize(FAB);
+FloatingActionButton.propTypes = propTypes;
+
+export default withLocalize(FloatingActionButton);

src/components/PDFView/index.native.js

@@ -1,10 +1,9 @@
 import React, {Component} from 'react';
-import {TouchableWithoutFeedback, View} from 'react-native';
+import {TouchableWithoutFeedback, View, KeyboardAvoidingView} from 'react-native';
 import PDF from 'react-native-pdf';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import KeyboardAvoidingView from '../KeyboardAvoidingView';
 import PDFPasswordForm from './PDFPasswordForm';
 import * as pdfViewPropTypes from './pdfViewPropTypes';
 import compose from '../../libs/compose';

src/pages/home/ReportScreen.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import {Platform, View} from 'react-native';
+import {View} from 'react-native';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import {Freeze} from 'react-freeze';
@@ -216,7 +216,7 @@ class ReportScreen extends React.Component {
         const reportID = getReportID(this.props.route);
         const addWorkspaceRoomOrChatPendingAction = lodashGet(this.props.report, 'pendingFields.addWorkspaceRoom') || lodashGet(this.props.report, 'pendingFields.createChat');
         const addWorkspaceRoomOrChatErrors = lodashGet(this.props.report, 'errorFields.addWorkspaceRoom') || lodashGet(this.props.report, 'errorFields.createChat');
-        const screenWrapperStyle = [styles.appContent, {marginTop: this.state.viewportOffsetTop}];
+        const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: this.state.viewportOffsetTop}];
         return (
             <Freeze
                 freeze={this.props.isSmallScreenWidth && this.props.isDrawerOpen}
@@ -231,7 +231,6 @@ class ReportScreen extends React.Component {
             >
                 <ScreenWrapper
                     style={screenWrapperStyle}
-                    keyboardAvoidingViewBehavior={Platform.OS === 'android' ? '' : 'padding'}
                 >
                     <FullPageNotFoundView
                         shouldShow={!this.props.report.reportID}

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
 import SidebarLinks from '../SidebarLinks';
 import PopoverMenu from '../../../../components/PopoverMenu';
-import FAB from '../../../../components/FAB';
+import FloatingActionButton from '../../../../components/FloatingActionButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import Navigation from '../../../../libs/Navigation/Navigation';
 import ROUTES from '../../../../ROUTES';
@@ -117,7 +117,7 @@ class BaseSidebarScreen extends Component {
                                 isDrawerOpen={this.props.isDrawerOpen}
                                 reportIDFromRoute={this.props.reportIDFromRoute}
                             />
-                            <FAB
+                            <FloatingActionButton
                                 accessibilityLabel={this.props.translate('sidebarScreen.fabNewChat')}
                                 accessibilityRole="button"
                                 isActive={this.state.isCreateMenuActive}

src/pages/settings/AddSecondaryLoginPage.js

@@ -90,13 +90,14 @@ class AddSecondaryLoginPage extends Component {
 
     render() {
         return (
-            <ScreenWrapper onTransitionEnd={() => {
-                if (!this.phoneNumberInputRef) {
-                    return;
-                }
+            <ScreenWrapper
+                onTransitionEnd={() => {
+                    if (!this.phoneNumberInputRef) {
+                        return;
+                    }
 
-                this.phoneNumberInputRef.focus();
-            }}
+                    this.phoneNumberInputRef.focus();
+                }}
             >
                 <HeaderWithCloseButton
                     title={this.props.translate(this.formType === CONST.LOGIN_TYPE.PHONE

src/pages/signin/SignInPageLayout/SignInPageContent.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import {ScrollView, View} from 'react-native';
+import {ScrollView, View, KeyboardAvoidingView} from 'react-native';
 import PropTypes from 'prop-types';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import styles from '../../../styles/styles';
-import * as StyleUtils from '../../../styles/StyleUtils';
 import variables from '../../../styles/variables';
 import ExpensifyCashLogo from '../../../components/ExpensifyCashLogo';
 import Text from '../../../components/Text';
@@ -12,9 +11,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import SignInPageForm from '../../../components/SignInPageForm';
 import compose from '../../../libs/compose';
 import scrollViewContentContainerStyles from './signInPageStyles';
-import LoginKeyboardAvoidingView from './LoginKeyboardAvoidingView';
 import withKeyboardState from '../../../components/withKeyboardState';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
     /** The children to show inside the layout */
@@ -58,9 +57,9 @@ const SignInPageContent = props => (
                     props.isSmallScreenWidth ? styles.ph5 : styles.ph4,
                 ]}
                 >
-                    <LoginKeyboardAvoidingView
+                    <KeyboardAvoidingView
                         behavior="position"
-                        contentContainerStyle={[
+                        style={[
                             props.isSmallScreenWidth ? styles.signInPageNarrowContentMargin : {},
                             !props.isMediumScreenWidth || (props.isMediumScreenWidth && props.windowHeight < variables.minHeightToShowGraphics) ? styles.signInPageWideLeftContentMargin : {},
                             styles.mb3,
@@ -87,7 +86,7 @@ const SignInPageContent = props => (
                             </Text>
                         )}
                         {props.children}
-                    </LoginKeyboardAvoidingView>
+                    </KeyboardAvoidingView>
                 </SignInPageForm>
                 <View style={[styles.mb5, styles.alignSelfCenter, styles.ph5]}>
                     <TermsAndLicenses />

src/pages/signin/SignInPageLayout/SignInPageGraphics.js

@@ -0,0 +1,33 @@
+import {Pressable} from 'react-native';
+import React from 'react';
+import _ from 'underscore';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
+import * as Link from '../../../libs/actions/Link';
+import SVGImage from '../../../components/SVGImage';
+
+const backgroundStyle = StyleUtils.getLoginPagePromoStyle();
+
+const SignInPageGraphics = () => (
+    <Pressable
+        style={[
+            styles.flex1,
+            StyleUtils.getBackgroundColorStyle(backgroundStyle.backgroundColor),
+        ]}
+        onPress={() => {
+            Link.openExternalLink(backgroundStyle.redirectUri);
+        }}
+        disabled={_.isEmpty(backgroundStyle.redirectUri)}
+    >
+        <SVGImage
+            width="100%"
+            height="100%"
+            src={backgroundStyle.backgroundImageUri}
+            resizeMode="contain"
+        />
+    </Pressable>
+);
+
+SignInPageGraphics.displayName = 'SignInPageGraphics';
+
+export default SignInPageGraphics;