perf: don't rerender whole screen just because a modal opened/closed

src/components/ScreenWrapper/BaseScreenWrapper.js

@@ -2,7 +2,6 @@ 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';
@@ -18,6 +17,7 @@ import withWindowDimensions from '../withWindowDimensions';
 import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../OnyxProvider';
 import {propTypes, defaultProps} from './propTypes';
+import onyxSubscribe from '../../libs/onyxSubscribe';
 
 class BaseScreenWrapper extends React.Component {
     constructor(props) {
@@ -29,9 +29,18 @@ class BaseScreenWrapper extends React.Component {
     }
 
     componentDidMount() {
+        let willAlertModalBecomeVisible = false;
+
+        this.unsubscribeOnyx = onyxSubscribe({
+            key: ONYXKEYS.MODAL,
+            callback: (object) => {
+                willAlertModalBecomeVisible = object.willAlertModalBecomeVisible;
+            },
+        });
+
         const shortcutConfig = CONST.KEYBOARD_SHORTCUTS.ESCAPE;
         this.unsubscribeEscapeKey = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, () => {
-            if (this.props.modal.willAlertModalBecomeVisible) {
+            if (willAlertModalBecomeVisible) {
                 return;
             }
 
@@ -51,6 +60,9 @@ class BaseScreenWrapper extends React.Component {
         if (this.unsubscribeTransitionEnd) {
             this.unsubscribeTransitionEnd();
         }
+        if (this.unsubscribeOnyx) {
+            this.unsubscribeOnyx();
+        }
     }
 
     render() {
@@ -106,10 +118,5 @@ BaseScreenWrapper.defaultProps = defaultProps;
 export default compose(
     withNavigation,
     withWindowDimensions,
-    withOnyx({
-        modal: {
-            key: ONYXKEYS.MODAL,
-        },
-    }),
     withNetwork(),
 )(BaseScreenWrapper);

src/libs/onyxSubscribe.js

@@ -0,0 +1,12 @@
+import Onyx from 'react-native-onyx';
+
+/**
+ * Connect to onyx data. Same params as Onyx.connect(), but returns a function to unsubscribe.
+ *
+ * @param {Object} mapping Same as for Onyx.connect()
+ * @return {function(): void} Unsubscribe callback
+ */
+export default (mapping) => {
+    const connectionId = Onyx.connect(mapping);
+    return () => Onyx.disconnect(connectionId);
+};