React-native-gesture-handler: No funciona en modal

+1
alguna solución?

No uso Modal por ahora, solo lo vuelvo a crear con una Vista en posición absoluta

usando la pantalla modal por ahora, después de buscar en Google y chats, Modal de RN consideró demasiado error

+1

Hola, @martinezguillaume , @mordaha , @csto
Eché un vistazo a este problema y supongo que no se trata de nuestra biblioteca, sino de RN Core.

@osdnk, ¿esto se puede arreglar?

El gesto +1 no funciona en modal

También encontré este error hoy.

El mismo problema. Gesture no funciona en modal en Android .
Expo por ejemplo

Lo mismo para mi. Controladores PanResponder de react-native probados en modal - funciona bien.

Tengo una idea sobre esto: cuando vinculamos esta biblioteca al proyecto de Android, estamos haciendo el siguiente paso

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

Y sabemos que modal es un paquete separado. ¿Puede tener sentido hacer algo igual con él?

Estaba usando un React Native Modal estándar y estaba experimentando este problema.
Resolví el problema creando una nueva pantalla y mostrándola como modal. Estoy usando react-native-navigation , entonces:

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

Los gestos funcionan como se esperaba tanto en iOS como en Android, y todavía obtengo un fondo transparente que quería de mi modal original.

Lo he investigado durante un tiempo.

1. Es un problema de RNGH. Lo siento 😒
2. Sucede que los modales bc no se representan debajo de una vista raíz de RN.
3. Se puede arreglar reemplazando el mecanismo de los modales de manera similar a como lo hacemos con un RNRootView envolviéndolo con algo de lógica adicional. Ver https://github.com/kmagiera/react-native-gesture-handler/blob/master/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java
4. No tengo tiempo para hacerlo ahora, es un trabajo que requiere mucho tiempo y probablemente requiera copiar algo de código en un núcleo RNGH en el lado nativo de Android.

Si alguien quiere y tiene tiempo para hacerlo, felizmente lo revisaré y lo fusionaré de inmediato si es viable y no demasiado complicado.

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

Además, lo intenté hace dos meses.

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

Tal vez podría ser una inspiración para alguien 🤷‍♂️

Hola @osdnk Necesito esta función para mi aplicación, así que pensé que podría probarla, pero no tengo mucha experiencia con RNGestureHandler o con Android. ¿Podría darme más información sobre lo que debería hacer para que funcione?
También estaba mirando su intento anterior, y me gustaría saber qué falta para que esté terminado, y si podría usarse como punto de partida.

mismo error.

@kmagiera @osdnk ¿ alguna actualización sobre esto?
incluso los Touchable* no funcionan dentro del modal y esto es frustrante

+1. Yo uso la hoja inferior reanimada con modal

¿Alguna actualización? ¿O quizás algún otro componente modal que no padezca este problema? Honestamente, el modal de RN funciona bastante mal y está lleno de errores (como atascarse si se combina con una alerta)

@cristianoccazinsp Terminé usando https://github.com/react-native-community/react-native-modal

Impar. Se supone que ese componente usa el modal de react internamente. Lo hizo
hacer una diferencia para ti?

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

@cristianoccazinsp https://github.com/cristianoccazinsp Terminé
usando https://github.com/react-native-community/react-native-modal

-
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/kmagiera/react-native-gesture-handler/issues/139?email_source=notifications&email_token=ALU263ACF3LNSRSPFWR45ELPYAGJTA5CNFSM4EZ6UZL2YY3PNVWWK3TUL52HS4DVDMVREXWWK3TUL52HS4DFZDMVREXWWK3TUL52HS4DVMVREX
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ALU263GRH2KHBXUZBGHNKA3PYAGJTANCNFSM4EZ6UZLQ
.

@cristianoccazinsp Solo usa el modal de RN para cubrir la pantalla, que puede desactivarse configurando coverScreen en false

@cristianoccazinsp Solo usa el modal de RN para cubrir la pantalla, que puede desactivarse configurando coverScreen en false

Pero, ¿hay alguna manera de mostrar el modo de pantalla completa con este accesorio que no se representa en el componente raíz de la aplicación?

@jvaclavik Lo usé junto con https://github.com/callstack/react-native-paper , que tiene un componente llamado Portal diseñado específicamente para este propósito.

