React-native-gesture-handler: Funktioniert nicht in einem Modal

+1
eine Problemumgehung?

Ich benutze Modal momentan nicht, ich erstelle es einfach mit einer Ansicht in absoluter Position neu

Verwenden von Modal Screen für den Moment, nach dem Googeln und Chatten Modal von RN als zu viel Buggy-Sache

+1

Hallo, @martinezguillaume , @mordaha , @csto
Ich habe mir dieses Thema angesehen und ich nehme an, es geht nicht um unsere Bibliothek, sondern um RN Core.

@osdnk ist das reparabel?

+1 Geste funktioniert nicht modal

Ich bin heute auch auf diesen Fehler gestoßen.

Gleiches Problem. Geste funktioniert nicht modal unter Android .
Expo zum Beispiel

Auch für mich. Getestete PanResponder-Handler von React-Native auf Modal - funktionieren einwandfrei.

Ich habe ein paar Gedanken dazu: Wenn wir diese Bibliothek mit einem Android-Projekt verknüpfen, machen wir den nächsten Schritt

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

Und wir wissen, dass Modal ein separates Paket ist. Kann es sinnvoll sein, etwas Ähnliches damit zu tun?

Ich habe ein Standard-React Native Modal und dieses Problem ist aufgetreten.
Ich habe das Problem umgangen, indem ich einen neuen Bildschirm erstellt und als Modal angezeigt habe. Ich verwende React-Native-Navigation , also:

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

Gesten funktionieren sowohl unter iOS als auch unter Android wie erwartet, und ich erhalte immer noch einen transparenten Hintergrund, den ich von meinem ursprünglichen Modal wollte.

Ich habe mich eine Weile damit beschäftigt.

1. Es ist ein Problem von RNGH. Entschuldigung 😒
2. Es kommt vor, dass bc-Modale nicht unterhalb einer RN-Root-Ansicht gerendert werden.
3. Es kann behoben werden, indem der Mechanismus der Modale auf ähnliche Weise wie bei einem RNRootView ersetzt wird, indem es mit einer zusätzlichen Logik versehen wird. Siehe https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java
4. Ich habe jetzt keine Zeit dafür, es ist zeitaufwändig und erfordert wahrscheinlich das Kopieren von Code in einen RNGH-Kern auf der nativen Android-Seite.

Wenn jemand Zeit dazu hat und will, werde ich es gerne überprüfen und sofort zusammenführen, wenn es praktikabel und nicht zu hackig wäre.

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

Außerdem habe ich es vor zwei Monaten versucht.

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

Vielleicht könnte es eine Inspiration für jemanden sein 🤷‍♂️

Hey @osdnk, ich brauche diese Funktion für meine App, also dachte ich, ich könnte es versuchen, aber ich habe nicht viel Erfahrung mit RNGestureHandler oder mit Android. Könnten Sie mir mehr Einblick geben, was ich tun müsste, damit es funktioniert?
Außerdem habe ich mir Ihren vorherigen Versuch angesehen und möchte wissen, was fehlt, damit er fertig ist und ob er als Ausgangspunkt verwendet werden kann.

gleicher Fehler.

@kmagiera @osdnk irgendein Update dazu?
Sogar Touchable* funktionieren nicht im Modal und das ist frustrierend

+1. Ich benutze Reanimated-Bottom-Sheet mit Modal

Irgendwelche Updates? Oder vielleicht eine andere modale Komponente, die nicht unter diesem Problem leidet? RNs Modal funktioniert ehrlich gesagt ziemlich schlecht und ist voller Fehler (z. B. stecken bleiben, wenn es mit einem Alarm kombiniert wird)

@cristianoccazinsp Am Ende https://github.com/react-native-community/react-native-modal verwendet

Seltsam. Diese Komponente soll intern das Modal von react verwenden. Geschafft
einen Unterschied für Sie machen?

El jue., 30. Mai 2019, 14:38 Uhr, Mars Lan [email protected]
escribió:

@cristianoccazinsp https://github.com/cristianoccazinsp Am Ende war ich da
Verwenden von https://github.com/react-native-community/react-native-modal

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/kmagiera/react-native-gesture-handler/issues/139?email_source=notifications&email_token=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWS7SOQ#issuecomment-497416506 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
.

