[Navigation Reboot] Swap the DrawerNavigator for the ResponsiveNavigator

src/App.js

@@ -16,6 +16,7 @@ import SafeArea from './components/SafeArea';
 import * as Environment from './libs/Environment/Environment';
 import {WindowDimensionsProvider} from './components/withWindowDimensions';
 import {KeyboardStateProvider} from './components/withKeyboardState';
+import {CurrentReportIdContextProvider} from './components/withCurrentReportId';
 
 // For easier debugging and development, when we are in web we expose Onyx to the window, so you can more easily set data into Onyx
 if (window && Environment.isDevelopment()) {
@@ -43,6 +44,7 @@ const App = () => (
                 HTMLEngineProvider,
                 WindowDimensionsProvider,
                 KeyboardStateProvider,
+                CurrentReportIdContextProvider,
             ]}
         >
             <CustomStatusBar />

src/CONST.js

@@ -98,6 +98,8 @@ const CONST = {
         },
     },
 
+    RIGHT_MODAL_BACKGROUND_OVERLAY_OPACITY: 0.4,
+
     NEW_EXPENSIFY_URL: ACTIVE_EXPENSIFY_URL,
     APP_DOWNLOAD_LINKS: {
         ANDROID: `https://play.google.com/store/apps/details?id=${ANDROID_PACKAGE_NAME}`,

src/NAVIGATORS.js

@@ -0,0 +1,9 @@
+/**
+ * This is a file containing constants for navigators loceted directly in the rootStack in AuthScreen
+ * The ResponsiveStackNavigatur displays stack differently basing on these constants
+ * */
+export default {
+    CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator',
+    RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator',
+    FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',
+};

src/ROUTES.js

@@ -56,7 +56,7 @@ export default {
     NEW_GROUP: 'new/group',
     NEW_CHAT: 'new/chat',
     REPORT,
-    REPORT_WITH_ID: 'r/:reportID',
+    REPORT_WITH_ID: 'r/:reportID?',
     getReportRoute: reportID => `r/${reportID}`,
     SELECT_YEAR: 'select-year',
     getYearSelectionRoute: (minYear, maxYear, currYear, backTo) => `select-year?min=${minYear}&max=${maxYear}&year=${currYear}&backTo=${backTo}`,

src/components/BlockingViews/BlockingView.js

@@ -50,7 +50,7 @@ const BlockingView = props => (
         {props.shouldShowBackHomeLink
             ? (
                 <TextLink
-                    onPress={() => Navigation.dismissModal(true)}
+                    onPress={Navigation.goBack}
                     style={[styles.link, styles.mt2]}
                 >
                     {props.link}

src/components/FlatList/index.android.js

@@ -0,0 +1,85 @@
+import React, {forwardRef} from 'react';
+import {FlatList} from 'react-native';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Same as for FlatList */
+    onScroll: PropTypes.func,
+
+    /** Same as for FlatList */
+    onLayout: PropTypes.func,
+
+    /** Same as for FlatList */
+    // eslint-disable-next-line react/forbid-prop-types
+    maintainVisibleContentPosition: PropTypes.object,
+
+    /** Passed via forwardRef so we can access the FlatList ref */
+    innerRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(FlatList)}),
+    ]).isRequired,
+};
+
+const defaultProps = {
+    /** Same as for FlatList */
+    onScroll: undefined,
+
+    /** Same as for FlatList */
+    onLayout: undefined,
+
+    /** Same as for FlatList */
+    maintainVisibleContentPosition: undefined,
+};
+
+// FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
+// CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
+function CustomFlatList(props) {
+    const contentOffsetRef = React.useRef(null);
+    const isHidden = React.useRef(false);
+    const [ready, setReady] = React.useState(true);
+
+    const handleOnScroll = (event) => {
+        props.onScroll(event);
+
+        // The last onScroll event happens after freezing the FlatList and it's called with offset: 0.
+        // Don't save this value because it's incorrect.
+        if (!isHidden.current) {
+            contentOffsetRef.current = event.nativeEvent.contentOffset;
+        }
+    };
+    const handleOnLayout = (event) => {
+        props.onLayout(event);
+
+        if (event.nativeEvent.layout.height === 0) {
+            // If the layout height is equal to 0, we can assume that this flatList is frozen.
+            isHidden.current = true;
+
+            // The maintainVisibleContentPosition prop causes glitches with animations and scrollToOffset.
+            // Use ready state to decide if this prop should be undefined to avoid glitching.
+            setReady(false);
+        } else {
+            isHidden.current = false;
+            if (props.innerRef.current && contentOffsetRef.current) {
+                props.innerRef.current.scrollToOffset({offset: contentOffsetRef.current.y, animated: false});
+                setReady(true);
+            }
+        }
+    };
+
+    return (
+        <FlatList
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={props.innerRef}
+            onScroll={handleOnScroll}
+            onLayout={handleOnLayout}
+            maintainVisibleContentPosition={ready ? props.maintainVisibleContentPosition : undefined}
+        />
+    );
+}
+
+CustomFlatList.propTypes = propTypes;
+CustomFlatList.defaultProps = defaultProps;
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+export default forwardRef((props, ref) => <CustomFlatList {...props} innerRef={ref} />);

