feat: use resource saving view for scenes. fixes #3

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<Props, State> {
             const isFocused = navigation.state.index === index;
 
             return (
-              <View
+              <ResourceSavingScene
                 key={route.key}
-                pointerEvents={isFocused ? 'auto' : 'none'}
                 style={[
                   StyleSheet.absoluteFill,
                   { opacity: isFocused ? 1 : 0 },
                 ]}
+                isFocused={isFocused}
               >
                 {renderScene({ route })}
-              </View>
+              </ResourceSavingScene>
             );
           })}
         </View>

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<Props> {
 
   _renderPanPager = props => <TabViewPagerPan {...props} />;
 
+  _renderScene = ({ route, focused }) => {
+    const { renderScene, animationEnabled, swipeEnabled } = this.props;
+
+    if (animationEnabled === false && swipeEnabled === false) {
+      return (
+        <ResourceSavingScene isFocused={focused}>
+          {renderScene({ route })}
+        </ResourceSavingScene>
+      );
+    }
+
+    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<Props> {
         navigationState={navigation.state}
         animationEnabled={animationEnabled}
         swipeEnabled={swipeEnabled}
-        renderScene={
-          /* $FlowFixMe */
-          renderScene
-        }
         renderPager={renderPager}
         renderHeader={renderHeader}
         renderFooter={renderFooter}
+        renderScene={
+          /* $FlowFixMe */
+          this._renderScene
+        }
       />
     );
   }

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<Props> {
+  render() {
+    const { isFocused, children, style, ...rest } = this.props;
+
+    return (
+      <View
+        style={[styles.container, style]}
+        collapsable={false}
+        removeClippedSubviews={
+          // On iOS, set removeClippedSubviews to true only when not focused
+          // This is an workaround for a bug where the clipped view never re-appears
+          Platform.OS === 'ios' ? !isFocused : true
+        }
+        pointerEvents={isFocused ? 'auto' : 'none'}
+        {...rest}
+      >
+        <View style={isFocused ? styles.attached : styles.detached}>
+          {children}
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  attached: {
+    flex: 1,
+  },
+  detached: {
+    flex: 1,
+    top: FAR_FAR_AWAY,
+  },
+});