diff --git a/packages/tabs/src/navigators/createBottomTabNavigator.js b/packages/tabs/src/navigators/createBottomTabNavigator.js index 5d46b44c..9f2c952b 100644 --- a/packages/tabs/src/navigators/createBottomTabNavigator.js +++ b/packages/tabs/src/navigators/createBottomTabNavigator.js @@ -6,6 +6,7 @@ import createTabNavigator, { type InjectedProps, } from '../utils/createTabNavigator'; import BottomTabBar, { type TabBarOptions } from '../views/BottomTabBar'; +import ResourceSavingScene from '../views/ResourceSavingScene'; type Props = InjectedProps & { tabBarComponent?: React.ComponentType<*>, @@ -104,16 +105,16 @@ class TabNavigationView extends React.PureComponent { const isFocused = navigation.state.index === index; return ( - {renderScene({ route })} - + ); })} diff --git a/packages/tabs/src/navigators/createMaterialTopTabNavigator.js b/packages/tabs/src/navigators/createMaterialTopTabNavigator.js index 809cc739..765df706 100644 --- a/packages/tabs/src/navigators/createMaterialTopTabNavigator.js +++ b/packages/tabs/src/navigators/createMaterialTopTabNavigator.js @@ -9,6 +9,7 @@ import createTabNavigator, { import MaterialTopTabBar, { type TabBarOptions, } from '../views/MaterialTopTabBar'; +import ResourceSavingScene from '../views/ResourceSavingScene'; type Props = InjectedProps & { animationEnabled?: boolean, @@ -112,11 +113,26 @@ class TabView extends React.PureComponent { _renderPanPager = props => ; + _renderScene = ({ route, focused }) => { + const { renderScene, animationEnabled, swipeEnabled } = this.props; + + if (animationEnabled === false && swipeEnabled === false) { + return ( + + {renderScene({ route })} + + ); + } + + return renderScene({ route }); + }; + render() { const { navigation, tabBarPosition, animationEnabled, + // eslint-disable-next-line no-unused-vars renderScene, ...rest } = this.props; @@ -156,13 +172,13 @@ class TabView extends React.PureComponent { navigationState={navigation.state} animationEnabled={animationEnabled} swipeEnabled={swipeEnabled} - renderScene={ - /* $FlowFixMe */ - renderScene - } renderPager={renderPager} renderHeader={renderHeader} renderFooter={renderFooter} + renderScene={ + /* $FlowFixMe */ + this._renderScene + } /> ); } diff --git a/packages/tabs/src/views/ResourceSavingScene.js b/packages/tabs/src/views/ResourceSavingScene.js new file mode 100644 index 00000000..8c9ea999 --- /dev/null +++ b/packages/tabs/src/views/ResourceSavingScene.js @@ -0,0 +1,50 @@ +/* @flow */ + +import * as React from 'react'; +import { Platform, StyleSheet, View } from 'react-native'; + +type Props = { + isFocused: boolean, + children: React.Node, + style?: any, +}; + +const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container + +export default class ResourceSavingScene extends React.Component { + render() { + const { isFocused, children, style, ...rest } = this.props; + + return ( + + + {children} + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + overflow: 'hidden', + }, + attached: { + flex: 1, + }, + detached: { + flex: 1, + top: FAR_FAR_AWAY, + }, +});