Fix for unsupported platforms (#22)

Fixes #13 for real
Fixes react-navigation/react-navigation#5004

Use different `index.js` files for supported and unsupported platforms.

Tested on iOS and on an existing web project that uses react-navigation.

---

!['react-native' does not contain an export named 'requireNativeComponent'.](https://user-images.githubusercontent.com/619186/46323012-8164e300-c5c2-11e8-964e-b6f233776dab.png)

Necolas explained here that this import should not be on any file that runs on web: necolas/react-native-web#507 (comment)

src/screens.android.js

@@ -0,0 +1 @@
+export * from './screens.shared';

src/screens.ios.js

@@ -0,0 +1 @@
+export * from './screens.shared';

src/screens.js

@@ -1,84 +1,15 @@
-import React from 'react';
-import {
-  Animated,
-  requireNativeComponent,
-  View,
-  UIManager,
-  StyleSheet,
-  Platform,
-} from 'react-native';
-
-let USE_SCREENS = false;
+import { Animated, View } from 'react-native';
 
 export function useScreens(shouldUseScreens = true) {
-  USE_SCREENS = shouldUseScreens;
-  if (USE_SCREENS && !UIManager['RNSScreen']) {
-    console.error(
-      `Screen native module hasn't been linked. Please check the react-native-screens README for more details`
-    );
+  if (shouldUseScreens) {
+    console.warn('react-native-screens is not support on this platform.');
   }
 }
 
 export function screensEnabled() {
-  return USE_SCREENS;
+  return false;
 }
 
-const isPlatformSupported = ['android', 'ios'].includes(Platform.OS);
-
-const NativeScreen = isPlatformSupported ? Animated.createAnimatedComponent(
-  requireNativeComponent('RNSScreen', null)
-) : null;
-
-const NativeScreenContainer = isPlatformSupported ? requireNativeComponent(
-  'RNSScreenContainer',
-  null
-) : null;
-
-export class Screen extends React.Component {
-  setNativeProps(props) {
-    this._ref.setNativeProps(props);
-  }
-  setRef = ref => {
-    this._ref = ref;
-    this.props.onComponentRef && this.props.onComponentRef(ref);
-  };
-  render() {
-    if (!USE_SCREENS) {
-      // Filter out active prop in this case because it is unused and
-      // can cause problems depending on react-native version:
-      // https://github.com/react-navigation/react-navigation/issues/4886
-
-      /* eslint-disable no-unused-vars */
-      const { active, onComponentRef, ...props } = this.props;
+export const Screen = Animated.View;
 
-      return <Animated.View {...props} ref={this.setRef} />;
-    } else {
-      const { style, children, ...rest } = this.props;
-      return (
-        <NativeScreen
-          {...rest}
-          ref={this.setRef}
-          style={StyleSheet.absoluteFill}>
-          {/*
-            We need to wrap children in additional Animated.View because
-            of a bug in native driver preventing from both `active` and `styles`
-            props begin animated in `NativeScreen` component. Once
-            react-native/pull/20658 is merged we can export native screen directly
-            and avoid wrapping with `Animated.View`.
-          */}
-          <Animated.View style={style}>{children}</Animated.View>
-        </NativeScreen>
-      );
-    }
-  }
-}
-
-export class ScreenContainer extends React.Component {
-  render() {
-    if (!USE_SCREENS) {
-      return <View {...this.props} />;
-    } else {
-      return <NativeScreenContainer {...this.props} />;
-    }
-  }
-}
+export const ScreenContainer = View;

src/screens.shared.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {
+  Animated,
+  requireNativeComponent,
+  View,
+  UIManager,
+  StyleSheet,
+} from 'react-native';
+
+let USE_SCREENS = false;
+
+export function useScreens(shouldUseScreens = true) {
+  USE_SCREENS = shouldUseScreens;
+  if (USE_SCREENS && !UIManager['RNSScreen']) {
+    console.error(
+      `Screen native module hasn't been linked. Please check the react-native-screens README for more details`
+    );
+  }
+}
+
+export function screensEnabled() {
+  return USE_SCREENS;
+}
+
+const NativeScreen = Animated.createAnimatedComponent(
+  requireNativeComponent('RNSScreen', null)
+);
+
+const NativeScreenContainer = requireNativeComponent(
+  'RNSScreenContainer',
+  null
+);
+
+export class Screen extends React.Component {
+  setNativeProps(props) {
+    this._ref.setNativeProps(props);
+  }
+  setRef = ref => {
+    this._ref = ref;
+    this.props.onComponentRef && this.props.onComponentRef(ref);
+  };
+  render() {
+    if (!USE_SCREENS) {
+      // Filter out active prop in this case because it is unused and
+      // can cause problems depending on react-native version:
+      // https://github.com/react-navigation/react-navigation/issues/4886
+
+      /* eslint-disable no-unused-vars */
+      const { active, onComponentRef, ...props } = this.props;
+
+      return <Animated.View {...props} ref={this.setRef} />;
+    } else {
+      const { style, children, ...rest } = this.props;
+      return (
+        <NativeScreen
+          {...rest}
+          ref={this.setRef}
+          style={StyleSheet.absoluteFill}>
+          {/*
+            We need to wrap children in additional Animated.View because
+            of a bug in native driver preventing from both `active` and `styles`
+            props begin animated in `NativeScreen` component. Once
+            react-native/pull/20658 is merged we can export native screen directly
+            and avoid wrapping with `Animated.View`.
+          */}
+          <Animated.View style={style}>{children}</Animated.View>
+        </NativeScreen>
+      );
+    }
+  }
+}
+
+export class ScreenContainer extends React.Component {
+  render() {
+    if (!USE_SCREENS) {
+      return <View {...this.props} />;
+    } else {
+      return <NativeScreenContainer {...this.props} />;
+    }
+  }
+}