Swiping & ovelayPressed is not working in android

[DevanshaniR]

Describe the bug I'm using the modalize component to trigger in a flat list item tap.This is my code.Please give a solution.

<Modalize ref={this.modalizeRef}
            //  snapPoint={300}
            panGestureComponentEnabled={true}
            panGestureEnabled={true}
            withReactModal={true}
            modalHeight={200}

          ><Text>...your content</Text></Modalize>

Reproduce

• Create a demo on https://snack.expo.io to reproduce the issue.
• Add gif screenshots to help explain your issue.

Dependencies:

• react-native-modalize [e.g. 1.3.7-rc.19]
• react-native [e.g. 0.62.0]
• react-native-gesture-handler [e.g. 1.6.0]
• expo/react-navigation/react-native-navigation: [e.g. [email protected]]

[jeremybarbet]

Hey,

Yes it’s an issue related to react-native’s modal.

I would recommend using Portalize to display Modalize on top of the node you need.

See more https://jeremybarbet.github.io/react-native-modalize/#/PROPS?id=withreactmodal

[DevanshaniR]

@jeremybarbet if I use portalize can I overcome the overlay pressed and swiping issues ?

[jeremybarbet]

Yes and you will need to remove withReactModal props that won’t be necessary anymore.

[DevanshaniR]

@jeremybarbet I got the same issue when I'm using portalize also. I can't swipe up ,swipe down & overlay tap to close the modal & also can't scroll. I'm render the modal when item tap in a flat list. Below is my code .Please guide on me to solve the issue

render() {
   return (
     <Host>
       <View style={styles.container}>
         <Header
           style={styles.header}
           backButtonPressed={() => this.handleBackButtonClick()}
           headerText={this.state.locals.title}
           testID={`notification_main`} />
         {/*loading indicator*/}
         <ActivityIndicator animating={this.props.apiLoading} text={this.props.api_call_indicator_msg} />
         <View style={styles.container}>
           <Portal>
             <Modalize ref={this.modalRef}
               snapPoint={300}
               modalHeight={Dimensions.get('window').height -100}
               panGestureEnabled = {true}
               panGestureComponentEnabled = {true}
               handlePosition = {'inside'}
               onOverlayPress = {this.closePanel()}
               closeOnOverlayTap = {true}
             >{this.renderContent()}

             </Modalize>
           </Portal>
           <View style={styles.flatListViewContainer}>
             <FlatList
               data={this.props.notificationData}
               renderItem={this.renderListItem}
               keyExtractor={(item, index) => index.toString()}
               scrollEnabled={true}
               extraData={this.state}
             />
           </View>
         </View>
       </View>
     </Host>
   );
 }
}

renderContent = () => {
   const { selected_notification_item = {} } = this.props;
   const { title = '', dateTime = '', description = '', image_url = '' } = selected_notification_item;
   return (
     <View style={styles.bottomSheetContainer} >
       <View>
         <Text style={styles.bottomSheetTitleTextStyle}>
           {title}
         </Text>
       </View>
       {dateTime != '' ?
         <View >
           <Text style={styles.bottomSheetDateStyle}>
             {dateTime}
           </Text>
         </View> : <View />}
       {description !== '' ?
         <View style={styles.contentContainer} onLayout={this.onLayout}>
           <Text
             style={styles.contentTextStyle}
           // numberOfLines={3}
           // ellipsizeMode='tail'
           >{description}</Text>
         </View> : <View />}
       {image_url !== '' ?
         <View style={styles.imageContainer}>
           <Image source={{ uri: image_url }} style={styles.imageIconStyle} resizeMode={'cover'} />
         </View> : <View />}
     </View>
   );
 }

[DevanshaniR]

@jeremybarbet any update?

[jeremybarbet]

Hi,

Not sure what you are trying to do. Tried your code here and it works.

If you want to use a FlatList inside Modalize you have to use this props.

If you want me to help you to debug more, you have to reproduce the issue on https://snack.expo.io like stated in the issue template, otherwise, it's hard to see what's wrong in your code when you have dozens of dependencies of code that point to nowhere.

