React-native-gesture-handler: モーダルでは機能しません

+1
回避策はありますか？

今のところモーダルは使用していません。絶対位置のビューで再作成するだけです。

今のところモーダルスクリーンを使用して、グーグルとチャットの後、RNのモーダルはバグが多すぎると考えました

+1

こんにちは、 @ martinezguillaume 、 @ mordaha 、@ csto
私はこの問題を調べましたが、それは私たちのライブラリの問題ではなく、RNコアの問題だと思います。

@osdnkこれは

+1ジェスチャはモーダルでは機能しません

今日もこのバグに遭遇しました。

同じ問題。 ジェスチャーはAndroidのモーダルでは機能しません。
たとえば万博

わたしも。 テスト済みのreact-nativeのモーダルでのPanResponderハンドラーは正常に動作します。

私はこれについて考えています：このライブラリをAndroidプロジェクトにリンクするとき、次のステップを実行しています

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

そして、モーダルは別のパッケージであることを私たちは知っています。 それと同じことをする意味があるのでしょうか？

標準のReactNative 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コアにコードをコピーする必要があります。

誰かがそれを望んでいて、それをする時間があれば、私はそれを喜んでレビューし、それが実行可能でハッキーすぎないのであればすぐにマージします。

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

また、2ヶ月前に試してみました。

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

多分それは誰かのためのインスピレーションかもしれません🤷‍♂️

ねえ@osdnkアプリにこの機能が必要なので、試してみようと思っていましたが、RNGestureHandlerやAndroidの経験はあまりありません。 それを機能させるために私が何をする必要があるかについて、もう少し洞察をいただけますか？
また、あなたの前回の試みを見ていましたが、それを完成させるために何が欠けているのか、そしてそれが出発点として使用できるかどうかを知りたいと思います。

同じエラー。

@kmagiera @osdnkこれに関する更新はありますか？
Touchable*さえ、モーダル内では機能せず、これはイライラします

+1。 私はモーダルで蘇生されたボトムシートを使用します

更新はありますか？ または、おそらく、この問題に悩まされていない他のモーダルコンポーネントはありますか？ RNのモーダルは正直なところ非常に悪いように機能し、バグがたくさんあります（アラートと組み合わせるとスタックするなど）

@cristianoccazinsp私はhttps://github.com/react-native-community/react-native-modalを使用することになりました

奇妙な。 そのコンポーネントは、内部でreactのモーダルを使用することになっています。 それをやった
あなたに違いをもたらしますか？

エルJUE。、30デマヨデ2019午後02時38分、火星ラン[email protected]
escribió：

@cristianoccazinsphttps ：//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=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNM
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
。

@cristianoccazinsp画面をカバーするためにRNのモーダルのみを使用します。これは、 coverScreenをfalse設定することで無効にできます。

@cristianoccazinsp画面をカバーするためにRNのモーダルのみを使用します。これは、 coverScreenをfalse設定することで無効にできます。

しかし、アプリのルートコンポーネントでレンダリングされていないこの小道具でフルスクリーンモーダルを表示する方法はありますか？

@jvaclavik https://github.com/callstack/react-native-paperと組み合わせて使用​​しました。これには、この目的のために特別に設計されたポータルと呼ばれるコンポーネントがあります。

これですべてのユースケースが解決されるわけではありませんが、prop propagateSwipeをtrueに設定すると、ReactNativeモーダルでジェスチャーを有効にできます。

この問題はhttps://github.com/kmagiera/react-native-screens/issues/61に関連しているようです

AndroidではreactNative画面を使用しないでください。 'reanimated-bottom-sheet'でテストされ、正常に動作しています

if（Platform.OS === 'ios'）{
useScreens（）;
}

透過的なbgのこのReactナビゲーションモーダル設定は

