Description
Current behaviour
On an iPad with VoiceOver on, a Modal cannot be dismissed by double-tapping the area outside the Modal, if the Modal only contains one line of text.
If the body of the Modal contains more than one line of of text, then double-tapping the area outside of the Modal closes it as expected.
Expected behaviour
Double-tapping the area outside of the Modal should dismiss the Modal regardless of the number of lines of text.
Code sample
I wrote this code with a fresh React Native project using npx react-native init ModalBug --version 0.64.1 and then npm install react-native-paper. Simply replace the code in App.js with what I have provided below.
You will have to build the app on an actual iPad to test the VoiceOver functionality. You must set Targeted Device Families to iPhone, iPad under the Build Settings in xCode before running the build.
import React, {useState} from 'react';
import {Provider, Portal, Button, Modal} from 'react-native-paper';
import {Text} from 'react-native';
const App = () => {
const [visible1, setVisible1] = useState(false);
const [visible2, setVisible2] = useState(false);
const showModal1 = () => setVisible1(true);
const hideModal1 = () => setVisible1(false);
const showModal2 = () => setVisible2(true);
const hideModal2 = () => setVisible2(false);
const containerStyle = {backgroundColor: 'white', padding: 20};
return (
<Provider>
<Portal>
<Modal
visible={visible1}
onDismiss={hideModal1}
contentContainerStyle={containerStyle}
dismissable>
<Text>
Example Modal with short text. Will NOT dismiss when outside is
clicked with VoiceOver on.
</Text>
<Button style={{marginTop: 30}} mode="contained" onPress={hideModal1}>
Close Modal
</Button>
</Modal>
<Modal
visible={visible2}
onDismiss={hideModal2}
contentContainerStyle={containerStyle}
dismissable>
<Text>
Example Modal with long text. Will successfully dismiss when outside
is clicked with VoiceOver on. Lorem Ipsum is simply dummy text of
the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type
specimen book.
</Text>
<Button style={{marginTop: 30}} mode="contained" onPress={hideModal2}>
Close Modal
</Button>
</Modal>
</Portal>
<Button style={{marginTop: 200}} onPress={showModal1} mode="contained">
Show Modal with short text
</Button>
<Button style={{marginTop: 200}} onPress={showModal2} mode="contained">
Show Modal with long text
</Button>
</Provider>
);
};
export default App;
Screenshots (if applicable)
Heres a video of the current behaviour using the code above:
RPReplay-Final1631666989.MP4
What have you tried
I encountered this issue on an app I work on, and realised there was no difference between the Modals that could and could not close, except for the number of lines of text within them. To make sure there was nothing else influencing this behaviour, I created a fresh RN app, and was able to recreate the issue with the code I provided above. I was not able to determine the reason for this behaviour by looking at the source code for the Modal component.
Based on my debugging I did notice that for the Modals that cannot be closed, when you double-tap outside the Modal area, the double-tap is not registered as a press. In other words, the onPress function on the TouchableWithoutFeedback component in the Modal component does not get called.
The TouchableWithoutFeedback component is found on line 216 in src/components/Modal.tsx.
I do not have access to an iPhone, and as such have not had the opportunity to try and recreate the issue on a device with a smaller screen.
Your Environment
| software | version |
|---|---|
| ios | 14.7.1 |
| react-native | 0.64.1 |
| react-native-paper | 4.9.2 |
| node | 14.6.1 |
| npm | 7.23.0 |