Thanks

[DevanshaniR]

@jeremybarbet I'm using react-native-navigation & I tried by using Navigation.showOverlay method as it is in the example by rendering the modalize in a seperate View. But it is not working. i did as this example https://github.com/jeremybarbet/react-native-modalize/blob/master/examples/react-native-navigation/src/screens/SimpleContent.js

[jeremybarbet]

Here is the doc to run the example for react-native-navigation. Try it out on simulator, real device and if you have an issue on Android, take a video, provide a reproduction code.

thanks

[DevanshaniR]

@jeremybarbet yes I tried this one. https://github.com/jeremybarbet/react-native-modalize/blob/master/examples/react-native-navigation/src/screens/SimpleContent.js

[jeremybarbet]

Can you provide android device specs you tried it on?

[DevanshaniR]

@jeremybarbet
Simulator - Huawei GR5 react native version - "react-native": "0.60.5"

What is wrong with my code. PLease help. Thankyou code - main screen -

handleOverlay = () => {
    Navigation.showOverlay({
      component: {
        name: 'DialogRetailerApp.views.BottomModalView',
        options: {
          overlay: {
            interceptTouchOutside: true,
            handleKeyboardEvents: true,
          },
          layout: {
            componentBackgroundColor: 'transparent',
          },
        },
        passProps: {
          animated,
        },
      },
    });
  };

  render() {
    return (
      <View>
        <Text
          style={{ left: 200, top: 200 }}
          onPress={() => this.handleOverlay()}>
          OPEN
        </Text>
      </View>
    );
  }
}

bottomPanel -

handleOpen = () => {
   if (this.modalRef.current) {
     this.modalRef.current.open();
   }
 };

 componentDidMount() {
   this.handleOpen();
 }

renderContent = () => {
   return (
     <View style={styles.bottomSheetContainer}>
       <View>
         <Text style={styles.bottomSheetTitleTextStyle}>something</Text>
       </View>
     </View>
   );
 }

 render() {
   return (
     <Host>
       <View style={styles.container}>
         <Portal>
           <Modalize
             ref={this.modalRef}
             snapPoint={300}
             modalHeight={Dimensions.get('window').height - 500}
             panGestureEnabled={true}
             panGestureComponentEnabled={true}
             handlePosition={'inside'}
             closeOnOverlayTap={true}>
             {this.renderContent()}
           </Modalize>
         </Portal>
       </View>
     </Host>
   );
 }

[jeremybarbet]

You don't need Portalize while using react-native-navigation.

 render() {
   return (
           <Modalize
             ref={this.modalRef}
             snapPoint={300}
             modalHeight={Dimensions.get('window').height - 500}
             panGestureEnabled={true}
             panGestureComponentEnabled={true}
             handlePosition={'inside'}
             closeOnOverlayTap={true}>
             {this.renderContent()}
           </Modalize>
   );
 }

[DevanshaniR]

@jeremybarbet I tried. But the same issue cant swipe. Big help . Thank you. I have attched the screen recording below https://drive.google.com/open?id=1D6oZmr50xyPxNRRqy6Zov3FZeIO6GAVa

[jeremybarbet]

I will try later with your device specs and the react native version

[DevanshaniR]

@jeremybarbet thank you. I'm waiting for the solution.

[scottwelz]

@jeremybarbet @DevanshaniR Have there been any revelations on this?

[IngyuTae]

@DevanshaniR Have you tried this? https://docs.swmansion.com/react-native-gesture-handler/docs/#android

[Duya3fithou]

@IngyuTae it work perfect. many tks

[sanjeevkse]

@Duya3fithou is it possible to share your working code?

[l-fernandocosta]

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

Wrap your app.tsx into GestureHandlerRootView with a style flex 1

[irodeanu]

I fix with this solution https://docs.swmansion.com/react-native-gesture-handler/docs/guides/migrating-off-rnghenabledroot/

[abdulsamadola]

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

Wrap your app.tsx into GestureHandlerRootView with a style flex 1

It works well on expo managed workflow