@cristianoccazinsp Es wird nur das Modal von RN verwendet, um den Bildschirm abzudecken. coverScreen auf false

@cristianoccazinsp Es wird nur das Modal von RN verwendet, um den Bildschirm abzudecken. coverScreen auf false

Aber gibt es eine Möglichkeit, mit dieser Requisite, die nicht in der Root-Komponente der App gerendert ist, Vollbild-Modal anzuzeigen?

@jvaclavik Ich habe es in Verbindung mit https://github.com/callstack/react-native-paper verwendet , das eine Komponente namens Portal enthält, die speziell für diesen Zweck entwickelt wurde.

Dies löst möglicherweise nicht alle Anwendungsfälle, aber Sie können Gesten im nativen Reaktionsmodal aktivieren, wenn Sie die Requisite propagateSwipe auf true setzen.

Dieses Problem scheint mit https://github.com/kmagiera/react-native-screens/issues/61 in Zusammenhang zu stehen

Verwenden Sie nicht reagieren native Bildschirme in Android. Getestet und funktioniert gut mit 'Reanimated-Bottom-Sheet'

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

Diese Konfiguration von React Navigation Modal für transparentes BG ist

ScreenOne: {
Bildschirm: ScreenOne,
navigationOptions: {
gesturesEnabled: false
},
}}
{
Modus: 'modal',
transparentCard: wahr,
headerMode: 'none',
cardStyle: {
backgroundColor: 'transparent',
Deckkraft: 1
},
TransitionConfig: () => ({
containerStyle: {
backgroundColor: 'transparent',
}}
})
}}

@osdnk behoben?

Dieser war so viel Schmerz.
Ich habe einige Zeit damit verbracht, vor dem Entschluss, es zu googeln, meine Haare herauszuziehen und herauszufinden, warum auf der Erde dieselbe Komponente unter iOS und Android funktioniert, aber nur an einigen Stellen innerhalb der Anwendung

Wir haben das gleiche Problem - es funktioniert nicht auf Modal.
Ich frage mich, ob jemand daran arbeitet oder von einer Statusaktualisierung weiß.
Müssen wir diese Bibliothek löschen und zu RN-Pan-Handlern wechseln?
irgendein Vorschlag ?

https://github.com/react-native-community/react-native-modal funktioniert auch nicht

Hier gilt das gleiche. RectButton funktioniert nicht in https://github.com/react-native-community/react-native-modal

