[react-native-modalize] swipeable not working on android #41

TrinhCDanh · 2019-07-21T16:54:53Z

Hi, i'm using your library with react-native-router-flux and i had a problem on android, swipeable does not work. Modal builds without errors, works on IOS but android does not respond to swipes. (Sorry, my english is not good :) )

"react-native-modalize": "^1.1.1"
"react-native-gesture-handler": "^1.3.0" (react-native link react-native-gesture-handler)
"react-native": "^0.59.8"
"react-native-router-flux": "4.0.6"

Thank you in advance :)

jeremybarbet · 2019-07-22T10:30:05Z

The issue might be the use of the withReactModal props, I haven't test it for a bit of time. Can you try to take it out and see if it works?

If you still have issue, could you create a simple repo containing the issue, so I could run it and look at it :)

JonnyBurger · 2019-07-29T14:30:03Z

Hey, just hit this issue as awell.
It indeed has to do with the modal, I made a repro: https://snack.expo.io/@jonnyburger/sponaneous-edamame

Of course one could put the modal at the top of the React tree to circumvent this problem, but it would be nice if we could colocate the code in the same component from where you are calling the modal.

TrinhCDanh · 2019-07-30T03:51:21Z

Thanks everyone, I will try again. If I still have that issue, I will notify everyone later :)

jeremybarbet · 2019-07-30T14:44:35Z

@JonnyBurger That's indeed really broken.

I never use Modalize with withReactModal since it should disappear from the react-native core, and I'm working with react-native-navigation all the time that have showOverlay function that makes it super easy to display anything wherever you are in your app.

With that being said, we need a new one to do it. I haven't check new react-navigation API in details, but they must have a way to show overlay.
We still need a solution for users not using both of these navigators.

I have no answer yet, I'm open for ideas or feedbacks

saurabhdsachan · 2019-07-31T04:12:54Z

Hi,
I am also facing a similar issue, with updated react, react-native and gesture lib.

"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-modalize": "^1.1.1",
"react-navigation": "^3.11.1"

jeremybarbet · 2019-07-31T09:02:41Z

@saurabhdsachan Are you using either <Modal> (from react-native) or withReactModal={true}?

saurabhdsachan · 2019-07-31T09:31:28Z

@saurabhdsachan Are you using either <Modal> (from react-native) or withReactModal={true}?

Hi @jeremybarbet ,
No, I am not using <Modal> or withReactModal={true}
here is the sample file.

import React from 'react';
import { StyleSheet, Text, View, Dimensions, TextInput } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import Modalize from 'react-native-modalize';
import faker from 'faker';
import { Button } from '@components/index';

const { width } = Dimensions.get('window');

export default class Designs extends React.PureComponent {
  static navigationOptions = {
    header: null,
  };
  modal = React.createRef();

  renderContent = () => [
    <View style={s.content__header} key='0'>
      <Text style={s.content__heading}>Article title</Text>
      <Text style={s.content__subheading}>November 11st 2018</Text>
    </View>,

    <View style={s.content__inside} key='1'>
      <Text style={s.content__paragraph}>{faker.lorem.paragraphs(3)}</Text>
      <Text style={[s.content__subheading, { marginTop: 30 }]}>Horizontal ScrollView</Text>

      <ScrollView style={s.content__scrollview} horizontal>
        {Array(5)
          .fill(0)
          .map((_, i) => (
            <View key={i} style={s.content__block} />
          ))}
      </ScrollView>

      <Text style={s.content__paragraph}>{faker.lorem.paragraphs(2)}</Text>
      <Text style={[s.content__subheading, { marginTop: 30 }]}>Vertical ScrollView</Text>

      <ScrollView style={[s.content__scrollview, { height: 200 }]}>
        {Array(5)
          .fill(0)
          .map((_, i) => (
            <View key={i} style={[s.content__block, { width, marginBottom: 20 }]} />
          ))}
      </ScrollView>

      <TextInput style={s.content__input} placeholder='Type your username' />
    </View>,
  ];

  onClosed = () => {
    const { onClosed } = this.props;

    if (onClosed) {
      onClosed();
    }
  };

  openModal = () => {
    if (this.modal.current) {
      this.modal.current.open();
    }
  };

  render() {
    return (
      <>
        <Modalize
          ref={this.modal}
          onClosed={this.onClosed}
          scrollViewProps={{
            showsVerticalScrollIndicator: false,
            stickyHeaderIndices: [0],
          }}
        >
          {this.renderContent()}
        </Modalize>
        <Button color='primary' onPress={() => this.openModal()}>
          <Text>Hi</Text>
        </Button>
      </>
    );
  }
}

