React Native Modal (диалог) не рендеринга на определенных устройствах Android ⇐ Javascript

[Anonymous]

Я строю приложение Native/Expo React, которое использует пользовательский диалоговый компонент на основе @rn-primitives/dialog для отображения модала. Для большинства пользователей диалог рендесирует правильно. Тем не менее, некоторые пользователи на определенных устройствах Android (все устройства с большим экраном или планшетами, например, Samsung Galaxy S24+, Xiaomi Redmi Примечание 12 и т. Д.) Смотрите только фон, но не содержимое диалога. < /P>
Вот соответствующий код для моего пользовательского диалогового компонента: < /p>

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

import * as DialogPrimitive from "@rn-primitives/dialog";
import { StyleSheet, useWindowDimensions, View } from "react-native";
import { cn } from "@/utils";
import {
type ComponentPropsWithoutRef,
type ElementRef,
forwardRef,
type ReactNode,
} from "react";
import { IconX } from "@tabler/icons-react-native";
import { colors } from "@/styles";
import { MotiView } from "moti";

const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;

const DialogOverlay = forwardRef<
ElementRef,
ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => {
return (


{children as ReactNode}


);
});
DialogOverlay.displayName = "DialogOverlay";

const DialogContent = forwardRef<
ElementRef,
ComponentPropsWithoutRef & {
portalHost?: string;
isBottomSheet?: boolean;
hasCloseButton?: boolean;
}
>(
(
{
className,
children,
portalHost,
isBottomSheet,
hasCloseButton = true,
...props
},
ref
) => {
const { width } = useWindowDimensions();

return (



{isBottomSheet && (

)}

{children}

{hasCloseButton && (



)}



);
}
);
DialogContent.displayName = DialogPrimitive.Content.displayName;

/* Header, Footer, Title, Description omitted for brevity,
but they're just basic forwardRef wrappers around
DialogPrimitive components */

export {
Dialog,
DialogClose,
DialogContent,
/* ...other exports */
};

Что происходит на проблемных устройствах:

Темное наложение (фон dim) появляется. < /li>
Содержание диалога (белая коробка и дети никогда не появляются, для любая часть приложения, которая называет это MODAL. < /li>
Эти устройства обычно обозначаются как Android Light или Android -таблет «Воспроизведите его на наших собственных симуляторах или физических устройствах. Другие пользователи видят диалог просто отлично.
может быть связано с большими ограничениями макета, ошибкой в ​​@rn-primitives/dialog или столкновением стиля в Tailwind Rn?
Есть ли какие-либо Известные причуды с классификацией Android Light/планшета, которые ломают модальное наслоение?

Подробнее здесь: https://stackoverflow.com/questions/794 ... id-devices