React Native iOS Modal “Ghosting” Concern: Earlier Modal Content material Reveals on Transition

I am encountering a peculiar situation on iOS in my React Native app the place, after I swap between modals, content material from a beforehand open modal briefly flashes throughout the transition. I exploit a customized hook to handle a single energetic modal, and I conditionally render modals. Nonetheless, after I shut one modal (for instance, the “Choose Supplier” modal) after which open one other (just like the “Enter Code” modal), I see remnants of the earlier modal’s title (or content material) throughout the fade-out animation.

My setup:

useModals.ts

import { useCallback, useState } from "react";

export kind ModalKey = "supplier" | "code" | "password";

export perform useActiveModal(preliminary: ModalKey | null = null) {
  const [activeModal, setActiveModal] = useState(preliminary);

  const openModal = useCallback((key: ModalKey) => {
    setActiveModal(key);
  }, []);

  const closeModal = useCallback(() => {
    setActiveModal(null);
  }, []);

  return { activeModal, openModal, closeModal };
}

FloatingModal.tsx

import { Modal, View, Textual content, TouchableOpacity } from "react-native";
import { kinds } from "./kinds";
import { useTheme } from "@/hooks/useTheme";

export interface Props {
  seen: boolean;
  onSave?: () => void;
  onCancel?: () => void;
  title?: string;
  youngsters?: React.ReactNode;
}

export perform FloatingModal({
  seen,
  onSave,
  onCancel,
  title,
  youngsters,
}: Props) {
  const theme = useTheme();

  return (
    
      
        {seen && (
          
            {title && (
              {title}
            )}
            {youngsters}
            
              
                
                  Chiudi
                
              
              {onSave && (
                 onSave()}
                  type={{
                    ...kinds.actionButton,
                    backgroundColor: theme.background,
                  }}
                >
                  
                    Salva
                  
                
              )}
            
          
        )}
      
    
  );
}

InputModal.tsx (related sample for supplier modal)

import { useTheme } from "@/hooks/useTheme";
import { FloatingModal } from "../modal/FloatingModal";
import { KeyboardTypeOptions, StyleSheet, TextInput, View, Textual content } from "react-native";
import { useEffect, useState } from "react";

export interface Props  null;
  keyboardType: KeyboardTypeOptions;
  onSave: (end result: string) => void;
  onCancel: () => void;


export perform InputModal({
  title,
  seen,
  worth,
  keyboardType,
  onSave,
  onCancel,
}: Props) {
  const theme = useTheme();
  const [input, setInput] = useState("");

  useEffect(() => {
    setInput(worth ?? "");
  }, [value]);

  return (
     { onSave(enter); }}
    >
      
        
      
    
  );
}

const kinds = StyleSheet.create({
  container: {
    width: "100%",
  },
  enter: {
    width: "100%",
    peak: 50,
    fontSize: 18,
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10
  },
});

SettingsScreen.tsx:

// Snippet from SettingsScreen:
{activeModal === "supplier" && (
   closeModal()}
    onSave={handleSelectProvider}
  />
)}

{activeModal === "code" && (
   closeModal()}
    onSave={handleSourceCode}
  />
)}

What I Observe

After I open the suppliers modal after which the sourceCode modal, on closing one modal I see a short flash the place the earlier modal’s title reappears earlier than it’s totally changed with the brand new modal’s content material. This occurs solely on iOS.

I’ve tried:

• Setting animationType to “none” or “fade”.
• Conditionally rendering the modal content material by wrapping it in {seen
  && (…)}.
• Utilizing distinctive keys.
• Adjusting the modal’s unmounting timing.

Query

How can I eradicate this flash in my iOS modals in order that after I transition between modals, the content material isn’t changed by a short ghost of the beforehand rendered modal? Has anybody encountered this situation with React Native modals on iOS? Are there advisable workarounds or modal libraries that deal with this situation successfully?