chore(Cross): [IOAPPX-356] Add divider to first level sections when the user scrolls #6054
Conversation
This file contains 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
dmnplb
added
the
Design System
pagopa-github-bot
changed the title
Affected stories
|
dmnplb
added a commit
to pagopa/io-app-design-system
that referenced
this pull request
Aug 27, 2024
… allow transition even if `triggerOffset` is not set (#323) ## Short description This PR adds the new `enableDiscreteTransition` option to `HeaderSecondLevel` to allow an animated transition when `triggerOffset` is not set, or in some specific cases where there is a custom background and the default transition looks bad. The new transition differs from the previous one in that it's always triggered when the user scrolls down, even by one pixel. In the default transition you need to set a custom height along with a proper `snapToOffsets` array. ## List of changes proposed in this pull request - Add the new `enableDiscreteTransition` boolean prop along with the `animatedRef` mandatory prop - Add two new screens to the `example` app for demo purposes ### Preview | Default | Discrete | |--------|--------| | <video src="https://github.com/user-attachments/assets/64066269-74db-462d-8a40-284410e0328a" /> | <video src="https://github.com/user-attachments/assets/cd565eee-f97c-4cee-bb2f-921822c2e016" /> | #### Related PR * pagopa/io-app#6054 ## How to test 1. Launch the example app 2. Go to the **Header Second Level (discrete transition, …)** screens
mastro993
reviewed
Sep 13, 2024
Comment on lines
54
to
96
| /* CODE RELATED TO THE HEADER */ | ||
|
|
||
| const navigation = useIONavigation(); | ||
| const scrollViewContentRef = useAnimatedRef<Animated.ScrollView>(); | ||
|
|
||
| /* Scroll to top when the active tab is tapped */ | ||
| useTabItemPressWhenScreenActive( | ||
| () => scrollViewContentRef.current?.scrollTo({ y: 0, animated: true }), | ||
| false | ||
| ); | ||
|
|
||
| const isSettingsVisibleAndHideProfile = useIOSelector( | ||
| isSettingsVisibleAndHideProfileSelector | ||
| ); | ||
|
|
||
| const helpAction = useHeaderFirstLevelActionPropHelp(ROUTES.WALLET_HOME); | ||
| const settingsAction = useHeaderFirstLevelActionPropSettings(); | ||
|
|
||
| useLayoutEffect(() => { | ||
| const headerFirstLevelProps: HeaderFirstLevel = { | ||
| title: I18n.t("wallet.wallet"), | ||
| firstAction: helpAction, | ||
| testID: "wallet-home-header-title", | ||
| animatedRef: scrollViewContentRef, | ||
| ...(isSettingsVisibleAndHideProfile | ||
| ? { | ||
| type: "twoActions", | ||
| secondAction: settingsAction | ||
| } | ||
| : { type: "singleAction" }) | ||
| }; | ||
|
|
||
| navigation.setOptions({ | ||
| header: () => <HeaderFirstLevel {...headerFirstLevelProps} /> | ||
| }); | ||
| }, [ | ||
| helpAction, | ||
| isSettingsVisibleAndHideProfile, | ||
| navigation, | ||
| scrollViewContentRef, | ||
| settingsAction | ||
| ]); | ||
|
|
There was a problem hiding this comment.
We could move everything inside the WalletScrollView component. What do you think?
There was a problem hiding this comment.
Done in the following commit → 4005f91
|
In the services screen, I cannot reproduce the behavior that I see in the preview videos. The search bar is not sticky. Senza.nome.mov |
@mastro993 That's because we got rid of the sticky behavior (removed in the following commit → eff2bd1) |
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.
Note
This change applies only to the Wallet (new), Services, Payments and Profile sections.
Short description
This PR adds the new divider transition to first level sections when the user scrolls. To get this behaviour, we need to define
HeaderFirstLevelPropsdirectly in the main screen throughuseLayoutEffectwhere the mainScrollVieworFlatListis placed.To avoid code duplication, there's a new
useHeaderFirstLevelActionPropHelp's hook that returns a FAQ configuration object based on the provided route.List of changes proposed in this pull request
HeaderFirstLevelusing theuseScrollViewOffsethook fromreanimatedendBlockprop toHeaderFirstLevelto render custom block (see the Services screen for a demonstrationupdate: removed from the branch)HeaderFirstLevelHandlerto relative first-level sectionsGradientScrollViewwithIOScrollViewin the new Wallet home screen, adding dark mode support in the process (cc @mastro993)useHeaderFirstLevelActionPropHelphookHeaderFirstLevelwith the latest changes fromio-app-design-system. Before merging this PR we'll also update the component in theio-app-design-systemPreview
Important
The divider is set with
hairlineWidth, so it's very thin. If you want to see the change, download the following videos and play them at full sizewallet-divider.mp4
services-divider.mp4
profile-divider.mp4
How to test
Go to the above sections and check that everything is correct. Also check the relative flow of the Assistance in each first level section.