const s = StyleSheet.create({});

jeremybarbet · 2019-07-31T10:20:41Z

Could you create a git repository with the error? your code looks good, so I would need to try it to check

JonnyBurger · 2019-07-31T13:34:20Z

Regarding the error if you use Modal, there might be nothing we can do about it since it is a bug in component in React native or react-native-gesture-handler.

Possible related upstream issues:

software-mansion/react-native-gesture-handler#139
software-mansion/react-native-gesture-handler#332

saurabhdsachan · 2019-08-01T08:19:40Z

Could you create a git repository with the error? your code looks good, so I would need to try it to check

Hi @jeremybarbet
It worked found an issue with gesture handler while creating a new git repository.
Thanks

Frindecent · 2019-08-01T08:31:46Z

@saurabhdsachan could you help me with it too? same thing on android. i have tried with putting only the modalizer in render method so that it is a clean page. still not able to use the swipe able gestures with it

Frindecent · 2019-08-01T08:42:04Z

thats the whole of my component. still not able to do it on actual device using s8

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Modalize from 'react-native-modalize';

// You can import from local files

// or any pure javascript modules available in npm

export default class App extends React.Component {
  modalRef = React.createRef();
  componentDidMount() {
    this.modalRef.current.open();
  }

  render() {
    return (
          <Modalize
           ref={this.modalRef}
            withHandle
            modalHeight = {200}
          >
          </Modalize>
    );
  }
}

jeremybarbet · 2019-08-01T11:08:16Z

Thanks @JonnyBurger for the dive in. I think in the early version of the package, withReactModal was only allowed for iOS and not Android because I run in these issues. Not sure why I removed this condition later 😅 I'll add a note on the documentation about that.

@Frindecent You might have forgotten to install react-native-gesture-handler: https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION (provides a repo with the issue I can run locally if the issue still persists)

Frindecent · 2019-08-01T11:33:31Z

@jeremybarbet its allready there since i am using react-navigation .
no idea whatsup.. should be some issue with gesture-handler. still looking into it. i will shortly provide a repo with the issue

jxzy999 · 2019-09-26T06:44:46Z

I have the same issue. swipe modal or tap the overlay does not work on android.

"react-native-gesture-handler": "^1.4.1",
"react-native": "0.61.0",
"react-navigation": "^3.11.1",
"react-native-modalize": "^1.2.1",

hirbod · 2019-11-10T14:49:59Z

I can absolutely confirm this. After SPENDING hours to get the swipe to dismiss work on android (using a portal), just found out, that my component just don't WORK on android as soon as I wrap around it. It's just PERFECT on iOS (works fully as intended, an animated horizontal ScrollView), but on Android, I can't click the absolute header nor can I swipe. (Even with the portal, no use of withReactModal).

When I use "withReactModal", the swiping works but the swipe to dismiss breaks.

@jeremybarbet, can you help out here? I am so close to wipe modalize on android

shhhiiiii · 2019-11-25T05:26:22Z

this helps me to make swipeable working
https://aboutreact.com/swipe-gestures-not-working-in-android/

hirbod · 2019-11-25T05:57:23Z

Unfortunately this won’t help us Expo people

WrathChaos · 2019-12-11T13:35:12Z

@jeremybarbet Is there any improvement in this issue? It simply cannot be closed via swiping on Android.

jeremybarbet · 2019-12-12T09:38:26Z

@WrathChaos I'm too busy on other projects, unfortunately, to dig into it. If anyone can look at it, I would be more than grateful.

Are you using expo? There is a one known issue with expo@31.0.0 cf: #23 and I the only solution I found was to upgrade expo.

Otherwise, if you don't have the latest versions of react-native and react-native-gesture-handler you should try to upgrade them.

We are using it in a couple of projects at Ueno and on personal projects, along with react-native-navigation and we don't have any issue with ios nor android.

WrathChaos · 2019-12-12T09:43:50Z

I'm using it with Pure React Native and latest versions of react-native and react-native-gesture-handler however I use it with react-navigation. It totally works with iOS but nothing happens on Android

jeremybarbet · 2019-12-12T09:50:51Z

If you could recreate a simple reproducible repo, with the issue it would help

WrathChaos · 2019-12-12T10:15:55Z

Sure, I'm gonna send you a repo link

WrathChaos · 2019-12-14T12:26:37Z

Hi again @jeremybarbet,
Can you please check this repo?

https://github.com/WrathChaos/React-Native-Modalize-Android-Gesture-Problem-Example

This is an example of reproducible Android Swipe to Dismiss problem. Also, I've used one of your examples.
Waiting for your investigation :)
Thank you

WrathChaos · 2019-12-24T15:25:23Z

@jeremybarbet Do you have a chance to check the example? I really need a solution

jeremybarbet · 2019-12-26T11:54:16Z

HI @WrathChaos, yes I looked at it, you forget to install RNGH on android: https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html#android

For everyone else on the discussion, and that have an issue with Android, make sure first you complete this step, otherwise, it won't work on android.

hirbod · 2019-12-26T11:55:30Z

I am an Expo user, its installed and added

WrathChaos · 2019-12-26T12:17:09Z

HI @WrathChaos, yes I looked at it, you forget to install RNGH on android: https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html#android

For everyone else on the discussion, and that have an issue with Android, make sure first you complete this step, otherwise, it won't work on android.

That fixed the issue for Android! Thank you so much, totally missed it. I think you should add this as FAQ part. Really important! Thank you and awesome work man

jeremybarbet · 2019-12-26T12:24:05Z

@hirbod Have you been able to try the latest expo example I did: https://github.com/jeremybarbet/react-native-modalize/tree/master/examples/expo It has latest version of expo/expo-sdk/RNGH and I tested it under Android and iOS

@WrathChaos Thanks, glad it works! It's already in the documentation, but not really well displayed, I'll make it more obvious!

hirbod · 2019-12-26T12:25:50Z

@jeremybarbet yeah I am on SDK 36 now and everything is working for me, as long as I don't use the Header Component. (It won't capture taps on android). I ended up placing my stuff inside of it using a high zIndex. Its stable now for me.

Sidenote: not working when using withReactModal. I had to use a portal!

jeremybarbet · 2019-12-26T12:59:56Z

@hirbod Great that's good to know. Yes, using Modal along react-native-gesture-handler is a known issue on RNGH Android side, and we can't really do anything about that.

I will work on a Provider to display Modalize on top of everything, as soon as I can

hirbod · 2019-12-26T13:32:04Z

Would be great, thanks!

jeremybarbet · 2020-01-30T11:41:03Z

@ybonnetain If you are talking about this props https://github.com/react-native-community/react-native-modal#available-props, this is not the Modal from RN core but another modal library. I'm not using it inside this project

firdaussoberi · 2020-02-15T21:51:15Z

Thanks @saurabhdsachan! I confirm the solution indeed works. So far so good on android, not sure what the effect is on other gestures, will do more testing later.
Am using almost same versions too:

"react": "16.8.6",
"react-native": "0.60.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-modalize": "^1.3.7-rc.5",
"react-navigation": "^3.11.1"

Edit: seems no effect on other gestures. solution by MariShielaFurio totally fixes the swipe-gesture-inside-modal problem for my version.

jeremybarbet · 2020-04-12T12:07:05Z

Hi,

I will close this issue. Multiple new features have been introduced:

withReactModal is now working with Android if you are using react-native-gesture-handler >= 1.6.0
I wrapped Modalize with GestureHandlerRootView from react-native-gesture-handler that setup the package automatically without having to do the manual step on Android MainApplication.java file or with the gestureHandlerRootHOC if you are using react-native-navigation.
I published a package called react-native-portalize to be able to render Modalize on top of a bottom tab navigation (for example)

eeslamadelll · 2020-07-28T03:41:25Z

I had this issue for a while and want to share what worked for me
1- I have used react-native-portalize as mentioned.
2- removed the withReactModal prop from the modalize
3- wrapped the modalize with Portal from react-native-portalize and the component that I want modal on top of it -which was a tab navigator- with Host from react-native-portalize
4- completed the setup of gesture handler as mentioned here https://jeremybarbet.github.io/react-native-modalize/#/INSTALLATION
For me the magic happened at step 4 as I didn't do it earlier.

Stevemoretz · 2021-04-24T10:22:25Z

Now try to use a TextInput in your setup, you'll go crazy just like me that why you thought you found the perfect solution, :)
You haven't I haven't none of those portal libraries work very well, they have rerender issues.

nagasai-tilicho · 2021-06-01T04:59:02Z

Hi,

I will close this issue. Multiple new features have been introduced:

withReactModal is now working with Android if you are using react-native-gesture-handler >= 1.6.0

I wrapped Modalize with GestureHandlerRootView from react-native-gesture-handler that setup the package automatically without having to do the manual step on Android MainApplication.java file or with the gestureHandlerRootHOC if you are using react-native-navigation.

I published a package called react-native-portalize to be able to render Modalize on top of a bottom tab navigation (for example)

Hi @jeremybarbet ,
react-native-portalize not working for me, it throws an error 'No portal manager defined'

How I used:

In Tabs Container

....
<Host>
    <Tab.Navigator>
    ....
    </Tab.Navigaator>
 </Host>

