React-native-gesture-handler: 모달에서는 작동하지 않습니다.

+1
해결 방법이 있습니까?

지금은 모달을 사용하지 않고 뷰를 절대 위치로 다시 만듭니다.

지금은 모달 화면을 사용하여 인터넷 검색 및 채팅 후 RN의 모달은 버그가 많은 것으로 간주했습니다.

+1

안녕하세요, @martinezguillaume , @mordaha , @csto
나는이 문제를 살펴 봤고 우리 도서관의 문제가 아니라 RN Core의 문제라고 생각합니다.

@osdnk 는이 문제를

+1 제스처는 모달에서 작동하지 않습니다.

오늘도이 버그를 만났습니다.

같은 문제입니다. 제스처는 Android의 모달에서 작동하지 않습니다.
예를 들어 엑스포

저도 마찬가지입니다. 모달에서 테스트 된 react-native의 PanResponder 핸들러-잘 작동합니다.

이것에 대한 생각이 있습니다.이 라이브러리를 안드로이드 프로젝트에 연결할 때 다음 단계를 수행합니다.

<strong i="7">@Override</strong>
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }

그리고 우리는 모달이 별도의 패키지라는 것을 알고 있습니다. 그것으로 똑같은 일을 할 수 있습니까?

표준 React Native Modal 사용하고 있었고이 문제가 발생했습니다.
새 화면을 만들고 모달로 표시하여 문제를 해결했습니다. react-native-navigation 을 사용하고 있습니다.

Navigation.showModal({
    component: {
      name: navRoutes.ImageModal,
      passProps: { image },
    },
  })

제스처는 iOS와 Android 모두에서 예상대로 작동하며 원래 모달에서 원하는 투명한 배경을 여전히 얻습니다.

나는 그것을 한동안 파고 들었다.

1. RNGH의 문제입니다. 죄송합니다 😒
2. bc 모달이 RN 루트 뷰 아래에 렌더링되지 않는 경우가 발생합니다.
3. RNRootView와 비슷한 방식으로 모달의 메커니즘을 일부 추가 로직으로 래핑하여 교체하여 수정할 수 있습니다. https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java 참조
4. 지금은 할 시간이 없습니다. 시간이 많이 걸리고 Android 네이티브 측의 RNGH 코어에 일부 코드를 복사해야 할 수도 있습니다.

누군가가 원하고 할 시간이 있다면 기꺼이 검토하고 실행 가능하고 너무 엉망이 아닌 경우 즉시 병합 할 것입니다.

@ mars-lan @ mars-lan @ParhamZare @ewendel @ Via-profit @Dmitrylolo @ LaVielle @ martinezguillaume @mordaha @csto @ mars-lan @ParhamZare @ewendel @ Via-profit @Dmitrylolo @LaVielle

또한 두 달 전에 시도해 보았습니다.

https://github.com/kmagiera/react-native-gesture-handler/commit/139da18039683bed3c439c991c7eaf802086bf86

누군가에게 영감이 될 수도 있겠 네요 🤷‍♂️

안녕하세요 @osdnk 저는 제 앱에이 기능이 필요해서 시도해 볼 수있을 것이라고 생각했지만 RNGestureHandler 또는 Android에 대한 경험이 많지 않습니다. 작동하기 위해해야 ​​할 일에 대해 좀 더 통찰력을 줄 수 있습니까?
또한 이전 시도를보고 있었는데, 완료하기 위해 빠진 것이 무엇인지, 그리고 시작점으로 사용할 수 있는지 알고 싶습니다.

같은 오류.

@kmagiera @osdnk 이것에 대한 업데이트가 있습니까?
Touchable* 조차도 모달 내부에서 작동하지 않으며 이것은 실망 스럽습니다.

+1. 모달과 함께 reanimated-bottom-sheet를 사용합니다.

업데이트가 있습니까? 아니면이 문제가 발생하지 않는 다른 모달 구성 요소가 있습니까? RN의 모달은 정직하게 작동하며 버그로 가득 차 있습니다 (예 : 경고와 결합하면 멈춤).

