jeremybarbet / react-native-portalize

The simplest way to render anything on top of the rest.
MIT License
335 stars 22 forks source link

Mounting a second portal breaks PanGestureHandler in first portal #16

Open MorganTrudeau opened 3 years ago

MorganTrudeau commented 3 years ago

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. https://github.com/jeremybarbet/react-native-portalize/issues/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>
  );
};