Skip to content

Commit 868936b

Browse files
committed
fix(modal): Hide modal through onDismiss callback
**Current behavior**: When user presses outside of modal, it gets dismissed internally regardless of whether app logic wants to close the modal and then user provided callback is invoked. This results in flicker - internal close and then immediate open due to `visible` state still `true` on modal if the app logic doesn't dismiss the modal immediately. Flicker is also caused if there are frame delays between user callback being invoked and `visible` state being set **New Behavior**: Initiate dismiss modal only when app logic sets `visible` state to false **Steps to reproduce bug**: Pass empty function as `onDismiss` callback and press outside of modal - modal flickers
1 parent 2827b9c commit 868936b

File tree

2 files changed

+2
-25
lines changed

2 files changed

+2
-25
lines changed

src/components/Modal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -206,14 +206,14 @@ function Modal({
206206
accessibilityViewIsModal
207207
accessibilityLiveRegion="polite"
208208
style={StyleSheet.absoluteFill}
209-
onAccessibilityEscape={hideModal}
209+
onAccessibilityEscape={onDismissCallback}
210210
testID={testID}
211211
>
212212
<AnimatedPressable
213213
accessibilityLabel={overlayAccessibilityLabel}
214214
accessibilityRole="button"
215215
disabled={!dismissable}
216-
onPress={dismissable ? hideModal : undefined}
216+
onPress={dismissable ? onDismissCallback : undefined}
217217
importantForAccessibility="no"
218218
style={[
219219
styles.backdrop,

src/components/__tests__/Modal.test.tsx

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -130,29 +130,6 @@ describe('Modal', () => {
130130
opacity: 1,
131131
});
132132
});
133-
134-
it('should invoke the onDismiss function after the animation', () => {
135-
const onDismiss = jest.fn();
136-
const { getByTestId } = render(
137-
<Modal testID="modal" visible onDismiss={onDismiss}>
138-
{null}
139-
</Modal>
140-
);
141-
142-
expect(onDismiss).not.toHaveBeenCalled();
143-
144-
act(() => {
145-
fireEvent.press(getByTestId('modal-backdrop'));
146-
});
147-
148-
expect(onDismiss).not.toHaveBeenCalled();
149-
150-
act(() => {
151-
jest.runAllTimers();
152-
});
153-
154-
expect(onDismiss).toHaveBeenCalledTimes(1);
155-
});
156133
});
157134

158135
describe('if closed via Android back button', () => {

0 commit comments

Comments
 (0)