feat(components-native): Replace react-native-modalize with react-native-bottom-sheet for ContentOverlay #2819

edison-cy-yang · 2025-11-19T01:21:13Z

Remaining tasks

keyboardAvoidingBehavior prop not implemented
avoidKeyboardLikeIOS prop not implemented
modalForLargeScreens style not applied
Mock BottomSheetModal and BottomSheetScrollView in MockBottomSheet
Make sure this builds for the doc site
Unit test, should be able to reuse existing test with minimal modifications
Copy all the changes to ContentOverlay, there should be no rebuilt.

We also need to go through existing ContentOverlay usages and find out what kind of inputs are currently being used. I realized BottomSheet.InputText may not be the only wrapper input component we need. To recap, BottomSheet.InputText is a wrapper around InputText that implements onFocus and onBlur to properly position keyboard against these inputs. If we do indeed need more wrapper inputs, we will need to follow the pattern in BottomSheet.InputText for every input component, and replace each existing instance 🥲

This PR targets #2803, but does not depend on it.

Motivations

Changes

Added

Changed

Deprecated

Removed

Fixed

Security

Testing

ContentOverlay.rebuilt.tsx is created for the sake of testing the old version and compare against the new one in simulator. This should not be a rebuilt and should completely replace ContentOverlay.tsx

To test with live linking:

Export these from the ContentOverlay barrel

export { ContentOverlayRebuilt } from "./ContentOverlay.rebuilt";
export type { ContentOverlayRebuiltRef } from "./types";

Add ContentOverlayRebuilt to meta.json
Follow the mobile Atlantis live linking guide, so you can have ContentOverlay and ContentOverlayRebuilt side by side

Changes can be
tested via Pre-release

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

…ttom sheet and keyboard positioning

…ttomSheet

…rop in BottomSheet

…node_modules

ZakaryH · 2026-01-08T00:17:53Z

packages/components-native/src/ContentOverlay/ContentOverlay.tsx

+
+  const draggable = onBeforeExit ? false : isDraggable;
+  // Prevent the Overlay from being flush with the top of the screen, even if we are "100%" or "fullscreen"
+  const topInset = insets.top || tokens["space-larger"];


on Android the top inset is coming back as 0, resulting in the overlay being flush against the top bar of the device

it seems we always want a gap, even if it's "fullscreen" and while this works for iOS we need to provide a value for Android.

the alternative is to set snap points that are NOT 100%, which would do the same thing but it makes the code a little more complicated since iOS would have both the insets and the reduced snap point.

we could remove the insets altogether if we want, and strictly use snappoints... though that will likely get interesting with the dynamic sizing because we don't use snap points there so this might be the best given our goal.

…-content-overlay

github-actions · 2026-01-16T20:24:56Z

Published Pre-release for 115d12f with versions:

  - @jobber/components-native@0.89.5-JOB-140606-115d12f.110+115d12f0b

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

npm install @jobber/components-native@0.89.5-JOB-140606-115d12f.110+115d12f0b

remove erroneous documenation

* deprecate legacy prop * update props * fully removed unused props

* uninstall modalize * sync lockfile with npm i * remove Modalize reference in override

* add ContentOverlayProvider, integrate with InputText to handle keyboard interactions * avoid TS error, fix mock, add keyboard config props * remove redundant test * use interactive to prevent issues when no snap points * prevent drag/pan in new way, always provide snap points to fix keyboard dismiss restoration * add context for our single snap point entry * use simpler callback for onClose * add a couple tests * handle large screen modal flow * remove unnecessary ContentOverlay useEffect * update draggable logic and comments * replace provider in tests * remove low value tests

jdeichert · 2026-01-19T17:31:30Z

packages/components-native/src/ContentOverlay/ContentOverlay.stories.tsx