@cristianoccazinsp https://github.com/react-native-community/react-native-modal 을 사용하여 끝났습니다.

이상한. 해당 구성 요소는 내부적으로 react의 모달을 사용해야합니다. 그것을했다
당신에게 차이를 만들어?

El jue., 2019 년 5 월 30 일 14:38, Mars Lan [email protected]
escribió :

@cristianoccazinsp https://github.com/cristianoccazinsp 나는 끝났다
https://github.com/react-native-community/react-native-modal 사용

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/kmagiera/react-native-gesture-handler/issues/139?email_source=notifications&email_token=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVWWK3TUL52HSTDN5VRWEXGOD4506XHKissue4DFVRWEXGOD4506ZLOPWS#comment
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
.

@cristianoccazinsp 화면을 가리기 위해 RN의 모달 만 사용하며, coverScreen 를 false 로 설정하여 비활성화 할 수 있습니다.

@cristianoccazinsp 화면을 가리기 위해 RN의 모달 만 사용하며, coverScreen 를 false 로 설정하여 비활성화 할 수 있습니다.

그러나 앱의 루트 구성 요소에서 렌더링되지 않는이 소품으로 전체 화면 모달을 표시하는 방법이 있습니까?

@jvaclavik https://github.com/callstack/react-native-paper 와 함께 사용 했는데이 목적을 위해 특별히 설계된 Portal 이라는 구성 요소가 있습니다.

이것은 모든 사용 사례를 해결하지 못할 수 있지만 prop propagateSwipe 를 true로 설정할 때 반응 네이티브 모달에서 제스처를 활성화 할 수 있습니다.

이 문제는 https://github.com/kmagiera/react-native-screens/issues/61 과 관련된 것으로 보입니다.

Android에서 반응 기본 화면을 사용하지 마십시오. '재 애니메이션 된 하단 시트'로 테스트 및 제대로 작동

if (Platform.OS === 'ios') {
useScreens ();
}

투명한 bg에 대한이 React Navigation Modal 구성은

ScreenOne : {
화면 : ScreenOne,
navigationOptions : {
gesturesEnabled : false
},
}
{
모드 : '모달',
transparentCard : true,
headerMode : '없음',
cardStyle : {
backgroundColor : '투명',
불투명도 : 1
},
transitionConfig : () => ({
containerStyle : {
backgroundColor : '투명',
}
})
}

@osdnk가 수정 했습니까?

이것은 너무 많은 고통이었습니다.
나는 구글로 해결하기 전에 시간을 보냈고, 지구상에서 동일한 구성 요소가 iOS와 안드로이드에서 작동하지만 응용 프로그램 내부의 일부에서만 작동하는 이유를 알아 내려고 노력했습니다.

우리는 같은 문제가 있습니다-그것은 모달에서 작동하지 않습니다.
누구든지이 작업을하고 있거나 상태 업데이트를 알고 있는지 궁금합니다.
이 라이브러리를 삭제하고 RN 팬 핸들러로 전환해야합니까?
어떠한 제안 ?

https://github.com/react-native-community/react-native-modal 도 작동하지 않습니다.

여기도 마찬가지입니다. RectButton은 https://github.com/react-native-community/react-native-modal 내에서 작동하지 않습니다.

트윗 담아 가기
Modal 또는 Modal 기반 패키지 (기본 종속성을 연결할 필요가없는 경우 react-native 의 Modal )가 도움이 될 것입니다 (기본적으로 모두 시도해 보았습니다).
모든 gesture- 관련 구성 요소 (우리의 경우 하단 시트 동작)는 android에서 <Modal>...</Modal> 내부에서 렌더링 될 때 터치 / 스 와이프 등을 등록하지 않습니다.
제가 생각할 수있는 3 가지 해결책이 있습니다.

