-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[IOAPPX-365] Add
enableDiscreteTransition to HeaderSecondLevel to…
… 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
- Loading branch information
Showing
7 changed files
with
265 additions
and
8 deletions.
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import { | ||
| Body, | ||
| H3, | ||
| HeaderSecondLevel, | ||
| IOVisualCostants, | ||
| VSpacer | ||
| } from "@pagopa/io-app-design-system"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import * as React from "react"; | ||
| import { useLayoutEffect } from "react"; | ||
| import { Alert } from "react-native"; | ||
| import Animated, { useAnimatedRef } from "react-native-reanimated"; | ||
| import { useSafeAreaInsets } from "react-native-safe-area-context"; | ||
|
|
||
| export const HeaderSecondLevelScreenDiscreteTransition = () => { | ||
| const insets = useSafeAreaInsets(); | ||
| const navigation = useNavigation(); | ||
|
|
||
| const animatedScrollViewRef = useAnimatedRef<Animated.ScrollView>(); | ||
|
|
||
| useLayoutEffect(() => { | ||
| navigation.setOptions({ | ||
| header: () => ( | ||
| <HeaderSecondLevel | ||
| enableDiscreteTransition | ||
| animatedRef={animatedScrollViewRef as any} | ||
| title={"Questo è un titolo lungo, ma lungo lungo davvero, eh!"} | ||
| goBack={() => navigation.goBack()} | ||
| backAccessibilityLabel="Torna indietro" | ||
| type="threeActions" | ||
| firstAction={{ | ||
| icon: "help", | ||
| onPress: () => { | ||
| Alert.alert("Contextual Help"); | ||
| }, | ||
| accessibilityLabel: "" | ||
| }} | ||
| secondAction={{ | ||
| icon: "add", | ||
| onPress: () => { | ||
| Alert.alert("add"); | ||
| }, | ||
| accessibilityLabel: "" | ||
| }} | ||
| thirdAction={{ | ||
| icon: "coggle", | ||
| onPress: () => { | ||
| Alert.alert("Settings"); | ||
| }, | ||
| accessibilityLabel: "" | ||
| }} | ||
| /> | ||
| ) | ||
| }); | ||
| }, [animatedScrollViewRef, navigation]); | ||
|
|
||
| return ( | ||
| <Animated.ScrollView | ||
| ref={animatedScrollViewRef} | ||
| contentContainerStyle={{ | ||
| paddingBottom: insets.bottom, | ||
| paddingHorizontal: IOVisualCostants.appMarginDefault | ||
| }} | ||
| scrollEventThrottle={8} | ||
| > | ||
| <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3> | ||
| <VSpacer /> | ||
| {[...Array(50)].map((_el, i) => ( | ||
| <Body key={`body-${i}`}>Repeated text</Body> | ||
| ))} | ||
| </Animated.ScrollView> | ||
| ); | ||
| }; |
94 changes: 94 additions & 0 deletions
94
example/src/pages/HeaderSecondLevelScreenDiscreteTransitionCustomBg.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { | ||
| Body, | ||
| H3, | ||
| HeaderSecondLevel, | ||
| IOColors, | ||
| IOVisualCostants, | ||
| VSpacer | ||
| } from "@pagopa/io-app-design-system"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import { useHeaderHeight } from "@react-navigation/elements"; | ||
| import * as React from "react"; | ||
| import { useLayoutEffect } from "react"; | ||
| import { Alert, View } from "react-native"; | ||
| import Animated, { useAnimatedRef } from "react-native-reanimated"; | ||
| import { useSafeAreaInsets } from "react-native-safe-area-context"; | ||
|
|
||
| export const HeaderSecondLevelScreenDiscreteTransitionCustomBg = () => { | ||
| const insets = useSafeAreaInsets(); | ||
| const navigation = useNavigation(); | ||
| const headerHeight = useHeaderHeight(); | ||
|
|
||
| const animatedScrollViewRef = useAnimatedRef<Animated.ScrollView>(); | ||
|
|
||
| useLayoutEffect(() => { | ||
| navigation.setOptions({ | ||
| headerTransparent: true, | ||
| header: () => ( | ||
| <HeaderSecondLevel | ||
| enableDiscreteTransition | ||
| transparent | ||
| variant="contrast" | ||
| backgroundColor={IOColors["blueIO-500"]} | ||
| animatedRef={animatedScrollViewRef as any} | ||
| title={"Questo è un titolo lungo, ma lungo lungo davvero, eh!"} | ||
| goBack={() => navigation.goBack()} | ||
| backAccessibilityLabel="Torna indietro" | ||
| type="threeActions" | ||
| firstAction={{ | ||
| icon: "help", | ||
| onPress: () => { | ||
| Alert.alert("Contextual Help"); | ||
| }, | ||
| accessibilityLabel: "" | ||
| }} | ||
| secondAction={{ | ||
| icon: "add", | ||
| onPress: () => { | ||
| Alert.alert("add"); | ||
| }, | ||
| accessibilityLabel: "" | ||
| }} | ||
| thirdAction={{ | ||
| icon: "coggle", | ||
| onPress: () => { | ||
| Alert.alert("Settings"); | ||
| }, | ||
| accessibilityLabel: "" | ||
| }} | ||
| /> | ||
| ) | ||
| }); | ||
| }, [animatedScrollViewRef, navigation]); | ||
|
|
||
| return ( | ||
| <Animated.ScrollView | ||
| ref={animatedScrollViewRef} | ||
| contentContainerStyle={{ | ||
| paddingTop: headerHeight, | ||
| paddingBottom: insets.bottom, | ||
| paddingHorizontal: IOVisualCostants.appMarginDefault | ||
| }} | ||
| scrollEventThrottle={8} | ||
| > | ||
| <View | ||
| style={{ | ||
| backgroundColor: IOColors["blueIO-600"], | ||
| height: 800, | ||
| position: "absolute", | ||
| top: -400, | ||
| left: 0, | ||
| right: 0 | ||
| }} | ||
| /> | ||
|
|
||
| <H3 color="white"> | ||
| Questo è un titolo lungo, ma lungo lungo davvero, eh! | ||
| </H3> | ||
| <VSpacer /> | ||
| {[...Array(50)].map((_el, i) => ( | ||
| <Body key={`body-${i}`}>Repeated text</Body> | ||
| ))} | ||
| </Animated.ScrollView> | ||
| ); | ||
| }; |
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
Oops, something went wrong.