refactor: remove PointerEventsView

packages/stack/src/views/Stack/Card.tsx

@@ -16,7 +16,6 @@ import {
 } from 'react-native-gesture-handler';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import Color from 'color';
-import PointerEventsView from './PointerEventsView';
 import StackGestureContext from '../../utils/StackGestureContext';
 import StackCardAnimationContext from '../../utils/StackCardAnimationContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
@@ -31,7 +30,6 @@ import {
 
 type Props = ViewProps & {
   index: number;
-  active: boolean;
   closing?: boolean;
   next?: Animated.AnimatedInterpolation;
   current: Animated.AnimatedInterpolation;
@@ -158,6 +156,7 @@ export default class Card extends React.Component<Props> {
     const animation =
       spec.animation === 'spring' ? Animated.spring : Animated.timing;
 
+    this.setPointerEventsEnabled(!closing);
     this.handleStartInteraction();
 
     onTransitionStart?.({ closing: Boolean(closing) });
@@ -196,6 +195,15 @@ export default class Card extends React.Component<Props> {
     return getDistanceForDirection(layout, gestureDirection);
   };
 
+  private setPointerEventsEnabled = (enabled: boolean) => {
+    const pointerEvents = enabled ? 'box-none' : 'none';
+
+    this.content.current &&
+      this.content.current.setNativeProps({ pointerEvents });
+  };
+
+  private content = React.createRef<View>();
+
   private handleStartInteraction = () => {
     if (this.interactionHandle === undefined) {
       this.interactionHandle = InteractionManager.createInteractionHandle();
@@ -344,7 +352,6 @@ export default class Card extends React.Component<Props> {
 
   render() {
     const {
-      active,
       styleInterpolator,
       index,
       current,
@@ -446,15 +453,11 @@ export default class Card extends React.Component<Props> {
                     pointerEvents="none"
                   />
                 ) : null}
-                <PointerEventsView
-                  active={active}
-                  progress={current}
-                  style={[styles.content, contentStyle]}
-                >
+                <View ref={this.content} style={[styles.content, contentStyle]}>
                   <StackCardAnimationContext.Provider value={animationContext}>
                     {children}
                   </StackCardAnimationContext.Provider>
-                </PointerEventsView>
+                </View>
               </Animated.View>
             </PanGestureHandler>
           </Animated.View>

packages/stack/src/views/Stack/CardContainer.tsx

@@ -125,7 +125,6 @@ export default function CardContainer({
   return (
     <Card
       index={index}
-      active={active}
       gestureDirection={gestureDirection}
       layout={layout}
       insets={insets}

packages/stack/src/views/Stack/PointerEventsView.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Animated, View, ViewProps } from 'react-native';
-
-type Props = ViewProps & {
-  active: boolean;
-  progress: Animated.AnimatedInterpolation;
-  children: React.ReactNode;
-};
-
-const TRUE = 1;
-const FALSE = 0;
-
-/**
- * Component that automatically computes the `pointerEvents` property
- * whenever position changes.
- */
-export default function PointerEventsView({ active, ...rest }: Props) {
-  const [pointerEventsEnabled] = React.useState(
-    () => new Animated.Value(active ? TRUE : FALSE)
-  );
-
-  const root = React.useRef<View | null>(null);
-
-  const setPointerEventsEnabled = React.useCallback((enabled: boolean) => {
-    const pointerEvents = enabled ? 'box-none' : 'none';
-
-    root.current && root.current.setNativeProps({ pointerEvents });
-  }, []);
-
-  React.useEffect(() => {
-    pointerEventsEnabled.setValue(active ? TRUE : FALSE);
-    setPointerEventsEnabled(active);
-  }, [active, pointerEventsEnabled, setPointerEventsEnabled]);
-
-  return <View ref={root} {...rest} />;
-}