+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const BasicTemplate = () => {


In the docs site ContentOverlay config, need to adjust the storybook link to go to the new v9 mobile instance instead of the old v7:

packages/components-native/src/ContentOverlay/ContentOverlay.style.ts

jdeichert · 2026-01-19T20:50:06Z

packages/components-native/src/ContentOverlay/ContentOverlay.tsx

+  // While we no longer need to adhere to this somewhat awkward behavior, we will leave it as is until a larger refactor.
+  if (onBeforeExit) {
+    return false;
+  }


Throwing this comment here as it's related.

When I supply onBeforeExit, the new ContentOverlay is not fullscreen and also is not dismissible at all (no dismiss button, no swipe down, no clickaway handling). I'm unsure whether the lack of fullscreen is a problem, but the lack of dismiss functionality seems odd. Actually, adding the fullScreen prop solves both of the problems above. But even without fullScreen, I'm pretty sure we might expect it to be at least dismissible with swipe down.

Is that expected or a bug?

Screen.Recording.2026-01-19.at.12.47.21.PM.mov

Here's my test case, note that InnerContent is just a few Text nodes.

<ContentOverlay ref={overlayRef} title="Welcome NEW!" onBeforeExit={() => { overlayRef.current?.close?.(); }} > <InnerContent /> </ContentOverlay>

good catch. one of those issues is from the draggable logic for sure, I can address that one pretty easily.

aside from that though, there's a whole mess to untangle here. I'm going to take a swing at making a testable module and ideally a small table/chart because there are too many permutations and weird combinations that I'm not entirely sure what is expected in each case.

I know you already know this, but just following up here for posterity - I have a separate PR to address this: #2884

since it was originally built against the legacy ContentOverlay, it is the blueprint for the logic/behavior we expect.

it should be approximately equivalent now with the new library consuming and implementing those abstracted behavior descriptions - though there are a couple things that might behave a little bit different. I know there are at least 2 bugs in the old version.

the deprecated version of the component uses both showDismiss and shouldShowDismiss allowing related code & functionality to get out of sync

and there was a strange pan gesture interaction I encountered with the default props but I can't seem to reproduce it now. maybe it was only happening on Android.

hmmm it's still misbehaving. I'll have to fix that.

I think I know what the problem is now though at least!

ok I get it now. the old one has a bunch of really invalid combinations.

onBeforeExit + adjustToContentHeight means you cannot close it at all

you must explicitly set showDismiss={true} because otherwise it will fail all the other conditions for shouldShowDismiss and you now have no way to dismiss the overlay since both dragging and background presses have been disabled.

this component's props API is a nightmare. I guess I will reproduce the existing behavior to avoid making breaking changes but none of this makes any sense.

I also don't like the old behaviour.. so if it's worth breaking this logic here to make an improvement and then double checking all existing usages are fine (maybe during the integration ticket), then I'm fine that!

Also fine with matching the old behaviour even though it doesn't make sense. I think we both know how much this component's API needs to be adjusted... so that sounds like a future ticket.

EDIT: I see you made the change in the other PR 👍

jdeichert · 2026-01-19T22:09:38Z

packages/components-native/src/InputText/InputText.tsx

    updateFormAndState(removedIOSCharValue);
  }

+  function handleBottomSheetFocus(event?: FocusEvent) {


Looks like Android's keyboard handling is behaving a bit weird.. shows a large blank space that takes up the scroll view container. Not sure if this is related to focus/blur handling here, or something configurable on the BottomSheetScrollView itself.

Screen.Recording.2026-01-19.at.1.58.41.PM.mov

Here's the code I used for testing... just throw some Texts and inputs in there for testing.

<ContentOverlay title="Welcome NEW!" scrollEnabled > <InnerContent /> </ContentOverlay>

that was an issue I had at one point, however from my testing I have not seen it since I applied a fix so that's odd it's happening again for you.

would you mind sharing the specs of the emulator you're running it on?

DM'd but also posting here, my emulator is Pixel_3a_API_34_extension_level_7_arm64-v8

jdeichert · 2026-01-19T22:46:56Z

packages/components-native/src/InputText/InputText.tsx

+    }));
+  }
+
+  function handleBottomSheetBlur(event?: FocusEvent) {


Throwing this comment here, though not sure if it's related to this code.

Seeing some weird behaviour on a physical iOS device.. however it's an iPod Touch and on a really old iOS 15. So I'm not sure if we need to worry about this case, unless someone can repro on a more modern device.

When dismissing the keyboard with Done on the keyboard, it mostly seems to work fine. However, when dismissing the keyboard by tapping the ContentOverlay, the keyboard hides and leaves a blank white container taking up space.

ipod.ios.15.MP4

same as the other weird blank space keyboard thing you mentioned, I also saw this at one point but not since some fixes were applied.

notably this does happen on the OLD ContentOverlay with certain props. is there any chance this is rendering an instance of that?

if not, I'll have to try some other devices/iOS versions because neither my physical iOS device nor my simulators are exhibiting that behavior.

notably this does happen on the OLD ContentOverlay with certain props. is there any chance this is rendering an instance of that?

nope, definitely the new ContentOverlay! I DM'd you my QA branch for JM.

If we can't repro this on something more modern, we can resolve this thread 👍

…-content-overlay

…rity (#2884) * add behavior computation module with tests, implement in ContentOverlay * clean up tests * update spelling for consistency * update logic to mirror existing * revert back to position for top logic

jdeichert · 2026-01-23T17:26:14Z

packages/components-native/src/ContentOverlay/ContentOverlay.tsx

-          {renderHeader()}
-          <View testID="ATL-Overlay-Children">{children}</View>
-        </BottomSheetScrollView>
+        <BottomSheetView style={{ height: windowHeight }}>


Wow, that was it? Nice!

I'm hoping so! it seems to have fixed it for me, fingers crossed that holds true.

I found this solution and one other one where someone was saying that a lack of a fixed height dimension on the parent was the issue. their fix was to apply a height to the entire app, but I was curious if you could do it for the scrollview parent instead.

https://stackoverflow.com/questions/75873878/react-native-gorhom-bottom-sheet-collapses-opens-when-keyboard-dismiss-or-input

…oller (#2889) * add RNKC, use to fix SV issues in ContentOverlay * prevent ts errors in mocks * provide override for RNKC package * add additional mocks for site * add aliases for RN packages to avoid vite failures * revert aliases, use exernal instead * surgically correct package-lock state * update package-lock dep locations

jdeichert

Approved 🎉

Refreshed the Blocked label as we're not planning on merging this until we do the integration work in JM.

edison-cy-yang added 30 commits October 28, 2025 15:16

install react-native-bottom-sheet in components-native

0d471ea

added minimal BottomSheetRebuilt component

aaf2d30

basic bottomsheet styling and v9 story

fe12eb2

background and overlay style

f28af9e

ref can be directly accessed as a prop

6a26dc6

BottomSheet Footer

9c0cf71

support heading

eef6213

use handleChange to expose onClose and onOpen

398d915

cleanup props

88bd7b6

back to forwardRef and map existing API to react-native-bottom-sheet

aa0c61b

bottomsheet input text component with handle on focus and blur for bo…

36df1e1

…ttom sheet and keyboard positioning

fixed footer overlapping content

414a864

add padding to bottom sheet input text

45d7667

make content flow behind the footer

7de3f5c

replace BottomSheet implementation with @gorhom/bottom-sheet, mock Bo…

376e1ec

…ttomSheet

ship @gorhom/bottom-sheet as peerDep

07cd2c2

convert mockBottomSheet to export in ESM

5869f89

ship BottomSheetInputText as BottomSheet.InputText and use ref as a p…

07f9340

…rop in BottomSheet

storybook v9 for BottomSheet

453723d

props json for InputText based components and BottomSheet

332d8f7

remove BottomSheet story book v7 and update doc site story link

ed67a7e

mock @gorhom/bottom-sheet for doc site

0f6f938

update dead link to Menu

f2cff43

update test to use userEvent

cbcb81f

explicit type annotation for animatedKeyboardState

8159b76

try to get aliases to apply before rollup resolves dependencies from …

a0298bc

…node_modules

add @gorhom/bottom-sheet to modulesToTranspile

0aab050

add reanimated and bottom-sheet to optimizeDeps

04e42bd

remove react-native-reanimated from modulesToTranspile

bec688a

debug storybook vite build log

b316216

provide gap between Overlay and top via the same mechanism

3bcd797

ZakaryH reviewed Jan 8, 2026

View reviewed changes

ZakaryH and others added 2 commits January 15, 2026 12:52

Merge remote-tracking branch 'origin' into JOB-140606-implement-it-in…

7c519e4

…-content-overlay

Merge branch 'master' into JOB-140606-implement-it-in-content-overlay

fd13e89

jdeichert marked this pull request as ready for review January 16, 2026 20:19

jdeichert requested a review from a team as a code owner January 16, 2026 20:19

jobbiebot bot added review requested Team UX Foundations labels Jan 16, 2026

ZakaryH added 2 commits January 16, 2026 16:16

docs(components-native): ContentOverlay Doc Updates (#2879)

f665ac1

remove erroneous documenation

feat(components-native): Handle Previous ContentOverlay Props (#2869)

b6fa404

* deprecate legacy prop * update props * fully removed unused props

ZakaryH added the blocked label Jan 17, 2026

ZakaryH added 2 commits January 19, 2026 07:24

chore(components-native): Remove Modalize Library (#2877)

706c52f

* uninstall modalize * sync lockfile with npm i * remove Modalize reference in override

jdeichert reviewed Jan 19, 2026

View reviewed changes

packages/components-native/src/ContentOverlay/ContentOverlay.style.ts Show resolved Hide resolved

jdeichert reviewed Jan 19, 2026

View reviewed changes

ZakaryH and others added 4 commits January 21, 2026 11:56

Merge remote-tracking branch 'origin' into JOB-140606-implement-it-in…

7b20e1e

…-content-overlay

update mobile storybook link

7718c53

provide explicit height to avoid blank space issue on Android

115d12f

jdeichert reviewed Jan 23, 2026

View reviewed changes

jdeichert approved these changes Feb 2, 2026

View reviewed changes

jobbiebot bot added approved and removed review requested labels Feb 2, 2026

jdeichert added blocked and removed blocked labels Feb 2, 2026

feat(components-native): Replace react-native-modalize with react-native-bottom-sheet for ContentOverlay #2819

Are you sure you want to change the base?

feat(components-native): Replace react-native-modalize with react-native-bottom-sheet for ContentOverlay #2819

Uh oh!

Conversation

edison-cy-yang commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Remaining tasks

Motivations

Changes

Added

Changed

Deprecated

Removed

Fixed

Security

Testing

Uh oh!

ZakaryH Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jdeichert Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jdeichert Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jdeichert Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jdeichert Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jdeichert Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jdeichert left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

edison-cy-yang commented Nov 19, 2025 •

edited

Loading

ZakaryH Jan 8, 2026 •

edited

Loading

github-actions bot commented Jan 16, 2026 •

edited

Loading

jdeichert Jan 19, 2026 •

edited

Loading

jdeichert Jan 19, 2026 •

edited

Loading

jdeichert Jan 22, 2026 •

edited

Loading

jdeichert Jan 19, 2026 •

edited

Loading

jdeichert Jan 19, 2026 •

edited

Loading

jdeichert left a comment •

edited

Loading