react / react/react-native

Modal rendring

未关闭
#53,276 16 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

Component: Modal Needs: Repro Type: Unsupported Version
主要语言
C++
星标
127k
派生
25.3k
平均合并
1 天 23 小时
30 天内合并 PR
4

描述

Description

I am using the modal component from React Native. When I close the modal for the first time, it shows the previous modal. This might be happening in version 0.78.2.

import React, { useContext } from "react";
import {
Modal,
StyleSheet,
Pressable,
View,
TouchableOpacity,
Text,
Image,
Alert,
} from "react-native";
import ImagePicker from "react-native-image-crop-picker"; // Assuming Image is imported from 'react-native-image-crop-picker'
import AppUtils from "../../utils/appUtils";
import { hp, wp } from "../../utils/dimension";
import AppFonts from "../../constants/fonts";
import { useNavigation, useTheme } from "@react-navigation/native";
import { BlurView } from "@react-native-community/blur";
import { LocalizationContext } from "../../localization/localization";

interface CustomImagePickerModalProps {
visible: boolean;
attachments: (image: Image) => void;
pressHandler: () => void;
crossPress?: () => void;
cameraOnpress?: () => void;
galleryOnpress?: () => void;
setvisble?:any
ondismiss?:()=>void
}

const CustomImagePickerModal: React.FC = ({
visible,
crossPress,
cameraOnpress,
galleryOnpress,
attachments,
pressHandler,
ondismiss
}) => {
const { images, colors } = useTheme() as any;
const { localization } = useContext(LocalizationContext) as any;

const openCamera = () => {
ImagePicker.openCamera({
width: 400,
height: 400,
cropping: false,
mediaType: "any",
}).then((image: Image) => {
attachments(image);
pressHandler();
});
};
const navgation = useNavigation();
return (
visible && (

<Modal
key={"12234"}
visible={visible}
animationType="fade"
transparent={true}
onDismiss={() => {
ondismiss && ondismiss();
}}
>
<BlurView
style={{
position: "absolute",
top: 0,
bottom: 0,
right: 0,
left: 0,
}}
blurType="light"
blurAmount={3}
reducedTransparencyFallbackColor="white"
>



{localization?.appkeys?.select}

<Pressable
onPress={() => {
crossPress();
}}
style={{ position: "absolute", top: hp(1.5), right: wp(4) }}
>
<Image
source={images?.crossIcon}
style={{
height: hp(3),
width: hp(3),
resizeMode: "contain",
}}
/>





ussage==>

{iseventdate && (

<DatePicker
key={"456444444"}
minDate={new Date()}
isVisible={iseventdate}
selectedDate={setselecteddata ? setselecteddata : new Date()}
mode={"date"}
onCancel={() => {
setIseventdate(false);
}}
onConfirm={(date: Date) => {
setIseventdate(false);
seteventcsetup({ ...eventcsetup, date: date.toString() });

          setSetselecteddata(date);
        }}
        display={true}
        maxDate={maxDate}
      />
    </View>
  )}

{uploadModal && (

<CustomImagePickerModal
key={"456234"}
visible={uploadModal}
galleryOnpress={() => {
setUploadModal(false);
setTimeout(() => {
openGallery();
}, 800);
}}

        pressHandler={() => {
          setUploadModal(false);
        }}
        cameraOnpress={() => {
          console.log("hbjhvjhvjdh");

          setUploadModal(false);
          setIsModalVisible(true);
        }}
        crossPress={() => {
          setUploadModal(false);
        }}
        ondismiss={() => {
          setUploadModal(null);
        }}
      />
    </View>
  )}
Steps to reproduce

https://github.com/user-attachments/assets/de98a2f2-c609-4dd2-94de-da9b74f04bbf

React Native Version

0.78.2

Affected Platforms

Runtime - iOS

Output of npx @react-native-community/cli info
System:
  OS: macOS 15.4
  CPU: (10) arm64 Apple M1 Max
  Memory: 128.66 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.3.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.4.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.06.30.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/john/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/john/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.2
    wanted: 0.78.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: false
  newArchEnabled: true
Stacktrace or Logs
nil
MANDATORY Reproducer

nil

Screenshots and Videos

No response

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先将提供的 modal 用法缩减为一个最小的 React Native 0.78.2 iOS 复现示例;未确定任何 repository 文件、测试或强制性复现示例。确认第一次关闭时的行为,并在定位受影响的实现之前将其与当前版本进行比较。行为可以复现并且有回归测试覆盖后,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
冷清
描述清晰度
需要澄清
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。