diff --git a/packages/react-navigation/examples/NavigationPlayground/js/SimpleTabs.js b/packages/react-navigation/examples/NavigationPlayground/js/SimpleTabs.js index a46fe2a8..48d9d0e8 100644 --- a/packages/react-navigation/examples/NavigationPlayground/js/SimpleTabs.js +++ b/packages/react-navigation/examples/NavigationPlayground/js/SimpleTabs.js @@ -163,6 +163,8 @@ const SimpleTabs = TabNavigator( }, }, { + lazy: true, + removeClippedSubviews: true, tabBarOptions: { activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff', }, diff --git a/packages/react-navigation/flow/react-navigation.js b/packages/react-navigation/flow/react-navigation.js index 7a43facf..98c15165 100644 --- a/packages/react-navigation/flow/react-navigation.js +++ b/packages/react-navigation/flow/react-navigation.js @@ -833,6 +833,8 @@ declare module 'react-navigation' { declare type _TabNavigatorConfig = {| ...NavigationTabRouterConfig, ..._TabViewConfig, + lazy?: boolean, + removeClippedSubviews?: boolean, containerOptions?: void, |}; declare export function TabNavigator( diff --git a/packages/react-navigation/src/navigators/TabNavigator.js b/packages/react-navigation/src/navigators/TabNavigator.js index f8a3ede2..623a806a 100644 --- a/packages/react-navigation/src/navigators/TabNavigator.js +++ b/packages/react-navigation/src/navigators/TabNavigator.js @@ -19,6 +19,8 @@ const TabNavigator = (routeConfigs, config = {}) => { tabBarComponent, tabBarPosition, tabBarOptions, + lazy, + removeClippedSubviews, swipeEnabled, animationEnabled, configureTransition, @@ -31,6 +33,8 @@ const TabNavigator = (routeConfigs, config = {}) => { const navigator = createNavigator(router, routeConfigs, config)(props => ( + > + + + + {awake ? : null} + + + ); + } + + _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({ + container: { + flex: 1, + overflow: 'hidden', + }, + innerAttached: { + flex: 1, + }, + innerDetached: { + flex: 1, + top: FAR_FAR_AWAY, + }, +}); diff --git a/packages/react-navigation/src/views/TabView/TabView.js b/packages/react-navigation/src/views/TabView/TabView.js index f5dd5a84..41818c03 100644 --- a/packages/react-navigation/src/views/TabView/TabView.js +++ b/packages/react-navigation/src/views/TabView/TabView.js @@ -3,11 +3,13 @@ import { View, StyleSheet, Platform } from 'react-native'; import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view'; import SafeAreaView from 'react-native-safe-area-view'; -import SceneView from '../SceneView'; +import ResourceSavingSceneView from '../ResourceSavingSceneView'; import withCachedChildNavigation from '../../withCachedChildNavigation'; class TabView extends React.PureComponent { static defaultProps = { + lazy: true, + removedClippedSubviews: true, // fix for https://github.com/react-native-community/react-native-tab-view/issues/312 initialLayout: Platform.select({ android: { width: 1, height: 0 }, @@ -26,13 +28,14 @@ class TabView extends React.PureComponent { route.routeName ); return ( - - - + ); }; @@ -189,9 +192,4 @@ const styles = StyleSheet.create({ container: { flex: 1, }, - - page: { - flex: 1, - overflow: 'hidden', - }, }); diff --git a/packages/react-navigation/src/views/__tests__/__snapshots__/TabView-test.js.snap b/packages/react-navigation/src/views/__tests__/__snapshots__/TabView-test.js.snap index a5527dff..9c5f2000 100644 --- a/packages/react-navigation/src/views/__tests__/__snapshots__/TabView-test.js.snap +++ b/packages/react-navigation/src/views/__tests__/__snapshots__/TabView-test.js.snap @@ -225,6 +225,8 @@ exports[`TabBarBottom renders successfully 1`] = ` testID={undefined} > + > + +