Skip to content

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

Merged
jdeichert merged 132 commits intomasterfrom
JOB-140606-implement-it-in-content-overlay
Mar 30, 2026
Merged

feat(components-native): Replace react-native-modalize with react-native-bottom-sheet for ContentOverlay#2819
jdeichert merged 132 commits intomasterfrom
JOB-140606-implement-it-in-content-overlay

Conversation

@edison-cy-yang
Copy link
Copy Markdown
Contributor

@edison-cy-yang edison-cy-yang commented Nov 19, 2025

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.

ZakaryH and others added 3 commits January 22, 2026 11:48
…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
{renderHeader()}
<View testID="ATL-Overlay-Children">{children}</View>
</BottomSheetScrollView>
<BottomSheetView style={{ height: windowHeight }}>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Wow, that was it? Nice!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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
Copy link
Copy Markdown
Contributor

@jdeichert jdeichert left a comment

Choose a reason for hiding this comment

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

Approved 🎉

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

Comment thread packages/components-native/src/ContentOverlay/ContentOverlay.tsx Outdated
Comment on lines +323 to +333
const isKeyboardHandledByScrollView = useIsKeyboardHandledByScrollView();
const bottomSheetContext = useBottomSheetInternal(true);
const shouldHandleBottomSheetKeyboard =
bottomSheetContext !== null && !isKeyboardHandledByScrollView;
const animatedKeyboardState = shouldHandleBottomSheetKeyboard
? bottomSheetContext.animatedKeyboardState
: undefined;
const textInputNodesRef = shouldHandleBottomSheetKeyboard
? bottomSheetContext.textInputNodesRef
: undefined;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This resolves the issue we saw where there is a big gap in the scroll view when input text is focused and keyboard appears.

  • If scrollEnabled and using KeyboardAwareScrollView -> set animatedKeyboardState and textInputNodesRef in bottomSheetContext to undefined, so handleBottomSheetFocus and handleBottomSheetBlur will early return
  • if scrollEnabled is false and not using KeyboardAwareScrollView -> read actual bottom sheet context and let the handlers do their thing to achieve keyboard aware scroll

@ZakaryH
Copy link
Copy Markdown
Contributor

ZakaryH commented Mar 27, 2026

a couple small updates we need to make

  • no longer need ContentOverlayProvider, that's been replaced with a more generic AtlantisOverlayProvider that works for both BottomSheet and ContentOverlay
  • the mocks are already in master for BottomSheetModal so the changes required should be pretty minimal, really just removing the Modalize mock possibly

I think that's all, but worth double checking I haven't missed something in the other BottomSheet PR that has merged already.

@jdeichert jdeichert removed the blocked label Mar 30, 2026
@jdeichert jdeichert merged commit 0a49a04 into master Mar 30, 2026
16 checks passed
@jdeichert jdeichert deleted the JOB-140606-implement-it-in-content-overlay branch March 30, 2026 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants