Block activation of primary buttons on background screens

src/components/Button.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {withNavigationFocus} from '@react-navigation/compat';
 import {Pressable, ActivityIndicator, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
@@ -10,6 +11,8 @@ import Icon from './Icon';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import HapticFeedback from '../libs/HapticFeedback';
+import withNavigationFallback from './withNavigationFallback';
+import compose from '../libs/compose';
 import * as Expensicons from './Icon/Expensicons';
 import colors from '../styles/colors';
 
@@ -277,4 +280,7 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default Button;
+export default compose(
+    withNavigationFallback,
+    withNavigationFocus,
+)(Button);

src/components/withNavigationFallback.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {NavigationContext} from '@react-navigation/core';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+export default function (WrappedComponent) {
+    class WithNavigationFallback extends Component {
+        render() {
+            if (!this.context) {
+                return (
+                    <NavigationContext.Provider
+                        value={{
+                            isFocused: () => true,
+                            addListener: () => () => {},
+                            removeListener: () => () => {},
+                        }}
+                    >
+                        <WrappedComponent
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...this.props}
+                            ref={this.props.forwardedRef}
+                        />
+                    </NavigationContext.Provider>
+                );
+            }
+
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            return <WrappedComponent {...this.props} ref={this.props.forwardedRef} />;
+        }
+    }
+    WithNavigationFallback.contextType = NavigationContext;
+    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
+    WithNavigationFallback.propTypes = {
+        forwardedRef: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+        ]),
+    };
+    WithNavigationFallback.defaultProps = {
+        forwardedRef: undefined,
+    };
+    return React.forwardRef((props, ref) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <WithNavigationFallback {...props} forwardedRef={ref} />
+    ));
+}

src/pages/RequestCallPage.js

@@ -314,6 +314,7 @@ class RequestCallPage extends Component {
                         )}
                         <Button
                             success
+                            pressOnEnter
                             onPress={this.onSubmit}
                             style={[styles.w100]}
                             text={this.props.translate('requestCallPage.callMe')}

src/stories/Button.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import Button from '../components/Button';
 
 /**
@@ -18,6 +18,23 @@ const Template = args => <Button {...args} />;
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Default = Template.bind({});
 const Loading = Template.bind({});
+const PressOnEnter = (props) => {
+    const [text, setText] = useState('');
+    const onPress = useCallback(() => {
+        setText('Button Pressed!');
+        setTimeout(() => setText(''), 500);
+    });
+    return (
+        <Button
+        // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        // eslint-disable-next-line react/prop-types
+            text={text || props.text}
+            onPress={onPress}
+        />
+    );
+};
+
 Default.args = {
     text: 'Save & Continue',
     success: true,
@@ -28,8 +45,15 @@ Loading.args = {
     success: true,
 };
 
+PressOnEnter.args = {
+    text: 'Press Enter',
+    pressOnEnter: true,
+    success: true,
+};
+
 export default story;
 export {
     Default,
     Loading,
+    PressOnEnter,
 };