Реактируйте Native IOS Modal «Призрачный». Проблема: предыдущий модальный контент показывает на переходе ⇐ IOS

[Anonymous]

Я сталкиваюсь с особой проблемой на iOS в моем нативном приложении React, где, когда я переключаюсь между модалами, содержание из ранее открытого модала вспыхивает во время перехода. Я использую пользовательский крючок для управления одним активным модалом, и я условно отображает модалы. Однако, когда я закрываю один модал (например, модальный «Select Provider»), а затем открываю другой (например, Modal «входной код»), я вижу остатки заголовка предыдущего модала (или контента) во время анимации затухания.

Код: Выделить всё

import { useCallback, useState } from "react";

export type ModalKey = "provider" | "code" | "password";

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

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

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

return { activeModal, openModal, closeModal };
}

floating modal.tsx

Код: Выделить всё

import { Modal, View, Text, TouchableOpacity } from "react-native";
import { styles } from "./styles";
import { useTheme } from "@/hooks/useTheme";

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

export function FloatingModal({
visible,
onSave,
onCancel,
title,
children,
}: Props) {
const theme = useTheme();

return (


{visible && (

{title && (
{title}
)}
{children}



Chiudi


{onSave && (
 onSave()}
style={{
...styles.actionButton,
backgroundColor: theme.background,
}}
>

Salva


)}


)}


);
}

inputmodal.tsx (аналогичный шаблон для поставщика модала)

Код: Выделить всё

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

export interface Props {
title: string;
visible: boolean;
value: string | null;
keyboardType: KeyboardTypeOptions;
onSave: (result: string) => void;
onCancel: () => void;
}

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

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

return (
 { onSave(input);  }}
>




);
}

const styles = StyleSheet.create({
container: {
width: "100%",
},
input: {
width: "100%",
height: 50,
fontSize: 18,
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 10
},
});
< /code>
settingsscreen.tsx:
// Snippet from SettingsScreen:
{activeModal === "provider" && (
 closeModal()}
onSave={handleSelectProvider}
/>
)}

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

Что я наблюдаю
Когда я открываю модальный поставщиков, а затем модал Sourcecode, при закрытии одного модала я вижу короткую вспышку, где заголовок предыдущего модала вновь появляется до того, как он полностью заменен новым модалом. Это происходит только на iOS. < /P>
Я пробовал: < /p>

Установка анимации To to "none" или "Fade". Ключи. Кто -нибудь столкнулся с этой проблемой с Native Modals React на iOS? Существуют ли рекомендуемые обходные пути или модальные библиотеки, которые эффективно решают эту проблему?

Подробнее здесь: https://stackoverflow.com/questions/795 ... on-transit