ScreenOne：{
画面：ScreenOne、
ナビゲーションオプション：{
ジェスチャー有効：false
}、
}
{{
モード： 'モーダル'、
透明カード：true、
headerMode： 'none'、
cardStyle：{
backgroundColor： '透明'、
不透明度：1
}、
transitionConfig：（）=>（{
containerStyle：{
backgroundColor： '透明'、
}
}）
}

@osdnkはそれを修正しましたか？

これはとても苦痛でした。
私はそれをグーグルで解決する前にしばらく時間を費やしました、なぜ地球上で同じコンポーネントがiOSとAndroidで動作するのかを理解しようとしていますが、アプリケーション内のいくつかの場所でのみ動作します

同じ問題があります-モーダルでは機能しません。
誰かがこれに取り組んでいるのか、ステータスの更新を知っているのだろうか？
このライブラリを削除してRNパンハンドラーに切り替える必要がありますか？
なにか提案を ？

https://github.com/react-native-community/react-native-modalも機能しません

こっちも一緒。 RectButtonはhttps://github.com/react-native-community/react-native-modal内では機能しません

@deflorilemarului @ kesha-antonov @fauker
、どちらもあなたにいくつかの時間を惜しまますModal 、やModalそれらが基づいている-彼らはネイティブの依存関係をリンクする必要がない場合は、ベースのパッケージ（ react-nativeのModal ）が役に立ちます（基本的にはすべて試しました）。
gesture-関連するすべてのコンポーネント（ボトムシート-私たちの動作）は、Androidの<Modal>...</Modal>内にレンダリングされたときに、タッチ/スワイプなどを登録しません。
私が考えることができる3つの解決策があります：

1. モーダルを使用している場合は、他のライブラリを使用してください。 一部のスワイプベースのコンポーネントをPanResponder書き直す必要がある場合があります。 これは苦痛ですが、かなり簡単です。
2. portalsモーダルを使用します。 これらは実際にはポータルでもモーダルでもありません-ポータルは単一のアプリケーションホストがあるためreact-nativeでサポートされていません-しかし、ホストコンポーネントをアプリケーションのどこかに配置し、モーダルコンテンツをアプリスタックの上の絶対ビューでレンダリングすることで機能します。 これは機能するソリューションですが、子がコンテキストプロバイダーの上にレンダリングされるため、 useContext()呼び出しが失われます。 navigationコンテキストが失われるため、機能しません。
3. ナビゲーションライブラリが提供するモーダルを使用します（ react-navigation ）; これは機能しますが、APIは...良くありません-単一の画面をモーダルにすることができなかった場合、スタックのみをモーダルモードにすることができます。 これは私が固執する解決策です。

さて、最終的な解決策があります-ネイティブAndroid実装にパッチを適用するか（expoを使用している場合は不可能）、ライブラリでパッチを待ってから、それがexpoにマージされるまで待ちます。

ps
誤解しないでください。このライブラリは素晴らしいです。これに注がれている作業に感謝し、エンドユーザーのエクスペリエンスがどれほど優れているかを強調することはできませんが、このようなバグがあると、髪の毛を抜いたくなります。

その場合、ネイティブコンテキストを処理する必要があるライブラリはほとんどありません。

Androidの場合、 RNGHドキュメントに記載さ

MainActivity.javaファイルを更新します

それが役に立てば幸い

その場合、ネイティブコンテキストを処理する必要があるライブラリはほとんどありません。

Androidの場合、 RNGHドキュメントに記載さ

MainActivity.javaファイルを更新します

それが役に立てば幸い

はい、これは私にとって完璧に機能しました。 私は自分のAndroidアプリをスワイプ可能にするための解決策を探すことにほとんどイライラしました。

まだ動かない
モーダルを変更してすべてを表示する場合は、正常に機能します...

こんにちは@romanonthego 、

さて、最終的な解決策があります-ネイティブAndroid実装にパッチを適用するか（expoを使用している場合は不可能）、ライブラリでパッチを待ってから、それがexpoにマージされるまで待ちます。

ネイティブの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（互いに重複している可能性があります）に遭遇しました。

whop＃937

すごい！ ただし、 react-native-modalではまだ機能しません。

_ //編集：実際には、デフォルトのモーダルも機能しませんが、間違いがなければ1.6.0から機能するはずですか？ 何がうまくいかないのか調べようとします_

私は少し遊んで、問題を見つけることができました。 ただし、原因と修正方法がわかりません。

私の場合の問題は、私がいること、であるreact-native-gesture-handlerの内部動作しません@react-navigation/stackモーダル内部に配置された場合にはそう基本的に（、 Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler)失敗します）。

