fix: disable react-native-screens on iOS

Author: satya164

example/App.js

@@ -32,7 +32,7 @@ import {
 // Comment the following two lines to stop using react-native-screens
 import { useScreens } from 'react-native-screens';
 
-useScreens(false);
+useScreens(true);
 
 // Change `false` to `true` to force RTL. Requires closing and re-opening
 // your app after you first load it with this option enabled.

src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap

@@ -11,8 +11,7 @@ Array [
       }
     }
   >
-    <RNSScreen
-      active={1}
+    <View
       pointerEvents="box-none"
       style={
         Object {
@@ -164,8 +163,7 @@ Array [
                     }
                   }
                 >
-                  <RNSScreen
-                    active={1}
+                  <View
                     pointerEvents="box-none"
                     style={
                       Object {
@@ -312,7 +310,7 @@ Array [
                         </PanGestureHandler>
                       </View>
                     </View>
-                  </RNSScreen>
+                  </View>
                 </View>
                 <View
                   pointerEvents="box-none"
@@ -450,7 +448,7 @@ Array [
           </PanGestureHandler>
         </View>
       </View>
-    </RNSScreen>
+    </View>
   </View>,
   <View
     pointerEvents="box-none"

src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap

@@ -11,8 +11,7 @@ Array [
       }
     }
   >
-    <RNSScreen
-      active={1}
+    <View
       pointerEvents="box-none"
       style={
         Object {
@@ -159,7 +158,7 @@ Array [
           </PanGestureHandler>
         </View>
       </View>
-    </RNSScreen>
+    </View>
   </View>,
   <View
     pointerEvents="box-none"
@@ -329,8 +328,7 @@ Array [
       }
     }
   >
-    <RNSScreen
-      active={1}
+    <View
       pointerEvents="box-none"
       style={
         Object {
@@ -477,7 +475,7 @@ Array [
           </PanGestureHandler>
         </View>
       </View>
-    </RNSScreen>
+    </View>
   </View>,
   <View
     pointerEvents="box-none"

src/views/Stack/Stack.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  View,
   StyleSheet,
   LayoutChangeEvent,
   Dimensions,
@@ -71,6 +72,22 @@ const AnimatedScreen = Animated.createAnimatedComponent(
   ViewProps & { active: number | Animated.Node<number> }
 >;
 
+const MaybeScreenContainer = Platform.OS === 'ios' ? View : ScreenContainer;
+
+const MaybeScreen = ({
+  active,
+  ...rest
+}: ViewProps & {
+  active: number | Animated.Node<number>;
+  children: React.ReactNode;
+}) => {
+  if (Platform.OS === 'ios') {
+    return <View {...rest} />;
+  }
+
+  return <AnimatedScreen active={active} {...rest} />;
+};
+
 const { cond, eq } = Animated;
 
 const ANIMATED_ONE = new Animated.Value(1);
@@ -220,7 +237,10 @@ export default class Stack extends React.Component<Props, State> {
 
     return (
       <React.Fragment>
-        <ScreenContainer style={styles.container} onLayout={this.handleLayout}>
+        <MaybeScreenContainer
+          style={styles.container}
+          onLayout={this.handleLayout}
+        >
           {routes.map((route, index, self) => {
             const focused = focusedRoute.key === route.key;
             const current = progress[route.key];
@@ -255,7 +275,7 @@ export default class Stack extends React.Component<Props, State> {
             } = descriptor.options;
 
             return (
-              <AnimatedScreen
+              <MaybeScreen
                 key={route.key}
                 style={StyleSheet.absoluteFill}
                 active={isScreenActive}
@@ -296,10 +316,10 @@ export default class Stack extends React.Component<Props, State> {
                   cardStyleInterpolator={cardStyleInterpolator}
                   headerStyleInterpolator={headerStyleInterpolator}
                 />
-              </AnimatedScreen>
+              </MaybeScreen>
             );
           })}
-        </ScreenContainer>
+        </MaybeScreenContainer>
         {headerMode === 'float'
           ? renderHeader({
               mode: 'float',