1. 모달을 사용하는 경우 다른 라이브러리를 사용하십시오. 일부 스 와이프 기반 구성 요소를 PanResponder 로 다시 작성해야 할 수 있습니다. 이것은 고통이지만 꽤 간단합니다.
2. portals 모달을 사용하십시오. 실제로 포털이나 모달이 아닙니다. 단일 애플리케이션 호스트가 있기 때문에 포털은 react-native에서 지원되지 않습니다.하지만 호스트 구성 요소를 애플리케이션의 어딘가에 배치하여 작동하고 앱 스택 위의 절대보기에서 모달 콘텐츠를 렌더링합니다. 이것은 작동하는 솔루션이지만 컨텍스트 공급자 위에 렌더링되는 자식으로 인해 useContext() 호출이 손실됩니다. navigation 컨텍스트가 손실되었으므로 작동하지 않습니다.
3. 탐색 라이브러리에서 제공하는 모달 사용 ( react-navigation ); 이것은 작동하지만 API는 ... 좋지 않습니다. 하나의 화면을 모달로 만들 수는 없으며 스택 만 모달 모드에있을 수 있습니다. 이것은 내가 고수하는 해결책입니다.

글쎄, 최종 해결책이 있습니다-네이티브 안드로이드 구현을 패치하거나 (엑스포를 사용하는 경우 가능하지 않음) 라이브러리에서 패치를 기다린 다음 엑스포에 병합 될 때까지 기다리십시오.

추신
오해하지 마세요.이 라이브러리는 놀랍습니다. 여기에 작업을 쏟아 부은 것에 대해 감사하고 최종 사용자에게 얼마나 더 나은 경험을 제공하는지 충분히 강조 할 수는 없습니다.하지만 이와 같은 버그는 제 머리카락을 빼내고 싶게 만듭니다.

네이티브 컨텍스트를 처리해야하는 라이브러리는 거의 없습니다.

Android의 경우 RNGH 문서에 명시된대로 특별한주의가 필요합니다.

MainActivity.java 파일 업데이트

도움이되기를 바랍니다.

네이티브 컨텍스트를 처리해야하는 라이브러리는 거의 없습니다.

Android의 경우 RNGH 문서에 명시된대로 특별한주의가 필요합니다.

MainActivity.java 파일 업데이트

도움이되기를 바랍니다.

예, 이것은 저에게 완벽하게 작동했습니다. 내 안드로이드 앱을 스와이 핑 할 수있게 만드는 솔루션을 찾는 데 거의 좌절했습니다.

그래도 작동이 안되는
모달을 변경하여 모든 것이 잘 작동하면 ...

안녕하세요 @romanonthego ,

글쎄, 최종 해결책이 있습니다-네이티브 안드로이드 구현을 패치하거나 (엑스포를 사용하는 경우 가능하지 않음) 라이브러리에서 패치를 기다린 다음 엑스포에 병합 될 때까지 기다리십시오.

내 네이티브 Android 코드에 패치 할 내용을 알려주시겠습니까?

whop https://github.com/software-mansion/react-native-gesture-handler/pull/937

@osdnk 신나는 DialogFragment 에서도 작동합니까?

# 937을 시도한 후 나는 그것이 나를 위해 작동하지 않는다는 것을 알았습니다 ...

Wix의 react-native-navigation을 사용하고 있기 때문일까요? 내가 아는 한 모든 화면은 gestureHandlerRootHOC에 등록되어 있습니다 (라이브러리는 일반, 비 모달 뷰에서 완벽하게 작동합니다).

이것은 모달에서 RectButton을 시도한 화면의 일부입니다 (기본적으로 문서 업데이트에 있음).

  renderSearchScreen = () => {
    const { showSearchHistory } = this.state;
    const ExampleWithHoc = gestureHandlerRootHOC(() => {
      return (
        <View style={genericStyles.container}>
          <SearchScreen
            searchBar={{
              ...this.searchBar,
              searchQuery: this.props.searchQuery,
            }}
            onBackPress={() => {
              this.setState({ showSearchHistory: false });
            }}
          />
        </View>
      );
    });

    if (showSearchHistory) {
      return (
        <RNModal
          animationType="fade"
          transparent
          visible={this.state.showSearchHistory}
          onRequestClose={() => {}}>
          <ExampleWithHoc />
        </RNModal>
      );
    }

    return null;
  };