src/components/FlatList/index.js

@@ -0,0 +1,3 @@
+import {FlatList} from 'react-native';
+
+export default FlatList;

src/components/InvertedFlatList/BaseInvertedFlatList.js

@@ -2,8 +2,9 @@
 import _ from 'underscore';
 import React, {forwardRef, Component} from 'react';
 import PropTypes from 'prop-types';
-import {FlatList, View} from 'react-native';
+import {View} from 'react-native';
 import * as CollectionUtils from '../../libs/CollectionUtils';
+import FlatList from '../FlatList';
 
 const propTypes = {
     /** Same as FlatList can be any array of anything */

src/components/LHNOptionsList/LHNOptionsList.js

@@ -24,9 +24,6 @@ const propTypes = {
     /** Toggle between compact and default view of the option */
     optionMode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)).isRequired,
 
-    /** Callback to execute when the SectionList lays out */
-    onLayout: PropTypes.func.isRequired,
-
     /** Whether to allow option focus or not */
     shouldDisableFocusOptions: PropTypes.bool,
 };
@@ -99,7 +96,6 @@ class LHNOptionsList extends Component {
                     initialNumToRender={5}
                     maxToRenderPerBatch={5}
                     windowSize={5}
-                    onLayout={this.props.onLayout}
                 />
             </View>
         );

src/components/withCurrentReportId.js

@@ -0,0 +1,69 @@
+import React, {createContext, forwardRef} from 'react';
+import PropTypes from 'prop-types';
+
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+import Navigation from '../libs/Navigation/Navigation';
+
+const CurrentReportIdContext = createContext(null);
+
+const withCurrentReportIdPropTypes = {
+    /** Actual content wrapped by this component */
+    children: PropTypes.node.isRequired,
+};
+
+class CurrentReportIdContextProvider extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            currentReportId: '',
+        };
+    }
+
+    /**
+     * The context this component exposes to child components
+     * @returns {object} currentReportId to share between central pane and drawer
+     */
+    getContextValue() {
+        return {
+            updateCurrentReportId: this.updateCurrentReportId.bind(this),
+            currentReportId: this.state.currentReportId,
+        };
+    }
+
+    /**
+     * @param {Object} state
+     * @returns {String}
+     */
+    updateCurrentReportId(state) {
+        return this.setState({currentReportId: Navigation.getTopmostReportId(state)});
+    }
+
+    render() {
+        return (
+            <CurrentReportIdContext.Provider value={this.getContextValue()}>
+                {this.props.children}
+            </CurrentReportIdContext.Provider>
+        );
+    }
+}
+
+CurrentReportIdContextProvider.propTypes = withCurrentReportIdPropTypes;
+
+export default function withCurrentReportId(WrappedComponent) {
+    const WithCurrentReportId = forwardRef((props, ref) => (
+        <CurrentReportIdContext.Consumer>
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            {translateUtils => <WrappedComponent {...translateUtils} {...props} ref={ref} />}
+        </CurrentReportIdContext.Consumer>
+    ));
+
+    WithCurrentReportId.displayName = `withCurrentReportId(${getComponentDisplayName(WrappedComponent)})`;
+
+    return WithCurrentReportId;
+}
+
+export {
+    withCurrentReportIdPropTypes,
+    CurrentReportIdContextProvider,
+};