Stack Navigatorを切り取ったり、代わりにTab Navigatorを使用したりすると、それは魅力のように機能するので、StackNavigatorのせいであると確信しています。

関連するパッケージバージョン：

[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を使用しようとしましたが、それは不可能でした。最終的に、react-navigation画面アニメーションで解決しました。

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の私のreactnativeバージョンは、/ react-native-gesture-handler1.5.6と1.6.0の両方で試しました。

まだ^1.7.0

まだ機能していません：-1：

wix-navigationを使用します。 多分何か関連がありますか？

まあ、私は可能な回避策を見つけました、それは私たちが望んでいることを正確に実行し、iOSとAndroidの両方で機能します。

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

@steniowagnerはカスタムモーダルのようなものですか？ 私はそれをお勧めしません
react-navigationsまたはnative-stackmodalを使用するだけで、問題なく動作します。

うーん、react-navigationsでテストしませんでした（私の場合は多すぎるように聞こえます）が、現時点ではおそらくそれが最善の方法です。

ありがとう@ 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年以上前のものですが、これを修正する予定はありますか？

アプリのカスタムスライダーコンポーネントを作成しましたが、アプリのビューの多くがモーダルであるため、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は、 react-navigationのプッシュ関数をmodal: trueで使用して表示された場合に機能するようですが、ネイティブスタック（ enableScreens() / createNativeStackNavigator() ）を使用していない場合に限ります。

必要に応じて詳細をお知らせします。

react-native-modal-animatedはreact-native-gesture-handlerと連携します。これは、react-native-modal-animatedがビューを使用するだけでモーダルを作成するためです。

@flyskyなぜreact-native-modal-animatedがreact-native-modalのような個別のアクティビティを使用しない場合、それがすべての上にどのようにレンダリングされるのですか？ 絶対位置を使用している場合は、問題が発生する可能性があります。

@ waheedakhtar694 、absoluteを使用しています。 少なくとも私の場合、問題ありません：stuck_out_tongue_closed_eyes：

@jvaclavik https://github.com/callstack/react-native-paperと組み合わせて使用​​しました。これには、この目的のために特別に設計されたポータルと呼ばれるコンポーネントがあります。

@jvaclavikが言ったように、react-native-paperからPortalを使用して解決しました。
アプリをPaperProviderでラップしてから、モーダルをビューに変更し、 gestureHandlerRootHOCとポータルでラップしました
ボトムシートが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モーダルが頭痛の種となっている2つのプロジェクトがあります。 プロジェクトからモーダルを削除する必要はありません...これは設計の大幅な見直しです。 ：/

@DavidAPearsは、モーダルをgestureHandlerRootHOCでラップしてみましたか？

このようなもの ？

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

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

Portalからのreact-native-portalizeとgestureHandlerRootHOC組み合わせは私にとって

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

モーダルワークでcoverSreen = {false}を設定します。 しかし、私のモーダルが画面をカバーする必要があります

import {Platform、Modal} from'react-native ';
import {gestureHandlerRootHOC} from'react-native-gesture-handler ';
'../AnimatedBottomSheet'から{AnimatedBottomSheet}をインポートします。

const AnimatedBottomSheetWrapper = Platform.OS === 'android'？ ジェスチャハンドラルートHOC（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>
  );
};