Swap addListener out for isFocused prop on ResourceSavingSceneView (react-navigation#3700)

Author: brentvatne

package.json

@@ -7,8 +7,7 @@
     "url": "git@github.com:react-navigation/react-navigation.git",
     "type": "git"
   },
-  "author":
-    "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>",
+  "author": "Adam Miskiewicz <adam@sk3vy.com>, Eric Vicenti <ericvicenti@gmail.com>",
   "license": "BSD-2-Clause",
   "scripts": {
     "start": "npm run ios",
@@ -22,7 +21,9 @@
     "format": "eslint --fix .",
     "precommit": "lint-staged"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
@@ -32,6 +33,7 @@
     "hoist-non-react-statics": "^2.2.0",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.5.10",
+    "react-lifecycles-compat": "^1.0.2",
     "react-native-drawer-layout-polyfill": "^1.3.2",
     "react-native-safe-area-view": "^0.7.0",
     "react-native-tab-view": "^0.0.74"
@@ -105,13 +107,23 @@
     "notify": true,
     "preset": "react-native",
     "testRegex": "./src/.*\\-test\\.js$",
-    "setupFiles": ["<rootDir>/jest-setup.js"],
+    "setupFiles": [
+      "<rootDir>/jest-setup.js"
+    ],
     "coverageDirectory": "./coverage/",
     "collectCoverage": true,
-    "coverageReporters": ["lcov"],
-    "collectCoverageFrom": ["src/**/*.js"],
-    "coveragePathIgnorePatterns": ["jest-setup.js"],
-    "modulePathIgnorePatterns": ["examples"]
+    "coverageReporters": [
+      "lcov"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ],
+    "coveragePathIgnorePatterns": [
+      "jest-setup.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "examples"
+    ]
   },
   "lint-staged": {
     "*.js": [

src/views/ResourceSavingSceneView.js

@@ -1,40 +1,33 @@
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
+import withLifecyclePolyfill from 'react-lifecycles-compat';
 
 import SceneView from './SceneView';
 
 const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
 
-export default class ResourceSavingSceneView extends React.PureComponent {
+class ResourceSavingSceneView extends React.PureComponent {
   constructor(props) {
     super();
 
-    const key = props.childNavigation.state.key;
-    const focusedIndex = props.navigation.state.index;
-    const focusedKey = props.navigation.state.routes[focusedIndex].key;
-    const isFocused = key === focusedKey;
-
     this.state = {
-      awake: props.lazy ? isFocused : true,
-      visible: isFocused,
+      awake: props.lazy ? props.isFocused : true,
     };
   }
 
-  componentWillMount() {
-    this._actionListener = this.props.navigation.addListener(
-      'action',
-      this._onAction
-    );
-  }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isFocused && !prevState.awake) {
+      return { awake: true };
+    }
 
-  componentWillUnmount() {
-    this._actionListener.remove();
+    return null;
   }
 
   render() {
-    const { awake, visible } = this.state;
+    const { awake } = this.state;
     const {
+      isFocused,
       childNavigation,
       navigation,
       removeClippedSubviews,
@@ -49,12 +42,12 @@ export default class ResourceSavingSceneView extends React.PureComponent {
         removeClippedSubviews={
           Platform.OS === 'android'
             ? removeClippedSubviews
-            : !visible && removeClippedSubviews
+            : !isFocused && removeClippedSubviews
         }
       >
         <View
           style={
-            this._mustAlwaysBeVisible() || visible
+            this._mustAlwaysBeVisible() || isFocused
               ? styles.innerAttached
               : styles.innerDetached
           }
@@ -68,33 +61,6 @@ export default class ResourceSavingSceneView extends React.PureComponent {
   _mustAlwaysBeVisible = () => {
     return this.props.animationEnabled || this.props.swipeEnabled;
   };
-
-  _onAction = payload => {
-    // We do not care about transition complete events, they won't actually change the state
-    if (
-      payload.action.type == 'Navigation/COMPLETE_TRANSITION' ||
-      !payload.state
-    ) {
-      return;
-    }
-
-    const { routes, index } = payload.state;
-    const key = this.props.childNavigation.state.key;
-
-    if (routes[index].key === key) {
-      if (!this.state.visible) {
-        let nextState = { visible: true };
-        if (!this.state.awake) {
-          nextState.awake = true;
-        }
-        this.setState(nextState);
-      }
-    } else {
-      if (this.state.visible) {
-        this.setState({ visible: false });
-      }
-    }
-  };
 }
 
 const styles = StyleSheet.create({
@@ -110,3 +76,5 @@ const styles = StyleSheet.create({
     top: FAR_FAR_AWAY,
   },
 });
+
+export default withLifecyclePolyfill(ResourceSavingSceneView);

src/views/TabView/TabView.js

@@ -21,24 +21,28 @@ class TabView extends React.PureComponent {
   };
 
   _renderScene = ({ route }) => {
-    const { screenProps, descriptors } = this.props;
+    const { screenProps, navigation, descriptors } = this.props;
     const {
       lazy,
       removeClippedSubviews,
       animationEnabled,
       swipeEnabled,
     } = this.props.navigationConfig;
     const descriptor = descriptors[route.key];
+    const focusedIndex = navigation.state.index;
+    const focusedKey = navigation.state.routes[focusedIndex].key;
+    const key = route.key;
     const TabComponent = descriptor.getComponent();
     return (
       <ResourceSavingSceneView
         lazy={lazy}
+        isFocused={focusedKey === key}
         removeClippedSubViews={removeClippedSubviews}
         animationEnabled={animationEnabled}
         swipeEnabled={swipeEnabled}
         screenProps={screenProps}
         component={TabComponent}
-        navigation={this.props.navigation}
+        navigation={navigation}
         childNavigation={descriptor.navigation}
       />
     );

yarn.lock

@@ -4424,6 +4424,10 @@ react-devtools-core@3.0.0:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
+react-lifecycles-compat@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-1.0.2.tgz#551d8b1d156346e5fcf30ffac9b32ce3f78b8850"
+
 react-native-dismiss-keyboard@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"