Mounting a second portal breaks PanGestureHandler in first portal

[MorganTrudeau]

Description

I just found out that mounting a second portal will break PanGestureHandlers in other portals. The swipe gestures just don't get recognized after the second portal mounts. I need to put PanGestureHandler inside Portal because swipe gestures wont work inside Portal if the Handler is on the parent. Anyone have an idea how to fix this or work around it?

Related issue about mounting portals breaking things. #12

Thanks!

Demo

import React, { useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { event } from 'react-native-reanimated';
import { Portal } from 'react-native-portalize';
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '../styles';

export const TestScreen = () => {
  const [mountPortal, setMountPortal] = useState(false);

  const x = new Animated.Value(0);
  const y = new Animated.Value(0);

  const gestureEvent = event([
    {
      nativeEvent: {
        translationX: x,
        translationY: y,
      },
    },
  ]);

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 50,
      }}>
      <TouchableOpacity
        onPress={() => setMountPortal(true)}
        style={{ height: 50, width: 100, backgroundColor: '#000' }}
      />
      {mountPortal && <Portal />}
      <Portal>
        <PanGestureHandler onGestureEvent={gestureEvent}>
          <Animated.View
            style={{
              transform: [{ translateY: y }, { translateX: x }],
              width: 50,
              height: 50,
              borderRadius: 25,
              backgroundColor: '#ccff00',
              position: 'absolute',
              left: DEVICE_WIDTH / 2 - 25,
              top: DEVICE_HEIGHT / 2 - 25,
            }}
          />
        </PanGestureHandler>
      </Portal>
    </View>
  );
};