모달은 예상대로로드되지만 RectButton은 onPress 이벤트를 시작하지 않습니다. 새로운 앱으로 최소한의 재현 가능한 데모를 만들려고했지만 # 848 # 676 # 835 (서로 중복 될 수 있음)를 발견했습니다.

와우 # 937

그 놀라운! 그래도 react-native-modal 에서는 여전히 작동하지 않습니다!

_ // 편집 : 사실, 기본 모달도 작동하지 않지만 착각하지 않으면 1.6.0부터 시작 해야합니다. 무엇이 잘못되었는지 알아 내려고 노력할 것입니다 _

나는 약간 놀았고 문제를 찾을 수있었습니다. 그러나 원인과 해결 방법을 잘 모르겠습니다.

내 경우의 문제는, 그 I react-native-gesture-handler 하는 내부하지 작업 @react-navigation/stack , 그래서 기본적으로 (모달 내부에 위치하는 경우 Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) 실패).

스택 네비게이터를 잘라내거나 대신 탭 네비게이터를 사용하면 매력처럼 작동하므로 스택 네비게이터의 잘못이라고 확신합니다.

관련 패키지 버전 :

[email protected]
@react-navigation/[email protected]
@react-navigation/[email protected]

최대한 빨리 데모 저장소를 설정해 보겠습니다. 더 많은 유용한 정보를 제공 할 수 있는지 알려주세요.

다음은 문제를 보여주는 데모 앱입니다 ( npx react-native init 에서 거의 비어 있음). 앱 내에서 스택 탐색기를 전환하고 PanGestureHandler 이 어떻게 작동하고 작동하지 않는지 확인할 수 있습니다.

https://github.com/mxmzb/react-native-breakable-app

비슷한 문제가 있습니다. Stack.Navigator가 Android에서 제대로 작동하지 않는 것 같습니다. mode = "modal"또는 "card"를 사용하는 것은 중요하지 않습니다.

그래서 나는 놀았고 다음 코드를 가지고있었습니다.

import { SafeAreaView, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'

import { enableScreens } from 'react-native-screens';
enableScreens(); // <-- this fucked it up

const Screen1 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Open Modal" onPress={() => navigation.push('Modal')} />
      </SafeAreaView>
    )
  }

  const Screen2 = ({ navigation }) => {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Close Modal" onPress={() => navigation.goBack()} />
      </SafeAreaView>
    )
  }

const App = () => {

return (
        <NavigationContainer>
          <Stack.Navigator headerMode="none">
            <Stack.Screen name="Main" component={Screen1} />
            <Stack.Screen name="Modal" component={Screen2} />
          </Stack.Navigator>
        </NavigationContainer>
  )

}

그런 다음이 줄을 제거했습니다.
enableScreens();

그런 다음 Android에서 올바르게 작동했습니다.

모달 내에서 그것을 해결하는 약간의 트릭 :

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

비슷한 문제가 있습니다. 해결 방법이 있습니까?

모달 내에서 https://github.com/osdnk/react-native-reanimated-bottom-sheet 를 사용하려고했지만 불가능했습니다. 마침내 반응 탐색 화면 애니메이션으로 해결했습니다.

https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/143#issuecomment -614300015

모달 내에서 그것을 해결하는 약간의 트릭 :

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

안녕하세요 @gideaoms . 귀하의 의견이 여기에서 어떻게 눈에 띄지 않았는지 궁금합니다. 확실히 트릭을 수행합니다. 감사합니다!

다음은 문제를 보여주는 데모 앱입니다 ( npx react-native init 에서 거의 비어 있음). 앱 내에서 스택 탐색기를 전환하고 PanGestureHandler 이 어떻게 작동하고 작동하지 않는지 확인할 수 있습니다.

https://github.com/mxmzb/react-native-breakable-app

그렇다면 해결책은 무엇입니까?

나는 여전히 같은 문제가있다 ....
아직 해결책이 없습니까?

이것은 1.6.0에서 여전히 문제입니다.

위에서 언급 한 모든 제안을 시도했지만 아직 운이 없습니다. 정말 실망스러워 도와주세요.
0.62.2의 내 반응 네이티브 버전은 / react-native-gesture-handler 1.5.6 및 1.6.0을 모두 사용해 보았습니다.

