Skip to content

Conversation

jhorvat
Copy link
Contributor

@jhorvat jhorvat commented Oct 15, 2025

JOB-139048

GetJobber/jobber-mobile#11251

Motivations

On Android, running the new arch, ContentOverlays can become completely unresponsive, including dismissal (except using the OS back) on subsequent opens. i.e. the first time the ContentOverlay is opened it works fine, the second time it doesn't respond to touch whatsoever.

video_1280.mp4

Changes

Added

  • The fundamental issue here lives within react-native-modalize. It has not been updated for ~3 years, and does not work well with the new Fabric renderer. Thankfully we plan on replacing this library, so this change is a temporary fix to the new arch working.
  • To be honest I'm unclear as to the exact failure mode within the dep, but with investigation (thanks LLMs 🙏 ) I found that adding a key to the Modalize component and opening it within a requestAnimationFrame callback got it working.
  • To clean this solution up I added a new UNSAFE_ModalizeWrapper and changed ContentOverlay to use that component.
    • Also exposed the component because the legacy ContentOverlay in JM needs this fix as well, hence the UNSAFE_ prefix. Its ugly, but since its temporary I think it should be fine.
    • I have noticed that some touch events are still swallowed on Android, but again since this is temporary I think that this is acceptable.
    • iOS behaves completely normally, with or without the wrapper

Changed

Deprecated

Removed

Fixed

Security

Testing

I made a testing screen in JM with a raw Modalize component with the fix, and then a ContentOverlay.

Android - New Arch

Android.-.New.Arch.mp4

Android - Old Arch

Screen_recording_20251016_084639.mp4

iOS - New Arch

ScreenRecording_10-16-2025.08-14-32_1.MP4

iOS - Old Arch

ScreenRecording_10-16-2025.08-36-14_1.MP4

Changes can be
tested via Pre-release


In Atlantis we use Github's built in pull request reviews.

Copy link

Published Pre-release for 04134dd with versions:

  - @jobber/[email protected]+04134dd81

To install the new version(s) for Mobile run:

npm install @jobber/[email protected]+04134dd81

Copy link

cloudflare-workers-and-pages bot commented Oct 15, 2025

Deploying atlantis with  Cloudflare Pages  Cloudflare Pages

Latest commit: a2ce152
Status: ✅  Deploy successful!
Preview URL: https://79788970.atlantis.pages.dev
Branch Preview URL: https://job-139048-new-arch-android.atlantis.pages.dev

View logs

@jhorvat jhorvat marked this pull request as ready for review October 16, 2025 15:47
@jhorvat jhorvat requested a review from a team as a code owner October 16, 2025 15:47
"Typography",
"TypographyGestureDetector"
"TypographyGestureDetector",
"UNSAFE_WrappedModalize"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be deleted once we no longer export this component to consumers 👍

@@ -1,2 +1,3 @@
export { ContentOverlay } from "./ContentOverlay";
export { UNSAFE_WrappedModalize } from "./UNSAFE_WrappedModalize";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And we can delete this too

ref,
() => ({
open(dest) {
setOpenRenderId(id => id + 1);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this increments for each time it's opened. I don't think we'll run into any issues here, just calling out that I think this is completely fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants