Repository navigation
feat(bottom-tabs): retune drawer motion, add opt-in progress events - #267
Merged
huhuanming merged 5 commits intoNov 15, 2026
Merged
Conversation
- Retune the native left drawer on iOS and Android to a reference recording: 80% travel, a 62pt corner that rounds in over the first 10%, a light wash (white) or dark wash (gray) over the page, a soft page shadow in light mode and a hairline edge in dark mode, and a menu that scales from 0.97 about its left edge while fading in. - Taps and prop changes ease with cubic-bezier(.55, .6, .2, 1) (0.36s open, 0.29s close); released drags settle on a lightly underdamped spring that keeps the finger velocity; reversing mid-flight keeps the current speed. - Reduce Motion cross-fades on iOS; Android lands immediately when system animations are off. - Add onDrawerProgress (sent only while a handler is set), drawerHostComponent and the BottomTabsDrawerNative export so a UI-thread handler can follow the drawer, plus drawerColorScheme for apps whose theme can differ from the platform appearance. - Update the spec, wrapper tests and Android native tests.
Contributor
|
@codex review |
Contributor
|
@codex security review |
Contributor
|
Cursor review failed. Remote error: |
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
Skipping Bugbot: Bugbot is disabled for this repository. Visit the Bugbot dashboard to update your settings. |
|
Codex Review: Something went wrong. Try again later by commenting “@codex review”. ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Contributor
originalix
reviewed
Nov 14, 2026
Contributor
sidmorizon
reviewed
Nov 14, 2026
sidmorizon
reviewed
Nov 14, 2026
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b51d937515
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
sidmorizon
reviewed
Nov 14, 2026
sidmorizon
reviewed
Nov 14, 2026
- Lay out the React menu slot at 80% so menu content reaches the native drawer's edge. - Enable progress events one commit after mount, from a small host wrapper so the tabs do not re-render; iOS also re-sends the current position when Fabric attaches the event emitter after the first props. - Keep the iOS page shadow on the same corner radius while it rounds in. - Keep at most one Reduce Motion cross-fade snapshot and remove it on a drag, an animated settle, disabling, detach or resize. - Never carry the page past its target under Reduce Motion.
originalix
reviewed
Nov 14, 2026
A user tap or dim close under Reduce Motion now applies its final state behind the cross-fade snapshot and reports onDrawerOpenChange (and the haptic) when the 200 ms fade completes. A newer transition, disabling or detach discards the pending report; a drag or resize reports it at once; a newer non-user request for the same target cancels it.
sidmorizon
reviewed
Nov 14, 2026
sidmorizon
reviewed
Nov 14, 2026
A cross-fade now completes like a running settle: the stable state, the settled event and the haptic follow when it lands. A drag that begins during the fade drops it, so a stale close no longer echoes back as a prop and cancels the drag. Adds an iOS XCTest suite for the fade lifecycle, run hostless by the ui group of the native tests.
originalix
reviewed
Nov 14, 2026
huhuanming
enabled auto-merge (squash)
November 15, 2026 08:58
huhuanming
approved these changes
Nov 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Retunes the native left drawer on iOS and Android to a reference recording measured frame by frame, and adds an opt-in progress event so the app can drive related UI (such as fading the header avatar) on the UI thread.
docs/SPEC.mdis updated to match.Behavior
64 * p62 * min(1, p / .1)(no jump on other display corners).7 * p.5 * p; dark: gray 36 at.58 * pmin(1, p / .6); the host is transparentAPI
onDrawerProgress?: (event) => void: displayed progress clamped to [0, 1], at most once per frame. Native sends it only while a handler is set (the wrapper derives the internalprogressEventsEnabledprop), so apps that don't subscribe keep the old "no progress over the bridge" behavior.drawerHostComponent?plus theBottomTabsDrawerNativeexport: lets an app passAnimated.createAnimatedComponent(BottomTabsDrawerNative), so a Reanimated worklet handles the event on the UI thread. The package itself does not depend on Reanimated.drawerColorScheme?: "light" | "dark": picks the page palette. When omitted it follows the platform appearance. This matters on Android, where the app theme can differ from the configuration's night mode.Verification
p / .6(for example 0.74 measured vs 0.73 expected).:onekeyfe_react-native-bottom-tabs:compileDebugKotlinandcompileDebugAndroidTestKotlinsucceed (codegen includes the new props).BottomTabsDrawerTestis updated for 80% travel and the light wash, and gains two cases: palette/menu end state, and opt-in progress events.example/react-native/__tests__/BottomTabs.drawer.test.tsxpasses 6/6. Packagetsc -bpasses, andyarn lint:test-integritypasses.Not yet verified