^1.7.0 에서 여전히 문제

여전히 작동하지 않습니다 : -1 :

우리는 wix-navigation을 사용합니다. 아마도 관련이 있습니까?

글쎄, 가능한 해결 방법을 찾았습니다. 우리가 원하는 것을 정확하게 수행하고 iOS와 Android 모두에서 작동합니다.

https://www.youtube.com/watch?v=tLQjGHDiRkM

@steniowagner 는 사용자 정의 모달과 같은가요? 나는 그것을 추천하지 않을 것입니다
반응 탐색 또는 네이티브 스택 모달로 이동하면 잘 작동합니다.

흠, 반응 탐색으로 테스트하지 않았지만 (제 경우에는 너무 많이 들리는 것 같음) 현재로서는 가장 좋은 방법 일 수 있습니다.

@ a-eid 감사합니다!

문서에 따르면
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage -with-modals-on-android

그러나 여전히 나를 위해 작동하지 않았습니다.

@gideaoms 그 트릭은 버튼에서 작동하지만 내 사용 사례는 모달 내부에서 PinchGestureHandler 을 사용하는 것입니다.

모달 내에서 그것을 해결하는 약간의 트릭 :

import { TouchableWithoutFeedback } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

<TouchableWithoutFeedback onPress={...}
    <RectButton>
         ...
    </RectButton>
</TouchableWithoutFeedback>

이 문제는 2 년 이상 된 것입니다.이 문제를 해결할 계획이 있습니까?

내 앱에 대한 사용자 지정 Slider 구성 요소를 만들었는데 내 앱의 많은 뷰가 모달이기 때문에 Android에서 전혀 사용할 수 없습니다.

모든 화면과 모달 구성 요소를 gestureHandlerRootHoC 래핑했습니다 (wix / react-native-navigation 사용).

나는 성공하지 않고 gestureHandlerRootHoc 화면과 구성 요소를 모두 래핑하려고 시도했습니다. 모달에서 아래로 스 와이프하여 닫기 동작을 구현하려면 PanGestureHandler 가 필요하기 때문에 RectButton 접근 방식을 시도하지 않았습니다. iOS에서 완벽하게 작동하기 때문에 실망스럽고 실제로 스 와이프하여 즉시 해제 할 수있는 react-native-modal 사용하고 있기 때문에 대신 해당 접근 방식을 사용해 보았습니다. 모달 내부에 스크롤 가능한 콘텐츠가없는 한 작동합니다. iOS와 Android 모두에서 버그가 있기 때문에 약간 멈춰 있습니다.

요약하자면 :

1. ❌ RNGH는 react-native 의 <Modal> 구성 요소에서 작동하지 않습니다 (구성 요소가 gestureHandlerRootHOC 래핑되어 있어도)
2. ✅ RNGH는 Navigation.showModal 사용하여 표시되는 wix/react-native-navigation 의 화면에서 작동합니다 (화면이 gestureHandlerRootHOC 래핑되어 있어도).
3. ✅ RNGH는 modal: true 와 함께 react-navigation 의 푸시 함수를 사용하여 표시되는 경우 분명히 작동하지만 기본 스택 ( enableScreens() / createNativeStackNavigator() )을 사용하지 않을 때만 작동합니다.

필요한 경우 자세한 정보를 제공 할 수 있습니다.

react-native-modal-animated 는

@flysky 왜 react-native-modal-animated 가 react-native-modal 과 같은 별도의 활동을 사용하지 않는 경우 모든 위에 어떻게 렌더링됩니까? 절대 위치를 사용하는 경우 경우에 따라 문제가 발생할 수 있습니다.

@ waheedakhtar694 , 앱솔루트를 사용하고 있습니다. 적어도 제 경우에는 문제 없습니다 : stuck_out_tongue_closed_eyes :

@jvaclavik https://github.com/callstack/react-native-paper 와 함께 사용 했는데이 목적을 위해 특별히 설계된 Portal 이라는 구성 요소가 있습니다.

