Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot swipe to close Modalize inside Portalize #24

Open
gesangseto opened this issue Apr 7, 2022 · 3 comments
Open

Cannot swipe to close Modalize inside Portalize #24

gesangseto opened this issue Apr 7, 2022 · 3 comments

Comments

@gesangseto
Copy link

gesangseto commented Apr 7, 2022

I've made several Android applications with modalize and portalize, but this time I got a problem swipe to close modalize can't work,
but on IOS devices it can run fine, or if I don't use portalize then modalize runs fine

dependencies

{
    "react": "17.0.2",
    "react-native": "0.67.4",
    "react-native-gesture-handler": "^2.1.1",
    "react-native-modalize": "^2.0.13",
    "react-native-portalize": "^1.0.7"
}

App.tsx

 import {NavigationContainer} from '@react-navigation/native';
 import React from 'react';
 import {navigationRef} from './helper';
 import Router from './router';
 import { Host } from 'react-native-portalize';
 const App = () => {
   return (
      <Host>
         <NavigationContainer ref={navigationRef}>
            <Router />
         </NavigationContainer>
      </Host>
   );
 };
 export default App;

my program snippet:

import React, { useRef, useState } from 'react';
import { SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native';
import { Modalize } from 'react-native-modalize';
import { Portal } from 'react-native-portalize';
import { FlatGrid } from 'react-native-super-grid';
import { FormControllerProfile } from '../../components';

export default function Example() {
  const modalizeRef = useRef(null);
  const [items, setItems] = useState([]);
  const [formData, setFormData] = useState({});

  const renderBoxItem = item => {
    return (
      <TouchableOpacity
        onPress={() => modalizeRef.current?.open()}>
      </TouchableOpacity>
    );
  };
  return (
    <>
      <FlatGrid
        itemDimension={130}
        data={items}
        style={styles.gridView}
        spacing={10}
        renderItem={({item}) => renderBoxItem(item)}
      />
      <SafeAreaView style={{flex: 1}}>
        <Portal>
          <Modalize ref={modalizeRef}>
            <FormControllerProfile
              onSubmit={val => modalizeRef.current?.close()}
              defaultValue={formData}
            />
          </Modalize>
        </Portal>
      </SafeAreaView>
    </>
  );
}

My Ios Emulator
ezgif-4-7571a5d7b6

My Android Emulator
ezgif-1-107bdcdd8a

@eeshankeni
Copy link

I've been dealing with this same issue

@shop-fluencer
Copy link

shop-fluencer commented May 13, 2022

Go to your app.tsx file and add before Host the GestureHandlerRootView from react-native-gesture-handler.

        <GestureHandlerRootView style={{flex: 1}}>
          <Host>
            ...
          </Host>
        </GestureHandlerRootView>

@dbacinski
Copy link

@shop-fluencer solution with GestureHandlerRootView kind of works, but it also makes modals not scrollable :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants