Control closing state via a prop

Author: satya164

src/App.tsx

@@ -9,11 +9,13 @@ type CustomRoute = Route & { initial?: boolean };
 
 type State = {
   routes: CustomRoute[];
+  closing: string[];
 };
 
 export default class App extends React.Component<{}, State> {
-  state = {
+  state: State = {
     routes: [{ key: '0', initial: true }, { key: '1', initial: true }],
+    closing: [],
   };
 
   private key = 2;
@@ -26,35 +28,42 @@ export default class App extends React.Component<{}, State> {
       <Card
         {...rest}
         key={route.key}
+        closing={this.state.closing.includes(route.key)}
         onClose={() =>
           this.setState(state => ({
             routes: state.routes.filter(r => r !== route),
+            closing: state.closing.filter(key => key !== route.key),
           }))
         }
         gesturesEnabled={index !== 0}
         animationsEnabled={!route.initial}
         {...SlideFromRightIOS}
       >
-        {({ close }: { close: () => void }) => (
-          <View style={styles.scene}>
-            <Text style={styles.item}>{index}</Text>
+        <View style={styles.scene}>
+          <Text style={styles.item}>{index}</Text>
+          <View style={styles.item}>
+            <Button
+              title="Add screen"
+              onPress={() => {
+                this.setState(state => ({
+                  routes: [...state.routes, { key: String(this.key++) }],
+                }));
+              }}
+            />
+          </View>
+          {index !== 0 ? (
             <View style={styles.item}>
               <Button
-                title="Add screen"
-                onPress={() => {
+                title="Go back"
+                onPress={() =>
                   this.setState(state => ({
-                    routes: [...state.routes, { key: String(this.key++) }],
-                  }));
-                }}
+                    closing: [...state.closing, route.key],
+                  }))
+                }
               />
             </View>
-            {index !== 0 ? (
-              <View style={styles.item}>
-                <Button title="Go back" onPress={close} />
-              </View>
-            ) : null}
-          </View>
-        )}
+          ) : null}
+        </View>
       </Card>
     );
   };

src/components/Card.tsx

@@ -16,13 +16,14 @@ import memoize from '../utils/memoize';
 type Props = {
   focused: boolean;
   stale: boolean;
+  closing?: boolean;
   next?: Animated.Node<number>;
   current: Animated.Value<number>;
   layout: { width: number; height: number };
   direction: 'horizontal' | 'vertical';
   onOpen?: () => void;
   onClose?: () => void;
-  children: (props: { close: () => void }) => React.ReactNode;
+  children: React.ReactNode;
   animationsEnabled: boolean;
   gesturesEnabled: boolean;
   transitionSpec: {
@@ -79,7 +80,7 @@ export default class Card extends React.Component<Props> {
   };
 
   componentDidUpdate(prevProps: Props) {
-    const { layout, direction, animationsEnabled } = this.props;
+    const { layout, direction, closing, animationsEnabled } = this.props;
     const { width, height } = layout;
 
     if (
@@ -103,6 +104,10 @@ export default class Card extends React.Component<Props> {
         direction === 'vertical' ? DIRECTION_VERTICAL : DIRECTION_HORIZONTAL
       );
     }
+
+    if (closing !== prevProps.closing) {
+      this.isClosing.setValue(closing ? TRUE : FALSE);
+    }
   }
 
   private isVisible = new Value<Binary>(TRUE);
@@ -321,8 +326,6 @@ export default class Card extends React.Component<Props> {
     },
   ]);
 
-  private handleClose = () => this.isClosing.setValue(TRUE);
-
   // We need to ensure that this style doesn't change unless absolutely needs to
   // Changing it too often will result in huge frame drops due to detaching and attaching
   // Changing it during an animations can result in unexpected results
@@ -388,9 +391,7 @@ export default class Card extends React.Component<Props> {
               active={stale ? 0 : 1}
               style={styles.screen}
             >
-              {children({
-                close: this.handleClose,
-              })}
+              {children}
             </Screen>
           </Animated.View>
         </PanGestureHandler>