react / react/react-native

Modal rendring

オープン
#53,276 コメント 16 件 リアクション 3 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Component: Modal Needs: Repro Type: Unsupported Version
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
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. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、提供されたモーダルの使用を最小限の React Native 0.78.2 iOS 再現コードに縮小します。リポジトリのファイル、テスト、または必須の再現コードは特定されていません。最初に閉じたときの挙動を確認し、影響を受ける実装を特定する前に、現行バージョンと比較します。挙動を再現でき、回帰テストでカバーされれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。