@deflorilemarului @ kesha-antonov @fauker
Sie sparen Zeit, weder Modal noch Modal -basierte Pakete (wenn Sie keine nativen Abhängigkeiten verknüpfen müssen - basieren sie auf react-native 's Modal ) wird Ihnen helfen (ich habe im Grunde alle ausprobiert).
Alle gesture- -bezogenen Komponenten (Bottomsheet-Verhalten für uns) registrieren keine Berührungen / Wischbewegungen usw., wenn sie in <Modal>...</Modal> auf Android gerendert werden.
Ich kann mir drei Lösungen vorstellen:

1. Verwenden Sie eine andere Bibliothek, wenn Sie Modalitäten verwenden. Möglicherweise müssen Sie einige wischbasierte Komponenten in PanResponder umschreiben. das ist Schmerz, aber ziemlich einfach;
2. Verwenden Sie Modalitäten, die portals . Es handelt sich weder um Portale noch um Modalportale. Portale werden von React-Native nicht unterstützt, da es einen einzelnen Anwendungshost gibt. Sie platzieren jedoch Host Component irgendwo in Ihrer Anwendung und rendern Modal-Inhalte in absoluter Ansicht über dem App-Stapel. Diese Lösung funktioniert, aber Sie verlieren alle useContext() -Anrufe, weil Kinder über Kontextanbietern gerendert werden. funktioniert bei uns nicht, da navigation Kontext verloren geht;
3. Verwenden Sie die von der Navigationsbibliothek bereitgestellten Modalitäten ( react-navigation ). Dieser funktioniert, aber die API ist ... nicht gut - für einen kann man einen einzelnen Bildschirm nicht modal machen, nur ein Stapel kann sich im modalen Modus befinden. Dies ist eine Lösung, bei der ich bleibe.

Nun, es gibt eine endgültige Lösung - Patch native Android-Implementierung (nicht möglich, wenn Sie expo verwenden) oder warten Sie auf Patch in einer Bibliothek und warten Sie dann, bis es in expo verschmolzen.

ps
Versteh mich nicht falsch, diese Bibliothek ist erstaunlich und ich kann nicht genug betonen, wie sehr ich es schätze, dass Arbeit in diese Bibliothek gesteckt wird und wie viel besser die Erfahrung für den Endbenutzer ist, aber Fehler wie dieser bringen mich dazu, mir die Haare auszureißen.

Nur wenige Bibliotheken erfordern, dass wir uns mit dem nativen Kontext befassen, wenn ja:

Für Android benötigen wir eine besondere Pflege, wie im RNGH-Dokument angegeben :

Aktualisieren Sie Ihre MainActivity.java -Datei

Ich hoffe es hilft

Nur wenige Bibliotheken erfordern, dass wir uns mit dem nativen Kontext befassen, wenn ja:

Für Android benötigen wir eine besondere Pflege, wie im RNGH-Dokument angegeben :

Aktualisieren Sie Ihre MainActivity.java -Datei

Ich hoffe es hilft

Ja, das hat bei mir perfekt funktioniert. Ich war fast frustriert, als ich nach Lösungen suchte, um meine Android-App swippbar zu machen.

funktioniert immer noch nicht
Wenn Sie das Modal ändern, um alles anzuzeigen, funktioniert es einwandfrei ...

Hallo @romanonthego ,

Nun, es gibt eine endgültige Lösung - Patch native Android-Implementierung (nicht möglich, wenn Sie expo verwenden) oder warten Sie auf Patch in einer Bibliothek und warten Sie dann, bis es in expo verschmolzen.

Können Sie mir bitte sagen, was ich neben meinem nativen Android-Code patchen soll?

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

@osdnk Das ist aufregend. Funktioniert es auch mit einem DialogFragment ?

Nachdem ich # 937 ausprobiert hatte, stellte ich fest, dass es bei mir nicht funktionierte ...

Vielleicht liegt es daran, dass ich die reaktionsnative Navigation von wix verwende? Soweit ich weiß, ist jeder Bildschirm mit der gestureHandlerRootHOC registriert (die Bibliothek funktioniert perfekt mit normalen, nicht modalen Ansichten).

Dies ist ein Fragment des Bildschirms, in dem ich den RectButton in einem Modal ausprobiert habe (im Grunde wie im Dokument-Update).

  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;
  };

Das Modal wird geladen, wenn es soll, aber der RectButton löst das onPress-Ereignis nicht aus. Ich habe versucht, mit einer brandneuen App eine minimal reproduzierbare Demo zu erstellen, bin dann aber auf # 848 # 676 # 835 gestoßen (mögliche Duplikate voneinander).

Whop # 937

Das ist erstaunlich! Mit react-native-modal funktioniert es bei mir aber immer noch nicht!

_ // edit: Eigentlich funktioniert das Standardmodal auch nicht, aber es sollte ab 1.6.0 funktionieren, wenn ich mich nicht irre ? Ich werde versuchen herauszufinden, was falsch läuft.

Ich habe ein bisschen herumgespielt und konnte das Problem finden. Ich bin mir jedoch nicht sicher, was es verursacht und wie es behoben werden kann.

Das Problem in meinem Fall ist, dass I react-native-gesture-handler nicht in einem @react-navigation/stack funktioniert, wenn es in einem Modal platziert wird (also im Grunde Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) schlägt fehl).

Wenn ich den Stack Navigator ausschneide oder stattdessen den Tab Navigator verwende, funktioniert das wie ein Zauber, daher bin ich mir ziemlich sicher, dass es die Schuld des Stack Navigators ist.

Relevante Paketversionen:

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

