diff --git a/package.json b/package.json index 1dd84d6d..94adcd7c 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,7 @@ "url": "git@github.com:react-navigation/react-navigation.git", "type": "git" }, - "author": - "Adam Miskiewicz , Eric Vicenti ", + "author": "Adam Miskiewicz , Eric Vicenti ", "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" @@ -63,13 +65,23 @@ "notify": true, "preset": "react-native", "testRegex": "./src/.*\\-test\\.js$", - "setupFiles": ["/jest-setup.js"], + "setupFiles": [ + "/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": [ diff --git a/src/views/ResourceSavingSceneView.js b/src/views/ResourceSavingSceneView.js index a1b5bb30..d9f0e7c8 100644 --- a/src/views/ResourceSavingSceneView.js +++ b/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 } > { 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); diff --git a/src/views/TabView/TabView.js b/src/views/TabView/TabView.js index 4b730a6a..4ee88f62 100644 --- a/src/views/TabView/TabView.js +++ b/src/views/TabView/TabView.js @@ -21,7 +21,7 @@ class TabView extends React.PureComponent { }; _renderScene = ({ route }) => { - const { screenProps, descriptors } = this.props; + const { screenProps, navigation, descriptors } = this.props; const { lazy, removeClippedSubviews, @@ -29,16 +29,20 @@ class TabView extends React.PureComponent { 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 ( ); diff --git a/yarn.lock b/yarn.lock index 20718cc9..538f6186 100644 --- a/yarn.lock +++ b/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"