Use react-native-screens when available (#54)

This change adds support for react-native-screens. Screens package makes it possible to use native primitives to render tabs container and its scenes such that they get properly mounted/unmounted when not visible.

The support has only been added to `createBottomTabNavigator` as the material one renders its own container that's a part of a different package (react-native-tab-view).

packages/tabs/package.json

@@ -41,6 +41,7 @@
     "hoist-non-react-statics": "^2.5.0",
     "prop-types": "^15.6.1",
     "react-lifecycles-compat": "^3.0.4",
+    "react-native-screens": "^1.0.0-alpha.11",
     "react-native-tab-view": "^1.0.0"
   },
   "devDependencies": {

packages/tabs/src/navigators/createBottomTabNavigator.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
+import { ScreenContainer } from 'react-native-screens';
 import { polyfill } from 'react-lifecycles-compat';
 import createTabNavigator, {
   type InjectedProps,
@@ -94,7 +95,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
 
     return (
       <View style={styles.container}>
-        <View style={styles.pages}>
+        <ScreenContainer style={styles.pages}>
           {routes.map((route, index) => {
             if (lazy && !loaded.includes(index)) {
               // Don't render a screen if we've never navigated to it
@@ -116,7 +117,7 @@ class TabNavigationView extends React.PureComponent<Props, State> {
               </ResourceSavingScene>
             );
           })}
-        </View>
+        </ScreenContainer>
         {this._renderTabBar()}
       </View>
     );

packages/tabs/src/views/ResourceSavingScene.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
+import { Screen, screensEnabled } from 'react-native-screens';
 
 type Props = {
   isVisible: boolean,
@@ -13,6 +14,10 @@ const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view o
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
+    if (screensEnabled()) {
+      const { isVisible, ...rest } = this.props;
+      return <Screen active={isVisible ? 1 : 0} {...rest} />;
+    }
     const { isVisible, children, style, ...rest } = this.props;
 
     return (

packages/tabs/yarn.lock

@@ -4884,6 +4884,10 @@ react-native-safe-area-view@^0.8.0:
   dependencies:
     hoist-non-react-statics "^2.3.1"
 
+react-native-screens@^1.0.0-alpha.11:
+  version "1.0.0-alpha.11"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.11.tgz#4f4faeb5607b1e08cc70d76a04c2f8da0b241200"
+
 react-native-tab-view@^0.0.77:
   version "0.0.77"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4"