varnitgoyal95/super-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

TP-71069 | optimising animation in quote offer screen (#12120)

Browse Source
This commit is contained in:
Somarapu Vamshi
2024-08-22 11:57:04 +05:30
committed by GitHub
parent 388e0f06c7
commit e93215cf5c
1 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
App/Container/Navi-Insurance/screen/quote-offer-screen/QuoteOfferScreen.tsx
View File

@@ -10,7 +10,9 @@ import {
} from "react-native";
import Animated, {
useAnimatedStyle,
useDerivedValue,
useSharedValue,
withDelay,
withTiming,
} from "react-native-reanimated";
import Colors from "../../../../../assets/colors/colors";
@@ -61,19 +63,38 @@ const QuoteOfferScreen = ({
y.value = event.nativeEvent.contentOffset.y;
};
const derivedY = useDerivedValue(() => {
return y.value;
});
const fabTextStyle = useAnimatedStyle(() => {
return {
maxWidth: withTiming(
y.value < lastScrollPosition.value || y.value <= 0 ? 120 : 0,
{ duration: 100 },
maxWidth: withDelay(
50,
withTiming(
derivedY.value < lastScrollPosition.value || derivedY.value <= 0
? 120
: 0,
{ duration: 100 },
),
),
paddingRight: withTiming(
y.value < lastScrollPosition.value || y.value <= 0 ? 16 : 0,
{ duration: 100 },
paddingRight: withDelay(
50,
withTiming(
derivedY.value < lastScrollPosition.value || derivedY.value <= 0
? 16
: 0,
{ duration: 100 },
),
),
opacity: withTiming(
y.value < lastScrollPosition.value || y.value <= 0 ? 1 : 0,
{ duration: 100 },
opacity: withDelay(
50,
withTiming(
derivedY.value < lastScrollPosition.value || derivedY.value <= 0
? 1
: 0,
{ duration: 100 },
),
),
};
});
@@ -88,12 +109,14 @@ const QuoteOfferScreen = ({
const headerBgStyle = useAnimatedStyle(() => {
if (!animateHeader) return { backgroundColor: Colors.white };
return {
backgroundColor:
y.value > HEADER_LOTTIE_WIDGET_HEIGHT
backgroundColor: withTiming(
derivedY.value > HEADER_LOTTIE_WIDGET_HEIGHT
? Colors.grey
: y.value > HEADER_LOTTIE_TITLE_HEIGHT
: derivedY.value > HEADER_LOTTIE_TITLE_HEIGHT
? Colors.aliceBlue
: Colors.transparent,
{ duration: 50 },
),
};
});