callstack / callstack/react-native-paper
Modal will appear once more when its mask is clicked.
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
Modal appears once more before close when its mask is clicked.
### Expected behaviour
Modal disappears directly when its mask is clicked.
### How to reproduce?
```js
import * as React from 'react';
import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';
const MyComponent = () => {
const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = {backgroundColor: 'white', padding: 20};
return (
Example Modal. Click outside this area to dismiss.
Show
);
};
export default MyComponent;
```
### Preview
https://github.com/callstack/react-native-paper/assets/42693551/eca1a8b4-eeaf-49d9-8c03-ecdc3f5757f9
### My suggestion

The current behavior is expected by the test case, which prevents my changes from passing all tests.
```shell
$ jest Modal
FAIL src/components/__tests__/Modal.test.tsx
Modal
√ animated value changes correctly (81 ms)
by default
√ should render passed children (255 ms)
√ should render a backdrop in default theme's color (14 ms)
√ should render a custom backdrop color if specified (8 ms)
√ should receive appropriate top and bottom insets (11 ms)
when open
if closed via touching backdrop
× will run the animation but not fade out (57 ms)
√ should invoke the onDismiss function after the animation (16 ms)
if closed via Android back button
√ will run the animation but not fade out (27 ms)
× should invoke the onDismiss function after the animation (32 ms)
when open as non-dismissible modal
if closed via touching backdrop
√ will run the animation but not fade out (15 ms)
√ should not invoke onDismiss (13 ms)
if closed via Android back button
√ will run the animation but not fade out (14 ms)
√ should not invoke onDismiss (11 ms)
when visible prop changes
from false to true (closed to open)
√ should run fade-in animation on opening (12 ms)
from true to false (open to closed)
√ should run fade-out animation on closing (16 ms)
√ should not invoke onDismiss (12 ms)
√ should close even if the dialog is not dismissible (12 ms)
when visible prop changes again during the open/close animation
while closing, back to true (visible)
√ should keep the modal open (23 ms)
while opening, back to false (hidden)
√ should keep the modal closed (20 ms)
● Modal › when open › if closed via touching backdrop › will run the animation but not fade out
expect(element).toHaveStyle()
- Expected
- opacity: 1;
+ opacity: 0;
123 | });
124 |
> 125 | expect(getByTestId('modal-backdrop')).toHaveStyle({
| ^
126 | opacity: 1,
127 | });
128 |
at Object.toHaveStyle (src/components/__tests__/Modal.test.tsx:125:47)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
at node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7
at Object. (node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12)
● Modal › when open › if closed via Android back button › should invoke the onDismiss function after the animation
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
210 | });
211 |
> 212 | expect(onDismiss).toHaveBeenCalledTimes(1);
| ^
213 | });
214 | });
215 | });
at Object.toHaveBeenCalledTimes (src/components/__tests__/Modal.test.tsx:212:27)
Test Suites: 1 failed, 1 total
Tests: 2 failed, 17 passed, 19 total
Snapshots: 0 total
Time: 1.789 s, estimated 2 s
```
### Your Environment
| software | version
| ------------------------| -------
| android | 12
| react-native | 0.72.5
| react-native-paper | 5.10.4
| node | 18.12.1
| yarn | 1.22.19
Contributor guide
Assessment
This issue has not been assessed yet.