@react-navigation/stack 7.6.2 → 7.6.4

package/lib/module/views/Stack/Card.js

@@ -3,148 +3,138 @@
 import Color from 'color';
 import * as React from 'react';
 import { Animated, InteractionManager, Platform, StyleSheet, View } from 'react-native';
+import useLatestCallback from 'use-latest-callback';
 import { CardAnimationContext } from "../../utils/CardAnimationContext.js";
+import { gestureActivationCriteria } from "../../utils/gestureActivationCriteria.js";
 import { getDistanceForDirection } from "../../utils/getDistanceForDirection.js";
 import { getInvertedMultiplier } from "../../utils/getInvertedMultiplier.js";
 import { getShadowStyle } from "../../utils/getShadowStyle.js";
-import { memoize } from "../../utils/memoize.js";
 import { GestureState, PanGestureHandler } from '../GestureHandler';
 import { CardContent } from "./CardContent.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GESTURE_VELOCITY_IMPACT = 0.3;
 const TRUE = 1;
 const FALSE = 0;
-
-/**
- * The distance of touch start from the edge of the screen where the gesture will be recognized
- */
-const GESTURE_RESPONSE_DISTANCE_HORIZONTAL = 50;
-const GESTURE_RESPONSE_DISTANCE_VERTICAL = 135;
 const useNativeDriver = Platform.OS !== 'web';
 const hasOpacityStyle = style => {
   if (style) {
     const flattenedStyle = StyleSheet.flatten(style);
-    return flattenedStyle.opacity != null;
+    return 'opacity' in flattenedStyle && flattenedStyle.opacity != null;
   }
   return false;
 };