Ich werde versuchen, so schnell wie möglich ein Demo-Repo einzurichten. Lassen Sie mich wissen, ob ich weitere hilfreiche Informationen bereitstellen kann.

Hier ist eine Demo-App zu (fast leer von npx react-native init ), die das Problem zeigt. Sie können den Stack-Navigator in der App umschalten und sehen, wie das PanGestureHandler funktionsfähig und funktionsunfähig wird.

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

Ich habe ein ähnliches Problem. Es scheint, dass der Stack.Navigator unter Android nicht gut funktioniert. Es spielt keine Rolle, ob ich einen mode = "modal" oder "card" verwende.

Also spielte ich herum und hatte den folgenden Code

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>
  )

}

Dann habe ich diese Zeile entfernt;
enableScreens();

Und dann hat es auf Android richtig funktioniert.

Ein kleiner Trick, um es in einem Modal zu lösen:

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

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

Ich habe ein ähnliches Problem. Irgendeine Arbeit herum?

Ich habe versucht, https://github.com/osdnk/react-native-reanimated-bottom-sheet in einem Modal zu verwenden, und es ist nicht möglich. Ich habe es schließlich mit der Animation des React-Navigation-Bildschirms gelöst:

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

Ein kleiner Trick, um es in einem Modal zu lösen:

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

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

Hey @gideaoms . Ich frage mich, wie Ihr Kommentar hier unbemerkt blieb. Es macht definitiv den Trick. Danke, Mann!

Hier ist eine Demo-App zu (fast leer von npx react-native init ), die das Problem zeigt. Sie können den Stack-Navigator in der App umschalten und sehen, wie das PanGestureHandler funktionsfähig und funktionsunfähig wird.

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

Was ist dann die Lösung?

Ich habe immer noch das gleiche Problem ...
Irgendeine Lösung oder noch nichts?

Dies ist in 1.6.0 immer noch ein Problem

Versuchte alle oben genannten Vorschläge, aber noch kein Glück. Bitte helfen Sie, es ist wirklich frustrierend.
Meine native React-Version in 0.62.2 wurde mit beiden / react-native-gesture-handler 1.5.6 und 1.6.0 versucht.

immer noch ein Problem mit ^1.7.0

Funktioniert immer noch nicht: -1:

Wir verwenden die Wix-Navigation. Vielleicht etwas verwandtes?

Nun, ich habe eine mögliche Problemumgehung gefunden. Sie macht genau das, was wir wollen und funktioniert sowohl für iOS als auch für Android.

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

@steniowagner ist das wie ein benutzerdefiniertes Modal? Ich würde es nicht empfehlen
Gehen Sie einfach mit React-Navigations oder Native-Stack-Modal, es funktioniert gut damit.

hmm, habe nicht mit Reaktionsnavigationen getestet (klang für meinen Fall zu viel), aber vielleicht ist es im Moment der beste Weg.

Vielen Dank @ a-eid!

Laut den Dokumenten
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage -with-modals-on-android

aber immer noch nicht für mich gearbeitet.

@gideaoms, dass Tricks für Button funktionieren, aber mein Anwendungsfall ist, PinchGestureHandler innerhalb des Modals zu verwenden.

Ein kleiner Trick, um es in einem Modal zu lösen:

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

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

Dieses Problem ist älter als 2 Jahre. Gibt es Pläne, dies zu beheben?

Ich habe benutzerdefinierte Slider-Komponenten für meine App erstellt und kann sie unter Android überhaupt nicht verwenden, da viele Ansichten in meiner App Modals sind

Ich habe jeden Bildschirm und jede Modal-Komponente in ein gestureHandlerRootHoC eingewickelt (mit wix / react-native-navigation)

Ich habe versucht, sowohl den Bildschirm als auch die Komponente mit gestureHandlerRootHoc ohne Erfolg. Ich habe den RectButton -Ansatz nicht ausprobiert, da ich ein PanGestureHandler benötige, um das Swipe-Down-to-Dism-Verhalten auf dem Modal zu implementieren. Es ist frustrierend, weil es unter iOS perfekt funktioniert. Da ich react-native-modal , das tatsächlich mit Swipe-to-Dism-Out-of-the-Box geliefert wird, habe ich stattdessen sogar versucht, diesen Ansatz zu verwenden Es funktioniert, solange Sie keinen scrollbaren Inhalt im Modal haben, da es dann sowohl auf iOS als auch auf Android fehlerhaft ist, also stecke ich irgendwie fest ...

