Skip to content

Support rendering TabController inside a ScrollView (with a header) #3235

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

Merged
merged 4 commits into from
Sep 3, 2024

Conversation

ethanshar
Copy link
Collaborator

Description

When rendering TabController layout inside a ScrollView, especially when having a header (see new example screen)
the layout doesn't work well
In order to support that I added the nestedInScrollView prop that handles the TabPages layout differently

Changelog

Support rendering TabController inside a ScrollView (with a header) by passing nestedInScrollView

Additional info

@ethanshar ethanshar added the Important for Next Release PR that must be included in the release version label Aug 27, 2024
@ethanshar ethanshar requested a review from Inbal-Tish August 27, 2024 13:27
@@ -55,6 +55,7 @@ export function registerScreens(registrar) {
registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => require('./TabControllerWithStickyHeaderScreen').default);
Copy link
Collaborator

Choose a reason for hiding this comment

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

You need to wrap screen with gestureHandlerRootHOC

@Inbal-Tish
Copy link
Collaborator

@ethanshar Looks great. Left a small comment

@Inbal-Tish Inbal-Tish assigned ethanshar and unassigned Inbal-Tish Sep 3, 2024
<TabController items={items} nestedInScrollView>
<ScrollView
// stickyHeaderHiddenOnScroll
stickyHeaderIndices={[0, 1]}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Child 0 won't be sticky here so you can also pass only '[1]' as index

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Fixed

@ethanshar ethanshar requested a review from Inbal-Tish September 3, 2024 10:21
@ethanshar ethanshar assigned Inbal-Tish and unassigned ethanshar Sep 3, 2024
@Inbal-Tish Inbal-Tish merged commit fd931ea into master Sep 3, 2024
1 check passed
@Inbal-Tish Inbal-Tish deleted the feat/TabController_nestedScrollView branch September 3, 2024 10:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Important for Next Release PR that must be included in the release version
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants