react native modal doesn’t get rendered on IOS

I’ve a react-native: "0.74.3" challenge and I need to present a modal to my customers.

So I intalled react-native-modal: "13.0.1" into my challenge. I developed the way in which I need to present the modal, it really works for android simulator nevertheless it doesn’t work for ios emulators and bodily units.

Right here is my folder construction:

src
├── modules
│   └── folder
│       ├── queries
│       ├── Folder.tsx
│       ├── FolderContainer.tsx
│       ├── FolderLongPressMenu.tsx
│       ├── FolderModalItem.tsx
│       ├── FolderMoveModal.tsx
│       ├── NoFoldersComponent.tsx
├── navigation
│   └── HomeStack.tsx
├── routes
│   ├── private-routes
│   │   ├── BottomTabs.tsx
│   │   └── PrivateRoutes.tsx
│   ├── public-routes
│   └── principal.tsx
├── screens
│   └── house
│       └── HomeScreen.tsx

In my HomeStack.tsx I’ve HomeScreen part referred to as. In HomeScreen I’ve FolderContainer, and plenty of Folder elements within it.

Right here is the Folder part the place I exploit FolderMoveModal:

 <>
            
                
                    
                        
                    
                    
                        {folder.id === recentCreatedFolderId ? (
                            
                        ) : (
                            
                                {folder.identify}
                            
                        )}
                        {formErrors.map((error, index) => (
                            
                                {error}
                            
                        ))}
                    

                    
                        {`${folder.innerItemsCount} öğe`}
                    
                
            
             moveModalRef?.present?.present()} />

             { console.log('transfer') }} />

        >

and for the ultimate element, that is the implementation of FolderMoveModal

const FolderMoveModal = forwardRef(({ onClose, onMove }: FolderMoveModalProps, ref) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [selectedFolderId, setSelectedFolderId] = useState(null);
    const [filteredFolders, setFilteredFolders] = useState([]);
    const [searchUserFoldersByName] = useMutation(searchUserFoldersByNameM);

    useImperativeHandle(
        ref,
        () => ({
            present: () => {
                console.log("present")
                setIsModalVisible(true);
            },
            disguise: () => {
                console.log("disguise")
                setIsModalVisible(false);
            },
        }),
        [],
    );
    useEffect(() => {
        console.log("isModalVisible", isModalVisible)
    }, [isModalVisible]);


    const strategies = useForm({
        defaultValues: {
            folderName: '',
        },
        resolver: zodResolver(formSchema),
        mode: 'onSubmit'
    });

    const debouncedSearch = useRef(_.debounce((worth) => {
        if (!worth || worth.size < 2) {
            setFilteredFolders([]);
            return;
        }
        searchUserFoldersByName({
            variables: { folderName: worth },
            onCompleted: (information) => {
                setFilteredFolders(information.searchUserFoldersByName as UserFolder[]);
            },
            onError: (error) => {
                console.error('Error looking folders:', error);
            }
        });
    }, 500)).present;

    const handleSearchChange = useCallback((textual content: string) => {
        strategies.setValue('folderName', textual content);
        debouncedSearch(textual content);
    }, [debouncedSearch, methods]);

    const handleFolderSelect = useCallback((folderId: string) => {
        setSelectedFolderId(folderId);
    }, [setSelectedFolderId]);

    const handleMove = useCallback(() => {
        if (selectedFolderId) {
            onMove(selectedFolderId);
            onClose();
        }
    }, [selectedFolderId, onMove, onClose]);

    return (
        
            
                
                    
                        Klasörü Taşı
                        
                            
                                
                                    
                                
                            
                        
                        
                            {filteredFolders.size > 0 ? (
                                 (
                                     handleFolderSelect(folder.id)} />
                                ))} />
                            ) : (
                                Taşıma yapmak istediğiniz klasörü arayın
                            )}

                        
                        
                            
                                İptal
                            
                            
                                Taşı
                            
                        
                    
                
            
        

    );
});

The issue is, I can’t see the modal rendered in IOS devices even tho isModalVisible value is true but it works for android simulators. If you guys have any idea then I’m open to hear’em.

Developer notes

1. I tried using it with setTimeOut it worked for a couple of times but I didn’t want to depend on that.
2. If you click on a Folder component, it pushes a new Home screen to the HomeStack. Just wanted to mention this, maybe it helps.

Thanks already!