Skip to content

Commit 63f6e2e

Browse files
authored
Merge pull request #91702 from callstack-internal/fix/centered-modal-fade
Restore slight fade-in for centered alert modals on web
2 parents 8c3ebf7 + a584f5e commit 63f6e2e

2 files changed

Lines changed: 13 additions & 0 deletions

File tree

src/CONST/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2000,6 +2000,8 @@ const CONST = {
20002000
FAB_OUT: ANIMATION_TIMING_FAB_OUT,
20012001
RHP_DURATION_IN_WEB: 150,
20022002
RHP_DURATION_OUT_WEB: 100,
2003+
CENTERED_DURATION_IN_WEB: 120,
2004+
CENTERED_DURATION_OUT_WEB: 80,
20032005
},
20042006
RHP_ENTER_OFFSET_PX_WEB: 60,
20052007
},

src/components/Modal/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
1313
const StyleUtils = useStyleUtils();
1414
const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
1515

16+
const isCentered =
17+
type === CONST.MODAL.MODAL_TYPE.CONFIRM ||
18+
type === CONST.MODAL.MODAL_TYPE.CENTERED ||
19+
type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE ||
20+
type === CONST.MODAL.MODAL_TYPE.CENTERED_SMALL ||
21+
type === CONST.MODAL.MODAL_TYPE.CENTERED_SWIPEABLE_TO_RIGHT;
22+
const animationInTiming = rest.animationInTiming ?? (isCentered ? CONST.MODAL.ANIMATION_TIMING.CENTERED_DURATION_IN_WEB : undefined);
23+
const animationOutTiming = rest.animationOutTiming ?? (isCentered ? CONST.MODAL.ANIMATION_TIMING.CENTERED_DURATION_OUT_WEB : undefined);
24+
1625
const setStatusBarColor = (color = theme.appBG) => {
1726
if (!fullscreen) {
1827
return;
@@ -107,6 +116,8 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
107116
return (
108117
<BaseModal
109118
{...rest}
119+
animationInTiming={animationInTiming}
120+
animationOutTiming={animationOutTiming}
110121
onModalHide={hideModal}
111122
onModalShow={showModal}
112123
onModalWillShow={onModalWillShow}

0 commit comments

Comments
 (0)