Es posible que esto no resuelva todos los casos de uso, pero puede habilitar los gestos en el modal nativo de reacción al establecer el prop propagateSwipe en verdadero.

Este problema parece estar relacionado con https://github.com/kmagiera/react-native-screens/issues/61

No use reaccionar pantallas nativas en Android. Probado y funcionando bien con 'hoja inferior reanimada'

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

Esta configuración modal de React Navigation para bg transparente es

ScreenOne: {
pantalla: ScreenOne,
navigationOptions: {
gesturesEnabled: false
},
}
{
modo: 'modal',
transparentCard: cierto,
headerMode: 'ninguno',
cardStyle: {
backgroundColor: 'transparente',
opacidad: 1
},
transiciónConfig: () => ({
containerStyle: {
backgroundColor: 'transparente',
}
})
}

@osdnk lo arregló?

Este fue mucho dolor.
Pasé un tiempo antes de decidirme a buscarlo en Google, me estiré los pelos tratando de averiguar por qué diablos el mismo componente funciona en iOS y en Android, pero solo en algunos lugares dentro de la aplicación.

tenemos el mismo problema, no funciona en modal.
Me pregunto si alguien está trabajando en esto o sabe de alguna actualización de estado.
¿Necesitamos eliminar esta biblioteca y cambiar a controladores de pan RN?
cualquier sugerencia ?

https://github.com/react-native-community/react-native-modal tampoco funciona

Igual que aquí. RectButton no funciona dentro de https://github.com/react-native-community/react-native-modal

@deflorilemarului @
Le ahorrará algo de tiempo, ni Modal , ni Modal paquetes basados ​​en (si no requieren que vincule las dependencias nativas, se basan en react-native 's Modal ) te ayudará (las he probado todas, básicamente).
Todos los componentes relacionados con gesture- (comportamiento de la hoja inferior para nosotros) no registrarán ningún toque / deslizamiento, etc. cuando se muestren dentro de <Modal>...</Modal> en Android;
Hay 3 soluciones en las que puedo pensar:

1. Use cualquier otra biblioteca si está usando modales. Es posible que necesite reescribir algunos componentes basados ​​en deslizamiento a PanResponder ; esto es doloroso, pero bastante sencillo;
2. Utilice modales que sean portals . En realidad, no son portales ni modales (los portales no son compatibles con react-native porque hay un solo host de aplicación), pero funcionan colocando el componente de host en algún lugar de la aplicación y muestran el contenido modal en vista absoluta sobre la pila de aplicaciones; esta es una solución que funciona, pero perderá las llamadas useContext() debido a que los niños se representan por encima de los proveedores de contexto; no funciona para nosotros, ya que navigation se pierde el contexto;
3. Utilice los modales proporcionados por la biblioteca de navegación ( react-navigation ); éste funciona, pero la API ... no es buena - para uno no podría hacer que una sola pantalla sea modal, solo una pila puede estar en modo modal; esta es la solución con la que me quedo.

Bueno, hay una solución final: parchear la implementación nativa de Android (no es posible si está usando expo) o esperar el parche en una biblioteca y luego esperar hasta que se fusione en expo.

PD
No me malinterpretes, esta biblioteca es increíble, y no puedo enfatizar lo suficiente cuánto aprecio el trabajo que se dedica a esto y cuánto mejor es la experiencia para el usuario final, pero errores como este me hacen querer sacarme los pelos.

Pocas bibliotecas requieren que nos ocupemos del contexto nativo, si es así:

Para Android, necesitaremos un cuidado especial como se indica en el documento RNGH :

Actualice su archivo MainActivity.java

Espero eso ayude

Pocas bibliotecas requieren que nos ocupemos del contexto nativo, si es así:

Para Android, necesitaremos un cuidado especial como se indica en el documento RNGH :

Actualice su archivo MainActivity.java

Espero eso ayude

Sí, esto funcionó perfectamente para mí. Casi me frustré al buscar soluciones para hacer que mi aplicación de Android se pueda deslizar.

sigue sin funcionar
si cambia modal para ver que todo funciona bien ...

Hola @romanonthego ,

Bueno, hay una solución final: parchear la implementación nativa de Android (no es posible si está usando expo) o esperar el parche en una biblioteca y luego esperar hasta que se fusione en expo.

¿Puede decirme qué parchear en mi código nativo de Android?

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

@osdnk Eso es emocionante. ¿Funcionará también con DialogFragment ?

Después de probar el n. ° 937, descubrí que no me funcionaba ...

Tal vez sea porque estoy usando la navegación nativa de reacción de wix. Hasta donde yo sé, todas y cada una de las pantallas están registradas con el gestoHandlerRootHOC (la biblioteca funciona perfectamente con vistas normales no modales).

Este es un fragmento de la pantalla en la que probé el RectButton en un modal (básicamente como está en la actualización del documento)

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

El modal se carga cuando se supone que debe hacerlo, pero RectButton no activa el evento onPress. Intenté hacer una demostración mínima reproducible con una nueva aplicación, pero luego me encontré con # 848 # 676 # 835 (posibles duplicados entre sí).

whop # 937

¡Eso es increíble! ¡Sin embargo, todavía no funciona con react-native-modal para mí!

_ // editar: En realidad, el modal predeterminado tampoco funciona, pero debería hacerlo, a partir de 1.6.0 si no me equivoco . Tratará de averiguar qué va mal_

He jugado un poco y pude encontrar el problema. Sin embargo, no estoy seguro de qué lo está causando y cómo solucionarlo.

El problema en mi caso es que react-native-gesture-handler no funcionará dentro de un @react-navigation/stack , si se coloca dentro de un modal (así que básicamente Stack.Navigator > SomeScreenComponent > Modal > gestureHandlerRootHOC(PanGestureHandler) falla).

Si elimino el Navegador de pila o uso el Navegador de pestañas, funciona como un encanto, así que estoy bastante seguro de que es culpa de los Navegadores de pila.

Versiones de paquetes relevantes:

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

Intentaré configurar un repositorio de demostración lo antes posible, avíseme si puedo proporcionar más información útil.

Aquí hay una aplicación de demostración para (casi en blanco desde npx react-native init ), que mostrará el problema. Puede alternar el navegador de pila dentro de la aplicación y ver cómo PanGestureHandler vuelve funcional y no funcional.

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

Tengo un problema similar. Parece que Stack.Navigator no funciona bien en Android. No importa si uso un modo = "modal" o "tarjeta".

Entonces estaba jugando y tenía el siguiente código

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

}

Luego eliminé esta línea;
enableScreens();

Y luego funcionó correctamente en Android.

Un pequeño truco para resolverlo dentro de un modal:

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

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

Estoy teniendo un problema similar. ¿Alguna solución?

Estaba intentando usar https://github.com/osdnk/react-native-reanimated-bottom-sheet dentro de un modal, y no es posible, finalmente lo resolví con la animación de pantalla de navegación de reacción:

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

Un pequeño truco para resolverlo dentro de un modal:

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

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

Hola @gideaoms . Me pregunto cómo pasó desapercibido tu comentario aquí. Definitivamente funciona. ¡Gracias hombre!

Aquí hay una aplicación de demostración para (casi en blanco desde npx react-native init ), que mostrará el problema. Puede alternar el navegador de pila dentro de la aplicación y ver cómo PanGestureHandler vuelve funcional y no funcional.

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

entonces, cual es la solucion?

Sigo teniendo el mismo problema ...
¿Alguna solución o nada todavía?

Esto sigue siendo un problema en 1.6.0

Probé todas las sugerencias mencionadas anteriormente, pero aún no tuve suerte. Por favor ayuda, es realmente frustrante.
Mi versión reaccionar nativa en 0.62.2 probó con / react-native-gesto-handler 1.5.6 y 1.6.0.

sigue siendo un problema en ^1.7.0

Todavía no funciona: -1:

Usamos wix-navigation. ¿Quizás algo relacionado?

Bueno, encontré una posible solución, hace exactamente lo que queremos y funciona tanto para iOS como para Android.

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

@steniowagner ¿ es eso como un modal personalizado? No lo recomendaría
simplemente vaya con navegaciones de reacción o modal de pila nativa, funciona bien.

hmm, no probé con navegaciones de reacción (sonaba demasiado para mi caso), pero tal vez sea la mejor manera en este momento.

¡Gracias @ a-eid!

Según los documentos
https://docs.swmansion.com/react-native-gesture-handler/docs/#usage -with-modals-on-android

pero todavía no funcionó para mí.

@gideaoms que los trucos pueden funcionar para el botón, pero mi caso de uso es usar PinchGestureHandler dentro del modal.