Um zusammenzufassen:

1. ❌ RNGH funktioniert nicht in der react-native <Modal> -Komponente von gestureHandlerRootHOC )
2. ✅ RNGH funktioniert in einem Bildschirm von wix/react-native-navigation , der mit Navigation.showModal angezeigt wird (obwohl der Bildschirm in einen gestureHandlerRootHOC eingewickelt ist).
3. ✅ RNGH funktioniert anscheinend, wenn es mit der Push-Funktion von react-navigation mit modal: true angezeigt wird, aber nur, wenn der native Stack nicht verwendet wird ( enableScreens() / createNativeStackNavigator() ).

Bei Bedarf kann ich weitere Details angeben.

React-Native-Modal-Animated funktioniert mit React-Native-Gesten-Handler, da React-Native-Modal-Animated ein Modal nur mithilfe einer Ansicht erstellt.

@flyskywhy wenn -Native-Modal-Animated keine separate Aktivität wie React-Native-Modal verwendet, wie wird es dann über alles gerendert ? Wenn eine absolute Position verwendet wird, kann dies in einigen Fällen zu Problemen führen.

@ waheedakhtar694 , es wird absolut verwendet. Zumindest in meinem Fall kein Problem: stecken_out_tongue_closed_eyes:

@jvaclavik Ich habe es in Verbindung mit https://github.com/callstack/react-native-paper verwendet , das eine Komponente namens Portal enthält, die speziell für diesen Zweck entwickelt wurde.

Gelöst mit Portal aus reaktionsnativem Papier, wie
Ich habe meine App mit PaperProvider verpackt , dann Modals in Views geändert und sie mit gestureHandlerRootHOC und Portal verpackt
Jetzt funktioniert Bottom Sheet unter Android 😍

_EDIT: Aus irgendeinem Grund funktionieren Pan-Gesten, aber onPress-Ereignisse funktionieren nicht (aber Welligkeit wird angezeigt) ...
BEARBEITEN 2: Das war ein Problem mit der Bibliothek, die ich verwendet habe. Ich habe es behoben, indem berührbare Importe von "React-Native" in "React-Native-Gesture-Handler" geändert wurden. _

Hier ist ein Code, den Sie ausprobieren können

/*
 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>
  )
}

Es funktioniert für mich:
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

Gibt es hierzu Neuigkeiten? Wir haben zwei Projekte, in denen iOS wie erwartet funktioniert, aber Android-Modalitäten bereiten Kopfschmerzen. Wir möchten lieber keine Modalitäten aus den Projekten entfernen ... das ist eine große Designüberholung. : /

@DavidAPears Haben Sie versucht, Ihre Modalitäten in gestureHandlerRootHOC verpacken?

etwas wie das ?

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

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

Die Kombination von Portal aus react-native-portalize und gestureHandlerRootHOC funktioniert bei mir. Sowas in der Art:

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

Setzen von coverSreen = {false} für modale Werke. Aber muss mein Modal den Bildschirm abdecken

{Platform, Modal} aus 'react-native' importieren;
{gestureHandlerRootHOC} aus 'react-native-gesture-handler' importieren;
{AnimatedBottomSheet} aus '../AnimatedBottomSheet' importieren;

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

Ich bin mir nicht sicher, ob dies jemandem helfen wird. Ich hatte auch Probleme bei der Verwendung dieser Bibliothek mit React-Native-Modal, aber neben dem Umschließen von Kindern mit Modal GestureHandlerRootHOC (dies funktioniert gut für Schaltflächen, aber ich hatte Probleme mit der Texteingabe in Modal + VermeidenKeyboard = true und bei jedem Tastendruck wurde die Tastatur geschlossen.) Das einzige, was ich getan habe, ist ein modaler Kinder-Wrapper, ungefähr so:

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>
  );
};