BaseScreenWrapper.js

import {KeyboardAvoidingView, View} from 'react-native';
import React from 'react';
import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
import _ from 'underscore';
import {withOnyx} from 'react-native-onyx';
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 KeyboardShortcutsModal from '../KeyboardShortcutsModal';
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 BaseScreenWrapper 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();
        });
    }

    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
                                }
                                <KeyboardShortcutsModal />
                                {this.props.isSmallScreenWidth && (
                                    <OfflineIndicator />
                                )}
                            </KeyboardAvoidingView>
                        </View>
                    );
                }}
            </SafeAreaInsetsContext.Consumer>
        );
    }
}

BaseScreenWrapper.propTypes = propTypes;
BaseScreenWrapper.defaultProps = defaultProps;

export default compose(
    withNavigation,
    withWindowDimensions,
    withOnyx({
        modal: {
            key: ONYXKEYS.MODAL,
        },
    }),
    withNetwork(),
)(BaseScreenWrapper);