Un pequeño truco para resolverlo dentro de un modal:

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

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

Este problema tiene más de 2 años, ¿hay algún plan para solucionarlo?

He creado componentes deslizantes personalizados para mi aplicación y no puedo usarlos en absoluto en Android, ya que muchas vistas en mi aplicación son Modales

Envolví cada pantalla y componente modal en un gestureHandlerRootHoC (usando wix / react-native-navigation)

Intenté envolver tanto la pantalla como el componente con gestureHandlerRootHoc sin éxito. No probé el enfoque RectButton porque necesito un PanGestureHandler para implementar el comportamiento de deslizar hacia abajo para descartar en el modal. Es frustrante porque funciona perfectamente en iOS y, dado que estoy usando react-native-modal , que en realidad viene con deslizar para descartar, incluso he intentado usar ese enfoque y funciona siempre que no tenga contenido desplazable dentro del modal porque entonces tiene errores tanto en iOS como en Android, así que estoy un poco atascado ...

Para resumir:

1. ❌ RNGH no funciona en react-native 's <Modal> componente (a pesar de que el componente está envuelto en un gestureHandlerRootHOC )
2. ✅ RNGH funciona en una pantalla de wix/react-native-navigation que se muestra usando Navigation.showModal (aunque la pantalla está envuelta en un gestureHandlerRootHOC )
3. ✅ RNGH aparentemente funciona si se muestra usando la función push de react-navigation con modal: true , pero solo cuando no se usa la pila nativa ( enableScreens() / createNativeStackNavigator() ).

Puedo proporcionar más detalles si es necesario.

react-native-modal-animated funciona con react-native-gesto-handler, porque react-native-modal-animated crea un Modal simplemente usando una Vista.

@flyskywhy si react-native-modal-animated no usa una actividad separada como react-native-modal, entonces, ¿cómo se procesa encima de todo? Si está usando una posición absoluta, podría ser un problema en algunos casos.

@ waheedakhtar694 , está usando absoluto. Al menos en mi caso, no hay problema: stick_out_tongue_closed_eyes:

@jvaclavik Lo usé junto con https://github.com/callstack/react-native-paper , que tiene un componente llamado Portal diseñado específicamente para este propósito.

Resuelto usando Portal de react-native-paper como dijo @jvaclavik .
Envolví mi aplicación con PaperProvider , luego cambié Modals a Vistas y los envolví con GestHandlerRootHOC y Portal.
Ahora la hoja inferior funciona en Android 😍

_EDIT: por alguna razón, los gestos de panorámica funcionan, pero los eventos onPress no funcionan (pero se muestra la ondulación) ...
EDITAR 2: ese fue un problema con la biblioteca que usé, lo arreglé cambiando las importaciones táctiles de "react-native" a "react-native-gesto-handler" _

Aquí hay un código que puedes probar

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

Funciona para mi:
<TouchableWithoutFeedback onPress={() => { console.log("press"); }} > <Text> <RectButton> ... </RectButton> </Text> </TouchableWithoutFeedback>

¿Algún avance en esto? Tenemos dos proyectos en los que iOS funciona como se esperaba, pero los modales de Android están resultando un dolor de cabeza. Preferiríamos no tener que eliminar modales de los proyectos ... eso es una gran revisión de diseño. : /

@DavidAPears, ¿has intentado envolver tus modales en gestureHandlerRootHOC ?

algo como esto ?

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

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

La combinación de Portal de react-native-portalize y gestureHandlerRootHOC funciona para mí. Algo como eso:

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

configurando coverSreen = {false} en trabajos modales. Pero necesito que mi modal cubra la pantalla

importar {Plataforma, Modal} de 'react-native';
importar {GestoHandlerRootHOC} desde 'react-native-Gestion-Handler';
importar {AnimatedBottomSheet} desde '../AnimatedBottomSheet';

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

No estoy seguro de si esto va a ayudar a alguien, también tuve problemas al usar esta biblioteca con react-native-modal, pero además de envolver a los hijos del gesto modalHandlerRootHOC (esto funciona bien para los botones, pero tuve problemas para ingresar texto en modal + evitar = verdadero y con cada pulsación de la tecla, el teclado se cerraba) Así que lo único que hice fue convertirlo en envoltorio modal para niños, algo como esto:

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