[IOS][Modal][UnTouchable]Put double visible modal after some node causes the app can't touch!

This issue has been tracked since 2022-09-23.

Description

Something strange happens when I make two Modal components visible at the same time.

  1. Only one Modal is displayed, and the other is missing

  2. When I put the rendering position of the Modal in the back, the whole page will be unTouchable after closing the display Modal! On the contrary, the Modal is the first children node and you can touch normally!

Simulator.Screen.Recording.-.iPhone.11.-.2022-09-23.at.14.34.00.mp4

Version

0.70.1

Output of npx react-native info

System:
OS: macOS 12.5.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 364.78 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.19.2 - ~/.nvm/versions/node/v14.19.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 6.14.17 - ~/.nvm/versions/node/v14.19.2/bin/npm
Watchman: 2021.08.23.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.0, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
Android SDK:
API Levels: 29, 30, 31
Build Tools: 29.0.2, 30.0.2, 31.0.0
System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7621141
Xcode: 13.0/13A5212g - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_292 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: ^0.70.1 => 0.70.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Firstly, write a component that render two modal.

const TestModal = () => {
  const [v1, sV1] = useState(true);
  const [v2, sV2] = useState(true);
  return <>
    <Modal visible={v1} transparent>
      <View style={{ backgroundColor: '#333', height: 300 }}>
        <TouchableWithoutFeedback
          onPress={() => {
            sV1(false);
          }}
        >
          <Text style={{ marginTop: 200 }}>fsdaasfasfd</Text>
        </TouchableWithoutFeedback>
      </View>
    </Modal>
    <Modal visible={v2} transparent>
      <View style={{ backgroundColor: '#588', height: 300 }}>
        <TouchableWithoutFeedback
          onPress={() => {
            sV2(false);
          }}
        >
          <Text style={{ marginTop: 100 }}>fsdaasfasfd</Text>
        </TouchableWithoutFeedback>
      </View>
    </Modal>
  </>
}

Secondly, put the component after some nodes.

    <View style={styles.container}>
      <TouchableWithoutFeedback onPress={() => {
          setColor('#599')
        }}>
        <Text style={{ color }}>Press To change color!!</Text>
      </TouchableWithoutFeedback>
      <TestModal></TestModal>
    </View>

You will find after close the modal, you can't touch anyway!

Snack, code example, screenshot, or link to a repository

Github Code

code

More Details About Repo
Owner Name facebook
Repo Name react-native
Full Name facebook/react-native
Language JavaScript
Created Date 2015-01-09
Updated Date 2022-10-03
Star Count 105144
Watcher Count 3666
Fork Count 22469
Issue Count 2232

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date