[$250] [Dev][StrictMode] Popover menu has no background smallscreen

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: DEV only
Reproducible in production?: DEV only
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1720819445275459

Action Performed:

Long press on any report in LHN

Expected Result:

Popover menus haves translucent background

Actual Result:

Popover menu dont have background

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Screen.Recording.2024-07-13.at.2.49.31.AM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ff564d543a9355a6
• Upwork Job ID: 1812925525309666872
• Last Price Increase: 2024-07-29
• Automatic offers:
• dominictb | Contributor | 103339816

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ff564d543a9355a6

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

[lschurr]

I'm not able to test since I don't work in a DEV environment. @allroundexperts could you try reproducing this?

[allroundexperts]

It's easily reproducible @lschurr.

Screen.Recording.2024-07-16.at.12.05.09.AM.mov

[isogit123]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Popover menu has no background in small screens in the development environment when using the strict mode.

What is the root cause of that problem?

ReactNativeModal isn't showing the backdrop background and the opacity of the background is set to zero when the strict mode is enabled. The background appears as expected if the strict mode is disabled. As dominictb mentioned in their proposal, as React renders components twice in the strict mode, the backdrop animatable.View component is initialized with the correct state in the first render, but in the second render, the state is reset so the opacity value is lost. This can be verified by logging the state of the animatable.View component in the componentDidMount event with and without strict mode.

What changes do you think we should make in order to solve the problem?

Using the ReactNativeModal ref, we can set the opacity to the desired value so the background appears as expected by adding the following code snippet:

const modalRef = useRef(null);
try{
    modalRef.current.backdropRef.ref.style.opacity = !shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity;
}
catch {}

in line 209 at:

App/src/components/Modal/BaseModal.tsx

Lines 205 to 218 in 105dce5

	activeModalType: isVisible ? type : undefined,
	}),
	[isVisible, type],
	);
	return (
	<ModalContext.Provider value={modalContextValue}>
	<View
	// this is a workaround for modal not being visible on the new arch in some cases
	// it's necessary to have a non-collapseable view as a parent of the modal to prevent
	// a conflict between RN core and Reanimated shadow tree operations
	// position absolute is needed to prevent the view from interfering with flex layout
	collapsable={false}
	style={[styles.pAbsolute, {zIndex: 1}]}

then bind the ref to the ReactNativeModal at line 224 in the following code snippet:

App/src/components/Modal/BaseModal.tsx

Lines 220 to 230 in 105dce5

	<ReactNativeModal
	// Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
	onClick={(e) => e.stopPropagation()}
	onBackdropPress={handleBackdropPress}
	// Note: Escape key on web/desktop will trigger onBackButtonPress callback
	// eslint-disable-next-line react/jsx-props-no-multi-spaces
	onBackButtonPress={Modal.closeTop}
	onModalShow={handleShowModal}
	propagateSwipe={propagateSwipe}
	onModalHide={hideModal}
	onModalWillShow={saveFocusState}

Below is a screenshot after applying the change:

What alternative solutions did you explore? (Optional)

The last commit to the React Native Modal library used in the Popover menu is 2 years old and is looking for maintainers, which is mentioned in https://github.com/react-native-modal/react-native-modal?tab=readme-ov-file#announcements, so we can use the React Native built-in Modal component or any other wrapper library that is compatible with the strict mode and maintained.