-export class Card extends React.Component {
-  static defaultProps = {
-    shadowEnabled: false,
-    gestureEnabled: true,
-    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
-    overlay: ({
-      style
-    }) => style ? /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [styles.overlay, style]
-    }) : null
-  };
-  componentDidMount() {
-    if (!this.props.preloaded) {
-      this.animate({
-        closing: this.props.closing
-      });
-    }
-    this.isCurrentlyMounted = true;
+const getAnimateToValue = ({
+  closing: isClosing,
+  layout: currentLayout,
+  gestureDirection: currentGestureDirection,
+  direction: currentDirection,
+  preloaded: isPreloaded
+}) => {
+  if (!isClosing && !isPreloaded) {
+    return 0;
   }
-  componentDidUpdate(prevProps) {
-    const {
-      gesture,
-      direction,
-      layout,
-      gestureDirection,
-      opening,
-      closing
-    } = this.props;
-    const {
-      width,
-      height
-    } = layout;
-    if (width !== prevProps.layout.width) {
-      this.layout.width.setValue(width);
-    }
-    if (height !== prevProps.layout.height) {
-      this.layout.height.setValue(height);
+  return getDistanceForDirection(currentLayout, currentGestureDirection, currentDirection === 'rtl');
+};
+const defaultOverlay = ({
+  style
+}) => style ? /*#__PURE__*/_jsx(Animated.View, {
+  pointerEvents: "none",
+  style: [styles.overlay, style]
+}) : null;
+function Card({
+  shadowEnabled = false,
+  gestureEnabled = true,
+  gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+  overlay = defaultOverlay,
+  animated,
+  interpolationIndex,
+  opening,
+  closing,
+  next,
+  current,
+  gesture,
+  layout,
+  insets,
+  direction,
+  pageOverflowEnabled,
+  gestureDirection,
+  onOpen,
+  onClose,
+  onTransition,
+  onGestureBegin,
+  onGestureCanceled,
+  onGestureEnd,
+  children,
+  overlayEnabled,
+  gestureResponseDistance,
+  transitionSpec,
+  preloaded,
+  styleInterpolator,
+  containerStyle: customContainerStyle,
+  contentStyle
+}) {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const didInitiallyAnimate = React.useRef(false);
+  const lastToValueRef = React.useRef(undefined);
+  const interactionHandleRef = React.useRef(undefined);
+  const animationHandleRef = React.useRef(undefined);
+  const pendingGestureCallbackRef = React.useRef(undefined);
+  const [isClosing] = React.useState(() => new Animated.Value(FALSE));
+  const [inverted] = React.useState(() => new Animated.Value(getInvertedMultiplier(gestureDirection, direction === 'rtl')));
+  const [layoutAnim] = React.useState(() => ({
+    width: new Animated.Value(layout.width),
+    height: new Animated.Value(layout.height)
+  }));
+  const [isSwiping] = React.useState(() => new Animated.Value(FALSE));
+  const onStartInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current === undefined) {
+      interactionHandleRef.current = InteractionManager.createInteractionHandle();
     }
-    if (gestureDirection !== prevProps.gestureDirection) {
-      this.inverted.setValue(getInvertedMultiplier(gestureDirection, direction === 'rtl'));
+  });
+  const onEndInteraction = useLatestCallback(() => {
+    if (interactionHandleRef.current !== undefined) {
+      InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+      interactionHandleRef.current = undefined;
     }
-    const toValue = this.getAnimateToValue(this.props);
-    if (this.getAnimateToValue(prevProps) !== toValue || this.lastToValue !== toValue) {
-      // We need to trigger the animation when route was closed
-      // The route might have been closed by a `POP` action or by a gesture
-      // When route was closed due to a gesture, the animation would've happened already
-      // It's still important to trigger the animation so that `onClose` is called
-      // If `onClose` is not called, cleanup step won't be performed for gestures
-      this.animate({
-        closing
-      });
-    } else if (opening && !prevProps.opening) {
-      // This can happen when screen somewhere below in the stack comes into focus via rearranging
-      // Also reset the animated value to make sure that the animation starts from the beginning
-      gesture.setValue(getDistanceForDirection(layout, gestureDirection, direction === 'rtl'));
-      this.animate({
-        closing
-      });
-    }
-  }
-  componentWillUnmount() {
-    this.props.gesture?.stopAnimation();
-    this.isCurrentlyMounted = false;
-    this.handleEndInteraction();
-  }
-  isCurrentlyMounted = false;
-  isClosing = new Animated.Value(FALSE);
-  inverted = new Animated.Value(getInvertedMultiplier(this.props.gestureDirection, this.props.direction === 'rtl'));
-  layout = {
-    width: new Animated.Value(this.props.layout.width),
-    height: new Animated.Value(this.props.layout.height)
-  };
-  isSwiping = new Animated.Value(FALSE);
-  animate = ({
-    closing,
+  });
+  const animate = useLatestCallback(({
+    closing: isClosingParam,
     velocity
   }) => {
-    const {
-      animated,
-      transitionSpec,
-      onOpen,
-      onClose,
-      onTransition,
-      gesture
-    } = this.props;
-    const toValue = this.getAnimateToValue({
-      ...this.props,
-      closing
+    const toValue = getAnimateToValue({
+      closing: isClosingParam,
+      layout,
+      gestureDirection,
+      direction,
+      preloaded
     });
-    this.lastToValue = toValue;
-    this.isClosing.setValue(closing ? TRUE : FALSE);
-    const spec = closing ? transitionSpec.close : transitionSpec.open;
+    lastToValueRef.current = toValue;
+    isClosing.setValue(isClosingParam ? TRUE : FALSE);
+    const spec = isClosingParam ? transitionSpec.close : transitionSpec.open;
     const animation = spec.animation === 'spring' ? Animated.spring : Animated.timing;
-    clearTimeout(this.pendingGestureCallback);
-    if (this.animationHandle !== undefined) {
-      cancelAnimationFrame(this.animationHandle);
+    clearTimeout(pendingGestureCallbackRef.current);
+    if (animationHandleRef.current !== undefined) {
+      cancelAnimationFrame(animationHandleRef.current);
     }
     onTransition?.({
-      closing,
+      closing: isClosingParam,
       gesture: velocity !== undefined
     });
     const onFinish = () => {
-      if (closing) {
+      if (isClosingParam) {
         onClose();
       } else {
         onOpen();
       }
-      this.animationHandle = requestAnimationFrame(() => {
-        if (this.isCurrentlyMounted) {
+      animationHandleRef.current = requestAnimationFrame(() => {
+        if (didInitiallyAnimate.current) {
           // Make sure to re-open screen if it wasn't removed
-          this.forceUpdate();
+          forceUpdate();
         }
       });
     };
     if (animated) {
-      this.handleStartInteraction();
+      onStartInteraction();
       animation(gesture, {
         ...spec.config,
         velocity,
@@ -154,8 +144,8 @@ export class Card extends React.Component {
       }).start(({
         finished
       }) => {
-        this.handleEndInteraction();
-        clearTimeout(this.pendingGestureCallback);
+        onEndInteraction();
+        clearTimeout(pendingGestureCallbackRef.current);
         if (finished) {
           onFinish();
         }
@@ -163,57 +153,24 @@ export class Card extends React.Component {
     } else {
       onFinish();
     }
-  };
-  getAnimateToValue = ({
-    closing,
-    layout,
-    gestureDirection,
-    direction,
-    preloaded
-  }) => {
-    if (!closing && !preloaded) {
-      return 0;
-    }
-    return getDistanceForDirection(layout, gestureDirection, direction === 'rtl');
-  };
-  handleStartInteraction = () => {
-    if (this.interactionHandle === undefined) {
-      this.interactionHandle = InteractionManager.createInteractionHandle();
-    }
-  };
-  handleEndInteraction = () => {
-    if (this.interactionHandle !== undefined) {
-      InteractionManager.clearInteractionHandle(this.interactionHandle);
-      this.interactionHandle = undefined;
-    }
-  };
-  handleGestureStateChange = ({
+  });
+  const onGestureStateChange = useLatestCallback(({
     nativeEvent
   }) => {
-    const {
-      direction,
-      layout,
-      onClose,
-      onGestureBegin,
-      onGestureCanceled,
-      onGestureEnd,
-      gestureDirection,
-      gestureVelocityImpact
-    } = this.props;
     switch (nativeEvent.state) {
       case GestureState.ACTIVE:
-        this.isSwiping.setValue(TRUE);
-        this.handleStartInteraction();
+        isSwiping.setValue(TRUE);
+        onStartInteraction();
         onGestureBegin?.();
         break;
       case GestureState.CANCELLED:
       case GestureState.FAILED:
         {
-          this.isSwiping.setValue(FALSE);
-          this.handleEndInteraction();
+          isSwiping.setValue(FALSE);
+          onEndInteraction();
           const velocity = gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? nativeEvent.velocityY : nativeEvent.velocityX;
-          this.animate({
-            closing: this.props.closing,
+          animate({
+            closing,
             velocity
           });
           onGestureCanceled?.();
@@ -221,7 +178,7 @@ export class Card extends React.Component {
         }
       case GestureState.END:
         {
-          this.isSwiping.setValue(FALSE);
+          isSwiping.setValue(FALSE);
           let distance;
           let translation;
           let velocity;
@@ -234,33 +191,103 @@ export class Card extends React.Component {
             translation = nativeEvent.translationX;
             velocity = nativeEvent.velocityX;
           }
-          const closing = (translation + velocity * gestureVelocityImpact) * getInvertedMultiplier(gestureDirection, direction === 'rtl') > distance / 2 ? velocity !== 0 || translation !== 0 : this.props.closing;
-          this.animate({
-            closing,
+          const shouldClose = (translation + velocity * gestureVelocityImpact) * getInvertedMultiplier(gestureDirection, direction === 'rtl') > distance / 2 ? velocity !== 0 || translation !== 0 : closing;
+          animate({
+            closing: shouldClose,
             velocity
           });
-          if (closing) {
+          if (shouldClose) {
             // We call onClose with a delay to make sure that the animation has already started
             // This will make sure that the state update caused by this doesn't affect start of animation
-            this.pendingGestureCallback = setTimeout(() => {
+            pendingGestureCallbackRef.current = setTimeout(() => {
               onClose();
 
               // Trigger an update after we dispatch the action to remove the screen
               // This will make sure that we check if the screen didn't get removed so we can cancel the animation
-              this.forceUpdate();
+              forceUpdate();
             }, 32);
           }
           onGestureEnd?.();
           break;
         }
     }
-  };
-
-  // Memoize this to avoid extra work on re-render
-  getInterpolatedStyle = memoize((styleInterpolator, animation) => styleInterpolator(animation));
+  });
+  React.useLayoutEffect(() => {
+    layoutAnim.width.setValue(layout.width);
+    layoutAnim.height.setValue(layout.height);
+    inverted.setValue(getInvertedMultiplier(gestureDirection, direction === 'rtl'));
+  }, [gestureDirection, direction, inverted, layoutAnim.width, layoutAnim.height, layout.width, layout.height]);
+  const previousPropsRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      onEndInteraction();
+      if (animationHandleRef.current) {
+        cancelAnimationFrame(animationHandleRef.current);
+      }
+      clearTimeout(pendingGestureCallbackRef.current);
+    };
 
-  // Keep track of the animation context when deps changes.
-  getCardAnimation = memoize((interpolationIndex, current, next, layout, insetTop, insetRight, insetBottom, insetLeft) => ({
+    // We only want to clean up the animation on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const timeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    if (preloaded) {
+      return;
+    }
+    if (!didInitiallyAnimate.current) {
+      // Animate the card in on initial mount
+      // Wrap in setTimeout to ensure animation starts after
+      // rending of the screen is done. This is especially important
+      // in the new architecture
+      // cf., https://github.com/react-navigation/react-navigation/issues/12401
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        didInitiallyAnimate.current = true;
+        animate({
+          closing
+        });
+      }, 0);
+    } else {
+      const previousOpening = previousPropsRef.current?.opening;
+      const previousToValue = previousPropsRef.current ? getAnimateToValue(previousPropsRef.current) : null;
+      const toValue = getAnimateToValue({
+        closing,
+        layout,
+        gestureDirection,
+        direction,
+        preloaded
+      });
+      if (previousToValue !== toValue || lastToValueRef.current !== toValue) {
+        // We need to trigger the animation when route was closed
+        // The route might have been closed by a `POP` action or by a gesture
+        // When route was closed due to a gesture, the animation would've happened already
+        // It's still important to trigger the animation so that `onClose` is called
+        // If `onClose` is not called, cleanup step won't be performed for gestures
+        animate({
+          closing
+        });
+      } else if (typeof previousOpening === 'boolean' && opening && !previousOpening) {
+        // This can happen when screen somewhere below in the stack comes into focus via rearranging
+        // Also reset the animated value to make sure that the animation starts from the beginning
+        gesture.setValue(getDistanceForDirection(layout, gestureDirection, direction === 'rtl'));
+        animate({
+          closing
+        });
+      }
+    }
+    previousPropsRef.current = {
+      opening,
+      closing,
+      layout,
+      gestureDirection,
+      direction,
+      preloaded
+    };
+  }, [animate, closing, direction, gesture, gestureDirection, layout, opening, preloaded]);
+  const interpolationProps = React.useMemo(() => ({
     index: interpolationIndex,
     current: {
       progress: current
@@ -268,157 +295,91 @@ export class Card extends React.Component {
     next: next && {
       progress: next
     },
-    closing: this.isClosing,
-    swiping: this.isSwiping,
-    inverted: this.inverted,
+    closing: isClosing,
+    swiping: isSwiping,
+    inverted,
     layouts: {
       screen: layout
     },
     insets: {
-      top: insetTop,
-      right: insetRight,
-      bottom: insetBottom,
-      left: insetLeft
+      top: insets.top,
+      right: insets.right,
+      bottom: insets.bottom,
+      left: insets.left
     }
-  }));
-  gestureActivationCriteria() {
-    const {
-      direction,
-      layout,
-      gestureDirection,
-      gestureResponseDistance
-    } = this.props;
-    const enableTrackpadTwoFingerGesture = true;
-    const distance = gestureResponseDistance !== undefined ? gestureResponseDistance : gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? GESTURE_RESPONSE_DISTANCE_VERTICAL : GESTURE_RESPONSE_DISTANCE_HORIZONTAL;
-    if (gestureDirection === 'vertical') {
-      return {
-        maxDeltaX: 15,
-        minOffsetY: 5,
-        hitSlop: {
-          bottom: -layout.height + distance
-        },
-        enableTrackpadTwoFingerGesture
-      };
-    } else if (gestureDirection === 'vertical-inverted') {
-      return {
-        maxDeltaX: 15,
-        minOffsetY: -5,
-        hitSlop: {
-          top: -layout.height + distance
-        },
-        enableTrackpadTwoFingerGesture
-      };
-    } else {
-      const hitSlop = -layout.width + distance;
-      const invertedMultiplier = getInvertedMultiplier(gestureDirection, direction === 'rtl');
-      if (invertedMultiplier === 1) {
-        return {
-          minOffsetX: 5,
-          maxDeltaY: 20,
-          hitSlop: {
-            right: hitSlop
-          },
-          enableTrackpadTwoFingerGesture
-        };
-      } else {
-        return {
-          minOffsetX: -5,
-          maxDeltaY: 20,
-          hitSlop: {
-            left: hitSlop
-          },
-          enableTrackpadTwoFingerGesture
-        };
-      }
+  }), [interpolationIndex, current, next, isClosing, isSwiping, inverted, layout, insets.top, insets.right, insets.bottom, insets.left]);
+  const {
+    containerStyle,
+    cardStyle,
+    overlayStyle,
+    shadowStyle
+  } = React.useMemo(() => styleInterpolator(interpolationProps), [styleInterpolator, interpolationProps]);
+  const onGestureEvent = React.useMemo(() => gestureEnabled ? Animated.event([{
+    nativeEvent: gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? {
+      translationY: gesture
+    } : {
+      translationX: gesture
     }
-  }
-  render() {
-    const {
-      styleInterpolator,
-      interpolationIndex,
-      current,
-      gesture,
-      next,
-      layout,
-      insets,
-      overlay,
-      overlayEnabled,
-      shadowEnabled,
-      gestureEnabled,
-      gestureDirection,
-      pageOverflowEnabled,
-      children,
-      containerStyle: customContainerStyle,
-      contentStyle
-    } = this.props;
-    const interpolationProps = this.getCardAnimation(interpolationIndex, current, next, layout, insets.top, insets.right, insets.bottom, insets.left);
-    const interpolatedStyle = this.getInterpolatedStyle(styleInterpolator, interpolationProps);
-    const {
-      containerStyle,
-      cardStyle,
-      overlayStyle,
-      shadowStyle
-    } = interpolatedStyle;
-    const handleGestureEvent = gestureEnabled ? Animated.event([{
-      nativeEvent: gestureDirection === 'vertical' || gestureDirection === 'vertical-inverted' ? {
-        translationY: gesture
-      } : {
-        translationX: gesture
+  }], {
+    useNativeDriver
+  }) : undefined, [gesture, gestureDirection, gestureEnabled]);
+  const {
+    backgroundColor
+  } = StyleSheet.flatten(contentStyle || {});
+  const isTransparent = typeof backgroundColor === 'string' ? Color(backgroundColor).alpha() === 0 : false;
+  return /*#__PURE__*/_jsxs(CardAnimationContext.Provider, {
+    value: interpolationProps,
+    children: [Platform.OS !== 'web' ? /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        // This is a dummy style that doesn't actually change anything visually.
+        // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
+        // If we disable animations and hide header, it could end up making the value unused.
+        // So we have this dummy style that will always be used regardless of what else changed.
+        opacity: current
       }
-    }], {
-      useNativeDriver
-    }) : undefined;
-    const {
-      backgroundColor
-    } = StyleSheet.flatten(contentStyle || {});
-    const isTransparent = typeof backgroundColor === 'string' ? Color(backgroundColor).alpha() === 0 : false;
-    return /*#__PURE__*/_jsxs(CardAnimationContext.Provider, {
-      value: interpolationProps,
-      children: [Platform.OS !== 'web' ? /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          // This is a dummy style that doesn't actually change anything visually.
-          // Animated needs the animated value to be used somewhere, otherwise things don't update properly.
-          // If we disable animations and hide header, it could end up making the value unused.
-          // So we have this dummy style that will always be used regardless of what else changed.
-          opacity: current
-        }
-        // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
-        ,
-        collapsable: false
-      }) : null, overlayEnabled ? /*#__PURE__*/_jsx(View, {
-        pointerEvents: "box-none",
-        style: StyleSheet.absoluteFill,
-        children: overlay({
-          style: overlayStyle
+      // Make sure that this view isn't removed. If this view is removed, our style with animated value won't apply
+      ,
+      collapsable: false
+    }) : null, overlayEnabled ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: StyleSheet.absoluteFill,
+      children: overlay({
+        style: overlayStyle
+      })
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "box-none",
+      style: [styles.container, containerStyle, customContainerStyle],
+      children: /*#__PURE__*/_jsx(PanGestureHandler, {
+        enabled: layout.width !== 0 && gestureEnabled,
+        onGestureEvent: onGestureEvent,
+        onHandlerStateChange: onGestureStateChange,
+        ...gestureActivationCriteria({
+          layout,
+          direction,
+          gestureDirection,
+          gestureResponseDistance
+        }),
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          pointerEvents: "box-none",
+          needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
+          style: [styles.container, cardStyle],
+          children: [shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/_jsx(Animated.View, {
+            pointerEvents: "none",
+            style: [styles.shadow, gestureDirection === 'horizontal' ? [styles.shadowHorizontal, styles.shadowStart] : gestureDirection === 'horizontal-inverted' ? [styles.shadowHorizontal, styles.shadowEnd] : gestureDirection === 'vertical' ? [styles.shadowVertical, styles.shadowTop] : [styles.shadowVertical, styles.shadowBottom], {
+              backgroundColor
+            }, shadowStyle]
+          }) : null, /*#__PURE__*/_jsx(CardContent, {
+            enabled: pageOverflowEnabled,
+            layout: layout,
+            style: contentStyle,
+            children: children
+          })]
         })
-      }) : null, /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.container, containerStyle, customContainerStyle],
-        pointerEvents: "box-none",
-        children: /*#__PURE__*/_jsx(PanGestureHandler, {
-          enabled: layout.width !== 0 && gestureEnabled,
-          onGestureEvent: handleGestureEvent,
-          onHandlerStateChange: this.handleGestureStateChange,
-          ...this.gestureActivationCriteria(),
-          children: /*#__PURE__*/_jsxs(Animated.View, {
-            needsOffscreenAlphaCompositing: hasOpacityStyle(cardStyle),
-            style: [styles.container, cardStyle],
-            children: [shadowEnabled && shadowStyle && !isTransparent ? /*#__PURE__*/_jsx(Animated.View, {
-              style: [styles.shadow, gestureDirection === 'horizontal' ? [styles.shadowHorizontal, styles.shadowStart] : gestureDirection === 'horizontal-inverted' ? [styles.shadowHorizontal, styles.shadowEnd] : gestureDirection === 'vertical' ? [styles.shadowVertical, styles.shadowTop] : [styles.shadowVertical, styles.shadowBottom], {
-                backgroundColor
-              }, shadowStyle],
-              pointerEvents: "none"
-            }) : null, /*#__PURE__*/_jsx(CardContent, {
-              enabled: pageOverflowEnabled,
-              layout: layout,
-              style: contentStyle,
-              children: children
-            })]
-          })
-        })
-      })]
-    });
-  }
+      })
+    })]
+  });
 }
+export { Card };
 const styles = StyleSheet.create({
   container: {
     flex: 1