Use react-native-screens when available (facebook#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/bottom-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/bottom-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 (