Conversation
ruijialin-avalabs
requested review from
B0Y3R-AVA,
alexnicolae-ava,
atn4z7,
bogdandobritoiu and
onghwan
as code owners
There was a problem hiding this comment.
Pull request overview
This PR updates the local patch-package patch for react-native-collapsible-tab-view@9.0.0-rc.0 to add imperative ref methods intended to resync scroll state and programmatically scroll the active tab to the top.
Changes:
- Add
scrollResync()andscrollToTop()to the collapsible tab view ref API and TypeScript typings. - Implement
scrollToTop()by resetting shared scroll values and issuing a UI-thread scroll command. - Modify the Reanimated
useFrameCallbackscroll sync behavior (attempted throttling).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
packages/core-mobile/patches/react-native-collapsible-tab-view+9.0.0-rc.0.patch
Show resolved
Hide resolved
packages/core-mobile/patches/react-native-collapsible-tab-view+9.0.0-rc.0.patch
Show resolved
Hide resolved
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Ray Lin <137183702+ruijialin-avalabs@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the local patch-package patch for react-native-collapsible-tab-view@9.0.0-rc.0 to expose new imperative ref methods intended to resync scroll state and programmatically scroll the active tab to the top.
Changes:
- Add
scrollResync()andscrollToTop()to the Collapsible Tab View ref API (runtime + typings). - Implement
scrollToTop()by resetting shared scroll values and issuing a UI-thread scroll command. - Modify Reanimated
useFrameCallbackscroll syncing behavior with an attempted throttle.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
packages/core-mobile/patches/react-native-collapsible-tab-view+9.0.0-rc.0.patch
Show resolved
Hide resolved
packages/core-mobile/patches/react-native-collapsible-tab-view+9.0.0-rc.0.patch
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Updates the local patch-package patch for react-native-collapsible-tab-view@9.0.0-rc.0 to extend the tab view’s imperative ref API and adjust scroll sync behavior, aimed at resyncing scroll state and enabling programmatic “scroll active tab to top”.
Changes:
- Adds a new
scrollToTop()imperative ref method (implementation + typings). - Resets shared scroll values and issues a UI-thread scroll command when
scrollToTop()is called. - Modifies the Reanimated
useFrameCallbackscroll sync behavior to throttle sync calls.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| @@ -11,6 +11,8 @@ export type RefHandler<T extends TabName = TabName> = { | ||
| setIndex: (index: number) => boolean; | ||
| getFocusedTab: () => T; | ||
| getCurrentIndex: () => number; | ||
| + scrollResync: () => void; | ||
| + scrollToTop: () => void; | ||
| }; |
| const lastSyncBucketRef = React.useRef(0) | ||
| const syncScrollFrame = useFrameCallback(({ timeSinceFirstFrame }) => { | ||
| - syncCurrentTabScrollPosition() | ||
| + if (timeSinceFirstFrame % 100 === 0) { | ||
| + const bucket = Math.floor(timeSinceFirstFrame / 100) | ||
| + if (bucket !== lastSyncBucketRef.current) { | ||
| + lastSyncBucketRef.current = bucket | ||
| + syncCurrentTabScrollPosition() | ||
| + } |
| @@ -233,7 +233,24 @@ export const Container = React.memo( | ||
| getCurrentIndex: () => { | ||
| return index.value; | ||
| - } | ||
| - }), // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| - [onTabPress]); | ||
| + }, | ||
| + scrollToTop: () => { | ||
| + scrollYCurrent.value = 0; | ||
| + const resetMap = {}; | ||
| + for (const name of tabNamesArray) { | ||
| + resetMap[name] = 0; | ||
| + } | ||
| + scrollY.value = { ...scrollY.value, ...resetMap }; | ||
| + const currentName = tabNames.value[index.value]; | ||
| + const ref = refMap[currentName]; | ||
| + if (ref) { | ||
| + runOnUISync(scrollToImpl, ref, 0, -contentInset, false); | ||
| + } | ||
| + toggleSyncScrollFrame(true); | ||
| + } | ||
| + }), // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| + [onTabPress, toggleSyncScrollFrame]); |
| @@ -42,15 +68,17 @@ | |||
| + scrollY.value = { ...scrollY.value, ...resetMap } | |||
| + const currentName = tabNames.value[index.value] | |||
| + const ref = refMap[currentName] | |||
| + runOnUISync(scrollToImpl, ref, 0, -contentInset, false) | |||
| + if (ref) { | |||
| + runOnUISync(scrollToImpl, ref, 0, -contentInset, false) | |||
| + } | |||
| + toggleSyncScrollFrame(true) | |||
| + }, | |||
| @@ -30,6 +30,8 @@ export type RefHandler<T extends TabName = TabName> = { | ||
| setIndex: (index: number) => boolean | ||
| getFocusedTab: () => T | ||
| getCurrentIndex: () => number | ||
| + scrollResync: () => void | ||
| + scrollToTop: () => void | ||
| } |
Description
iOS: 7779
Android: 7780
Ticket: CP-13691
Please provide:
This PR updates the local
patch-packagepatch forreact-native-collapsible-tab-view@9.0.0-rc.0to add imperative ref methods intended to resync scroll state and programmatically scroll the active tab to the top.Changes:
scrollResync()andscrollToTop()to the collapsible tab view ref API and TypeScript typings.scrollToTop()by resetting shared scroll values and issuing a UI-thread scroll command.useFrameCallbackscroll sync behavior (attempted throttling).Screenshots/Videos
Include relevant screenshots or screen recordings of iOS and Android.
Testing
Dev Testing (if applicable)
QA Testing (if applicable)
Checklist
Please check all that apply (if applicable)