Co-authored-by: Prajjaval Verma <prajjaval.verma@navi.com> Co-authored-by: Balrambhai Sharma <sharma.balrambhai@navi.com>
94 lines
1.9 KiB
TypeScript
94 lines
1.9 KiB
TypeScript
import { StyleSheet } from "react-native";
|
|
import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
|
|
import Colors from "../../../../assets/colors/colors";
|
|
import {
|
|
CommonHeaderShadowStyleProperties,
|
|
INITIAL_Y_VALUE,
|
|
} from "../../../common/constants";
|
|
|
|
export const commonStyles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "red",
|
|
},
|
|
fullscreencenter: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
},
|
|
flex_1: {
|
|
flex: 1,
|
|
},
|
|
verticalSpacer32: {
|
|
height: 32,
|
|
},
|
|
verticalSpacer4: {
|
|
height: 4,
|
|
},
|
|
verticalSpacer16: {
|
|
height: 16,
|
|
},
|
|
verticalSpacer24: {
|
|
height: 24,
|
|
},
|
|
selfAlignCenter: {
|
|
alignSelf: "center",
|
|
},
|
|
contentAlignLeft: {
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
},
|
|
height54: {
|
|
height: 54,
|
|
},
|
|
height108: {
|
|
height: 108,
|
|
},
|
|
height8: {
|
|
height: 8,
|
|
},
|
|
flexStart: {
|
|
alignItems: "flex-start",
|
|
width: "100%",
|
|
},
|
|
ctaButton: {
|
|
height: 54,
|
|
flex: 1,
|
|
},
|
|
width16: {
|
|
width: 16,
|
|
},
|
|
width12: {
|
|
width: 12,
|
|
},
|
|
marginRight0: {
|
|
marginRight: 0,
|
|
},
|
|
overflowHidden: {
|
|
overflow: "hidden",
|
|
},
|
|
marginRight0: {
|
|
marginRight: 0,
|
|
},
|
|
});
|
|
|
|
export const commonHeaderShadowStyle = (
|
|
derivedY: Readonly<SharedValue<number>>,
|
|
) => {
|
|
return useAnimatedStyle(() => {
|
|
const isScrolled = derivedY.value > INITIAL_Y_VALUE;
|
|
|
|
return {
|
|
shadowColor: isScrolled ? Colors.black : Colors.transparent,
|
|
shadowOpacity: isScrolled
|
|
? CommonHeaderShadowStyleProperties.SHADOW_OPACITY
|
|
: CommonHeaderShadowStyleProperties.INITIAL_SHADOW_OPACITY,
|
|
shadowRadius: isScrolled
|
|
? CommonHeaderShadowStyleProperties.SHADOW_RADIUS
|
|
: CommonHeaderShadowStyleProperties.INITIAL_SHADOW_RADIUS,
|
|
elevation: isScrolled
|
|
? CommonHeaderShadowStyleProperties.ELEVATION
|
|
: CommonHeaderShadowStyleProperties.INITIAL_ELEVATION,
|
|
};
|
|
});
|
|
};
|