Skip to content

Commit 79fea5e

Browse files
mountinymountiny
authored
Merge pull request Expensify#67748 from software-mansion-labs/feat/reanimated-popovers
Migrate Popover modals to use react-native-reanimated
2 parents 0b868b6 + 8012d78 commit 79fea5e

5 files changed

Lines changed: 32 additions & 41 deletions

File tree

‎src/components/Modal/BaseModal.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import type ReanimatedModalProps from './ReanimatedModal/types';
3333
import type BaseModalProps from './types';
3434
import type {FocusTrapOptions} from './types';
3535

36-
const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN];
36+
const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN, CONST.MODAL.MODAL_TYPE.POPOVER];
3737

3838
type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & {
3939
type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
@@ -165,8 +165,10 @@ function BaseModal(
165165

166166
const {sidePanelOffset} = useSidePanel();
167167
const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
168-
const sidePanelReanimatedStyle =
169-
shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} : undefined;
168+
const sidePanelAnimatedStyle =
169+
(shouldUseReanimatedModal || type === CONST.MODAL.MODAL_TYPE.POPOVER) && shouldApplySidePanelOffset && !isSmallScreenWidth
170+
? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]}
171+
: undefined;
170172
const keyboardStateContextValue = useKeyboardState();
171173

172174
const [modalOverlapsWithTopSafeArea, setModalOverlapsWithTopSafeArea] = useState(false);
@@ -459,7 +461,7 @@ function BaseModal(
459461
>
460462
<Animated.View
461463
onLayout={onViewLayout}
462-
style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
464+
style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelAnimatedStyle]}
463465
ref={ref}
464466
>
465467
<ColorSchemeWrapper>{children}</ColorSchemeWrapper>

‎src/components/Modal/ReanimatedModal/Container/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function Container({
4646

4747
return (
4848
<View
49-
style={[style, styles.modalContainer]}
49+
style={style}
5050
// eslint-disable-next-line react/jsx-props-no-spreading
5151
{...props}
5252
>

‎src/components/Modal/ReanimatedModal/Container/index.web.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function Container({
4646

4747
return (
4848
<Animated.View
49-
style={[style, styles.modalContainer, type !== CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && styles.modalAnimatedContainer, animatedStyles, {zIndex: 1}]}
49+
style={[style, type !== CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && type !== CONST.MODAL.MODAL_TYPE.POPOVER && styles.modalAnimatedContainer, animatedStyles, {zIndex: 1}]}
5050
exiting={Exiting}
5151
// eslint-disable-next-line react/jsx-props-no-spreading
5252
{...props}

‎src/styles/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2687,8 +2687,6 @@ const styles = (theme: ThemeColors) =>
26872687
borderColor: theme.transparent,
26882688
},
26892689

2690-
modalContainer: {height: '100%'},
2691-
26922690
modalAnimatedContainer: {width: '100%'},
26932691

26942692
modalContainerBox: {

‎src/styles/utils/generators/ModalStyleUtils.ts‎

Lines changed: 24 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
9393
// and can be dismissed by clicking outside of the modal.
9494
modalStyle = {
9595
...modalStyle,
96-
...{
97-
justifyContent: 'center',
98-
alignItems: 'center',
99-
},
96+
justifyContent: 'center',
97+
alignItems: 'center',
98+
height: '100%',
10099
};
101100
modalContainerStyle = {
102101
boxShadow: theme.shadow,
@@ -118,9 +117,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
118117
// viewed on a smaller device (e.g. mobile or mobile web).
119118
modalStyle = {
120119
...modalStyle,
121-
...{
122-
alignItems: 'center',
123-
},
120+
alignItems: 'center',
121+
height: '100%',
124122
};
125123
modalContainerStyle = {
126124
boxShadow: theme.shadow,
@@ -148,9 +146,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
148146
// viewed on a smaller device (e.g. mobile or mobile web).
149147
modalStyle = {
150148
...modalStyle,
151-
...{
152-
alignItems: 'center',
153-
},
149+
alignItems: 'center',
150+
height: '100%',
154151
};
155152
modalContainerStyle = {
156153
boxShadow: theme.shadow,
@@ -175,10 +172,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
175172
// A centered modal that cannot be dismissed with a swipe.
176173
modalStyle = {
177174
...modalStyle,
178-
...{
179-
alignItems: 'center',
180-
justifyContent: 'center',
181-
},
175+
alignItems: 'center',
176+
justifyContent: 'center',
177+
height: '100%',
182178
};
183179
modalContainerStyle = {
184180
boxShadow: theme.shadow,
@@ -201,9 +197,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
201197
// A centered modal that takes up the minimum possible screen space on all devices
202198
modalStyle = {
203199
...modalStyle,
204-
...{
205-
alignItems: 'center',
206-
},
200+
alignItems: 'center',
201+
height: '100%',
207202
};
208203
modalContainerStyle = {
209204
boxShadow: theme.shadow,
@@ -225,10 +220,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
225220
case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED:
226221
modalStyle = {
227222
...modalStyle,
228-
...{
229-
alignItems: 'center',
230-
justifyContent: 'flex-end',
231-
},
223+
alignItems: 'center',
224+
justifyContent: 'flex-end',
225+
height: '100%',
232226
};
233227
modalContainerStyle = {
234228
width: '100%',
@@ -258,11 +252,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
258252
modalStyle = {
259253
...modalStyle,
260254
...popoverAnchorPosition,
261-
...{
262-
position: 'absolute',
263-
alignItems: 'center',
264-
justifyContent: 'flex-end',
265-
},
255+
position: 'absolute',
256+
alignItems: 'center',
257+
justifyContent: 'flex-end',
266258
};
267259
modalContainerStyle = {
268260
borderRadius: variables.componentBorderRadiusLarge,
@@ -281,12 +273,11 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
281273
case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED:
282274
modalStyle = {
283275
...modalStyle,
284-
...{
285-
marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
286-
width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
287-
flexDirection: 'row',
288-
justifyContent: 'flex-end',
289-
},
276+
marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
277+
width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
278+
flexDirection: 'row',
279+
justifyContent: 'flex-end',
280+
height: '100%',
290281
};
291282
modalContainerStyle = {
292283
width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
@@ -321,7 +312,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
321312
shouldAddTopSafeAreaPadding = true;
322313
break;
323314
default:
324-
modalStyle = {};
315+
modalStyle = {height: '100%'};
325316
modalContainerStyle = {};
326317
swipeDirection = 'down';
327318
animationIn = 'slideInUp';

0 commit comments

Comments
 (0)