-
Notifications
You must be signed in to change notification settings - Fork 31
fix(components-native): add modalize wrapper to fix new arch issues #2781
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
Published Pre-release for 04134dd with versions:
To install the new version(s) for Mobile run:
|
Deploying atlantis with
|
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 |
packages/components-native/src/ContentOverlay/UNSAFE_WrappedModalize.tsx
Show resolved
Hide resolved
"Typography", | ||
"TypographyGestureDetector" | ||
"TypographyGestureDetector", | ||
"UNSAFE_WrappedModalize" |
There was a problem hiding this comment.
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"; |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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.
JOB-139048
GetJobber/jobber-mobile#11251
Motivations
On Android, running the new arch,
ContentOverlay
s can become completely unresponsive, including dismissal (except using the OS back) on subsequent opens. i.e. the first time theContentOverlay
is opened it works fine, the second time it doesn't respond to touch whatsoever.video_1280.mp4
Changes
Added
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.key
to theModalize
component and opening it within arequestAnimationFrame
callback got it working.UNSAFE_ModalizeWrapper
and changedContentOverlay
to use that component.ContentOverlay
in JM needs this fix as well, hence theUNSAFE_
prefix. Its ugly, but since its temporary I think it should be fine.Changed
Deprecated
Removed
Fixed
Security
Testing
I made a testing screen in JM with a raw
Modalize
component with the fix, and then aContentOverlay
.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.