Remove incorrect use of react-native-screens

Author: satya164

src/App.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { View, Text, Button, StyleSheet } from 'react-native';
-import { useScreens } from 'react-native-screens';
 import Stack, { SceneProps, Route } from './components/Stack';
 import Card from './components/Card';
 import { SlideFromRightIOS } from './TransitionConfigs/TransitionPresets';
@@ -27,7 +26,6 @@ export default class App extends React.Component<{}, State> {
     return (
       <Card
         {...rest}
-        key={route.key}
         closing={this.state.closing.includes(route.key)}
         onClose={() =>
           this.setState(state => ({
@@ -73,8 +71,6 @@ export default class App extends React.Component<{}, State> {
   }
 }
 
-useScreens(true);
-
 const styles = StyleSheet.create({
   item: {
     margin: 8,

src/components/Card.tsx

@@ -5,7 +5,6 @@ import {
   PanGestureHandler,
   State as GestureState,
 } from 'react-native-gesture-handler';
-import { Screen } from 'react-native-screens';
 import {
   InterpolationProps,
   InterpolatedStyle,
@@ -15,7 +14,6 @@ import memoize from '../utils/memoize';
 
 type Props = {
   focused: boolean;
-  stale: boolean;
   closing?: boolean;
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
@@ -346,7 +344,6 @@ export default class Card extends React.Component<Props> {
   render() {
     const {
       focused,
-      stale,
       layout,
       current,
       next,
@@ -386,13 +383,7 @@ export default class Card extends React.Component<Props> {
             importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
             style={[styles.card, cardStyle]}
           >
-            <Screen
-              // @ts-ignore
-              active={stale ? 0 : 1}
-              style={styles.screen}
-            >
-              {children}
-            </Screen>
+            {children}
           </Animated.View>
         </PanGestureHandler>
       </React.Fragment>
@@ -407,12 +398,10 @@ const styles = StyleSheet.create({
     shadowRadius: 5,
     shadowColor: '#000',
     backgroundColor: 'white',
+    overflow: 'hidden',
   },
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: '#000',
   },
-  screen: {
-    flex: 1,
-  },
 });

src/components/Stack.tsx

@@ -8,7 +8,6 @@ export type Layout = { width: number; height: number };
 
 export type SceneProps<T> = {
   focused: boolean;
-  stale: boolean;
   route: T;
   layout: Layout;
   current: Animated.Value<number>;
@@ -77,16 +76,21 @@ export default class Stack<T extends Route> extends React.Component<
         {routes.map((route, index, self) => {
           const focused = index === self.length - 1;
 
-          return renderScene(
-            {
-              focused,
-              stale: index !== self.length - 2 && focused,
-              route,
-              layout,
-              current: progress[route.key],
-              next: self[index + 1] ? progress[self[index + 1].key] : undefined,
-            },
-            index
+          return (
+            <View key={route.key} style={StyleSheet.absoluteFill}>
+              {renderScene(
+                {
+                  focused,
+                  route,
+                  layout,
+                  current: progress[route.key],
+                  next: self[index + 1]
+                    ? progress[self[index + 1].key]
+                    : undefined,
+                },
+                index
+              )}
+            </View>
           );
         })}
       </View>
@@ -97,5 +101,6 @@ export default class Stack<T extends Route> extends React.Component<
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    overflow: 'hidden',
   },
 });