Cannot swipe to close Modalize inside Portalize

[gesangseto]

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

My Android Emulator

[eeshankeni]

I've been dealing with this same issue

[shop-fluencer]

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]

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