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

[jeremybarbet]

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

[jeremybarbet]

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)

[asadbjs]

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

[shhhiiiii]

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

[jeremybarbet]

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.

[Frindecent]

@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

[jeremybarbet]

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)

[jeremybarbet]

@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]

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"

[hirbod]

@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]

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]

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]

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

[jeremybarbet]

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

[saurabhdsachan]

@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]

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

[JonnyBurger]

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]

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]

@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]

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

[jxzy999]

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]

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

[hirbod]

Unfortunately this won’t help us Expo people

[WrathChaos]

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

[jeremybarbet]

@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 [email protected] 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]

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]

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

[WrathChaos]

Sure, I'm gonna send you a repo link

[WrathChaos]

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]

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

[hirbod]

I am an Expo user, its installed and added

[WrathChaos]

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]

@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!

[jeremybarbet]

@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]

Would be great, thanks!

[jeremybarbet]

@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]

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.

[eeslamadelll]

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]

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]

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]

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

[brianmak3]

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>