@jvaclavik이 말했듯이 react-native-paper의 Portal을 사용하여 해결되었습니다.
내 앱을 PaperProvider로 래핑 한 다음 Modals를 Views로 변경하고 gestureHandlerRootHOC 및 Portal로 래핑했습니다
이제 하단 시트가 Android에서 작동합니다 😍

_EDIT : 어떤 이유로 팬 제스처가 작동하지만 onPress 이벤트가 작동하지 않습니다 (하지만 잔물결이 표시됨) ...
편집 2 : 그것은 내가 사용한 라이브러리의 문제 였고, "react-native"에서 "react-native-gesture-handler"로 터치 가능한 가져 오기를 변경하는 문제를 해결했습니다.

다음은 시도해 볼 수있는 코드입니다.

/*
 App.js:
 - import { Provider as PaperProvider } from "react-native-paper";
 - wrap your App with PaperProvider
*/

// ModalFixed.js
import { Portal } from 'react-native-paper';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const ModalFixed = (props) => {
  <View style={styles.modal}>
    <View style={styles.shadow} />
    {/* MODAL CONTENT HERE, you can put props.children to reuse this component */}
  </View>
}

const styles = StyleSheet.create({
  modal: {
    width: "100%",
    height: "100%"
  },
  shadow: {
    position: "absolute",
    width: "100%",
    height: "100%",
    backgroundColor: "rgba(0,0,0,0.3)",
  }
})

const _ModalFixed = gestureHandlerRootHOC(SheetPopup)
export default (props) => {
  return (
    <Portal>
      <_ModalFixed {...props} />
    </Portal>
  )
}

나를 위해 일하는 것 :
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

이것에 대한 업데이트가 있습니까? iOS가 예상대로 작동하지만 Android 모달이 골칫거리 인 프로젝트가 두 개 있습니다. 우리는 프로젝트에서 모달을 제거 할 필요가 없습니다. 이것은 큰 디자인 점검입니다. : /

@DavidAPears gestureHandlerRootHOC 모달을 래핑 해 보셨나요?

이 같은 ?

const ModalInner = gestureHandlerRootHOC(function GestureExample() {
  return (
    <View>
      { RNGH components . }
    </View>
  );
});

export default function ModalForX() {
  return (
    <Modal animationType="slide" transparent={false}>
      <ModalInner />
    </Modal>
  );
}

react-native-portalize 의 Portal react-native-portalize 및 gestureHandlerRootHOC 이 적합합니다. 그런 것 :

<Portal>
   <Modal>
      <GestureHandlerRootHOCWrappedComponent />
   </Modal>
</Portal>

모달 작업에 coverSreen = {false}를 설정합니다. 하지만 내 모달이 화면을 덮어야 해

'react-native'에서 {Platform, Modal} 가져 오기;
'react-native-gesture-handler'에서 {gestureHandlerRootHOC} 가져 오기;
import {AnimatedBottomSheet} from '../AnimatedBottomSheet';

const AnimatedBottomSheetWrapper = Platform.OS === 'android'? gestureHandlerRootHOC (AnimatedBottomSheet) : AnimatedBottomSheet;

이것이 누군가를 도울 것인지 확실하지 않지만 react-native-modal과 함께이 라이브러리를 사용하는 데 문제가 있었지만 모달 gestureHandlerRootHOC의 자식을 래핑하는 것 외에도 (이것은 버튼에 대해 잘 작동하지만 모달 + avoidKeyboard에 텍스트 입력 문제가 있습니다. = true이고 키를 누를 때마다 키보드가 닫혔습니다.) 그래서 제가 한 유일한 것은 모달 자식 래퍼로 만들어졌습니다.

import Modal from 'react-native-modal';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

const GestureHandlerWrapper = gestureHandlerRootHOC(
  ({ children }) => <View>{children}</View>,
  { flex: 0 }
);

export const CustomModal: React.FC<Props> = ({
  children,
...rest
}) => {
  return (
    <Modal
      {...rest}
    >
      <GestureHandlerWrapper>    
          {children} 
      </GestureHandlerWrapper>
    </Modal>
  );
};