[Bug] Toast does not show on modal on react native 0.75.3

[arlovip]

💬 前提强调

• I have searched the issues of this repository and believe that this is not a duplicate.

🙋 描述详情/重现步骤

依赖版本："@ant-design/react-native": "^5.2.3"。
不使用Modal，Toast正常显示，使用Modal，无法显示。

代码很简单：

import {Button, Modal, View} from "react-native";
import {Toast, Provider} from "@ant-design/react-native";
import {useState} from "react";

export default function ProfilePage(props) {
	const [visible, setVisible] = useState(false);
	return (
		<View style={{flex: 1, paddingTop: 100}}>
			<Button title={"Show Toast"} onPress={() => {
				// 这里正常
				Toast.show("Hello world", 2, false);
			}}/>
			<Button title={"Show Modal"} onPress={() => setVisible(true)}/>
			<Modal visible={visible}>
				<Provider>
					<View style={{height: 400, backgroundColor: "blue"}}>
						<Button title={"Show Toast on Modal"} onPress={() => {
							// 这里Toast不显示？？？
							Toast.show("Hi, show on modal?", 2, false);
						}}/>
						<Button title={"Close Modal"} onPress={() => setVisible(false)}/>
					</View>
				</Provider>
			</Modal>
		</View>
	);
}

🔴 版本

10.7.0

💻 运行环境

Android

⚫️ npx react-native info输出信息

System:
  OS: macOS 14.3.1
  CPU: (8) arm64 Apple M2
  Memory: 89.28 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.1.0
    path: ~/.nvm/versions/node/v22.1.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v22.1.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.5
    path: /Users/chenlong/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.3
    wanted: 0.75.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

补充说明

No response

[LeeYuze]

不能使用ReactNative的Modal，你要用Ant Design的Modal，因为原生的Modal层级比较高覆盖不了

[arlovip]

@LeeYuze 那为啥之前的RN版本就可以呢？之前一直这么用啊，现在升级了RN，就不显示了，有点难受

[arlovip]

有其他办法吗？因为我全局用的基本都是react-native-modal或者RN自带的Modal，如果替换成Ant Design的Modal，因为属性配置和动画效果差异，替换成本比较大，这样比较麻烦

[1uokun]

fixed in 5.3.0 by useToast

import {Button, Modal, View} from "react-native";
import {Toast, Provider} from "@ant-design/react-native";
import {useState} from "react";

export default function ProfilePage(props) {
	const [visible, setVisible] = useState(false);
+	const [toastApi, contextHolder] = Toast.useToast();
	return (
		<View style={{flex: 1, paddingTop: 100}}>
			<Button title={"Show Toast"} onPress={() => {
				// 这里正常
				Toast.show("Hello world", 2, false);
			}}/>
			<Button title={"Show Modal"} onPress={() => setVisible(true)}/>
			<Modal visible={visible}>
+				{contextHolder}
-				<Provider>
					<View style={{height: 400, backgroundColor: "blue"}}>
						<Button title={"Show Toast on Modal"} onPress={() => {
							// 这里Toast不显示？？？
+							toastApi.show("Hi, show on modal?", 2, false);
-							Toast.show("Hi, show on modal?", 2, false);
						}}/>
						<Button title={"Close Modal"} onPress={() => setVisible(false)}/>
					</View>
-				</Provider>
			</Modal>
		</View>
	);
}