In Modalize screen

<Portal>
  <Modalize ref={combinedRef} HeaderComponent={renderHeader} > 
  <RNWebView ...... />
  </Modalize>
</Portal>

I want to render web view on top of all like modal

bsdaoquang · 2022-09-14T22:31:40Z

it work with me

After installation, wrap your entry point with or gestureHandlerRootHOC.

For example:

export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */};
}

asadbjs · 2022-10-03T16:03:44Z

Thnx me later..!!!
after spending hours....

import { GestureHandlerRootView } from "react-native-gesture-handler";

"react-native-gesture-handler": "^2.6.0", add this line in package.json

brianmak3 · 2023-03-10T14:56:20Z

This worked for me

import { GestureHandlerRootView } from 'react-native-gesture-handler';
 <GestureHandlerRootView style={styles.main}>
      <StatusBar barStyle={'light-content'} />
      <AxiosInterceptor>
        <Modal  >
          <NavigateComp />
        </Modal>
      </AxiosInterceptor>
    </GestureHandlerRootView>

boi-network12 · 2024-09-02T09:06:47Z

ERROR Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.

this is the error am getting when useing your bottomsheet which modalize

jeremybarbet added the ❔ Question Further information is requested label Jul 27, 2019

jeremybarbet added the 🤕 Valid issue Something isn't working label Jul 30, 2019

jeremybarbet removed the ❔ Question Further information is requested label Jul 31, 2019

xxsnakerxx mentioned this issue Jan 31, 2020

Enable horizontal scrolling of ScrollView from RN #121

Merged

jeremybarbet closed this as completed Apr 12, 2020

[react-native-modalize] swipeable not working on android #41

[react-native-modalize] swipeable not working on android #41

Comments

TrinhCDanh commented Jul 21, 2019

jeremybarbet commented Jul 22, 2019

JonnyBurger commented Jul 29, 2019 • edited Loading

TrinhCDanh commented Jul 30, 2019

jeremybarbet commented Jul 30, 2019 • edited Loading

saurabhdsachan commented Jul 31, 2019 • edited Loading

jeremybarbet commented Jul 31, 2019

saurabhdsachan commented Jul 31, 2019

jeremybarbet commented Jul 31, 2019

JonnyBurger commented Jul 31, 2019

saurabhdsachan commented Aug 1, 2019

Frindecent commented Aug 1, 2019

Frindecent commented Aug 1, 2019 • edited Loading

jeremybarbet commented Aug 1, 2019

Frindecent commented Aug 1, 2019

jxzy999 commented Sep 26, 2019 • edited Loading

hirbod commented Nov 10, 2019 • edited Loading

shhhiiiii commented Nov 25, 2019

hirbod commented Nov 25, 2019

WrathChaos commented Dec 11, 2019

jeremybarbet commented Dec 12, 2019

WrathChaos commented Dec 12, 2019

jeremybarbet commented Dec 12, 2019

WrathChaos commented Dec 12, 2019

WrathChaos commented Dec 14, 2019

WrathChaos commented Dec 24, 2019 • edited Loading

jeremybarbet commented Dec 26, 2019

hirbod commented Dec 26, 2019

WrathChaos commented Dec 26, 2019

jeremybarbet commented Dec 26, 2019

hirbod commented Dec 26, 2019 • edited Loading

jeremybarbet commented Dec 26, 2019

hirbod commented Dec 26, 2019

jeremybarbet commented Jan 30, 2020

firdaussoberi commented Feb 15, 2020 • edited Loading

jeremybarbet commented Apr 12, 2020

eeslamadelll commented Jul 28, 2020

Stevemoretz commented Apr 24, 2021

nagasai-tilicho commented Jun 1, 2021 • edited Loading

How I used:

In Tabs Container

In Modalize screen

bsdaoquang commented Sep 14, 2022

asadbjs commented Oct 3, 2022

brianmak3 commented Mar 10, 2023

boi-network12 commented Sep 2, 2024

JonnyBurger commented Jul 29, 2019 •

edited

Loading

jeremybarbet commented Jul 30, 2019 •

edited

Loading

saurabhdsachan commented Jul 31, 2019 •

edited

Loading

Frindecent commented Aug 1, 2019 •

edited

Loading

jxzy999 commented Sep 26, 2019 •

edited

Loading

hirbod commented Nov 10, 2019 •

edited

Loading

WrathChaos commented Dec 24, 2019 •

edited

Loading

hirbod commented Dec 26, 2019 •

edited

Loading

firdaussoberi commented Feb 15, 2020 •

edited

Loading

nagasai-tilicho commented Jun 1, 2021 •

edited

Loading